برنامه نویسی

روز: 4 ساختن یک برنامه پیشخوان ساده با HTML ، CSS و JavaScript

امروز ، من با استفاده از HTML ، CSS و JavaScript یک برنامه ضد برنامه کوچک اما مفید ایجاد کردم. این یک پروژه کوچک عالی برای مبتدیان و یک روش مفید برای تقویت مهارت های اساسی توسعه وب است.

بگذارید شما را از طریق نحوه ساخت آن و چه کاری انجام دهم.

آنچه برنامه انجام می دهد

این برنامه پیشخوان یک عدد را نشان می دهد (از 0) و سه دکمه را ارائه می دهد:

➕ Increase: Adds 1 to the counter

➖ Decrease: Subtracts 1 from the counter

🔁 Reset: Resets the counter back to 0
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

این تعاملی ، پاسخگو است و درست در مرورگر اجرا می شود – هیچ چارچوبی لازم نیست!

رمز

در اینجا کد HTML کامل وجود دارد که شامل ساختار و منطق JavaScript است:




    
    
    Counter App
    


    

    


حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

کد CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 4em;
    margin-bottom: 20px;
}

.btn button {
    font-size: 1.5em;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.btn button:hover {
    background-color: #0056b3;
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

برپایی

شرح تصویر

آنچه یاد گرفتم

در حین ساخت این برنامه ، من تمرین کردم:

Using onclick to trigger JavaScript functions

Updating the DOM with innerText

Writing clean, reusable functions

Keeping logic and presentation separate
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا