برنامه نویسی
روز: 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