کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **شمارنده (Counter)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا یک عدد را افزایش یا کاهش دهند و همچنین آن را صفر کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای شمارنده ایجاد می‌کنیم.
```html
شمارنده
شمارنده
```
### 2. **CSS**
برای طراحی ظاهری شمارنده از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
#counterValue {
font-size: 48px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل رویدادهای دکمه‌ها و تغییر مقدار شمارنده است.
```javascript
let count = 0; // مقدار اولیه شمارنده
const counterValue = document.getElementById('counterValue');
const incrementBtn = document.getElementById('incrementBtn');
const decrementBtn = document.getElementById('decrementBtn');
const resetBtn = document.getElementById('resetBtn');
// به‌روزرسانی نمایش مقدار شمارنده
function updateCounter() {
counterValue.textContent = count;
}
// افزایش مقدار شمارنده
incrementBtn.addEventListener('click', function() {
count++;
updateCounter();
});
// کاهش مقدار شمارنده
decrementBtn.addEventListener('click', function() {
count--;
updateCounter();
});
// صفر کردن شمارنده
resetBtn.addEventListener('click', function() {
count = 0;
updateCounter();
});
// نمایش مقدار اولیه
updateCounter();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، نمایش مقدار شمارنده و دکمه‌هایی برای افزایش، کاهش و صفر کردن شمارنده است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **متغیر شمارنده**: یک متغیر `count` برای ذخیره مقدار شمارنده.
- **رویدادهای کلیک**: به دکمه‌ها رویدادهایی اضافه شده است که مقدار شمارنده را تغییر می‌دهند و با استفاده از تابع `updateCounter` مقدار جدید را به‌روز می‌کنند.
### نتیجه‌گیری
این پروژه **شمارنده** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند قابلیت تنظیم مقدار اولیه، محدود کردن مقدار شمارنده یا ذخیره مقدار شمارنده در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **شمارنده (Counter)** با استفاده از HTML، CSS و JavaScript می‌باشد
