کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **شمارنده محصولات (Product Counter)** با استفاده از JavaScript
این پروژه یک شمارنده ساده است که به کاربران امکان می‌دهد تا تعداد محصولات را افزایش یا کاهش دهند. ما از 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;
width: 300px;
}
h1 {
margin-bottom: 20px;
}
.counter {
display: flex;
justify-content: space-between;
align-items: center;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#count {
font-size: 24px;
font-weight: bold;
width: 50px;
text-align: center;
}
```
### 3. **JavaScript**
سپس منطق شمارنده محصولات را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const decreaseBtn = document.getElementById('decreaseBtn');
const increaseBtn = document.getElementById('increaseBtn');
const countDisplay = document.getElementById('count');
// مقدار اولیه شمارنده
let count = 0;
// رویداد کلیک برای دکمه کاهش
decreaseBtn.addEventListener('click', () => {
count--;
updateDisplay();
});
// رویداد کلیک برای دکمه افزایش
increaseBtn.addEventListener('click', () => {
count++;
updateDisplay();
});
// به‌روزرسانی نمایش شمارنده
function updateDisplay() {
countDisplay.textContent = count;
}
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان اپلیکیشن، دو دکمه برای افزایش و کاهش شمارنده، و یک بخش برای نمایش تعداد فعلی محصولات است.
2. **CSS**:
- طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **متغیر شمارنده**: متغیری برای ذخیره مقدار فعلی شمارنده.
- **رویدادهای کلیک**: هر دکمه با یک رویداد کلیک برای افزایش یا کاهش مقدار شمارنده پیوند داده شده است.
- **به‌روزرسانی نمایش**: تابعی برای به‌روزرسانی نمایش مقدار شمارنده در صفحه.
### نتیجه‌گیری
این پروژه **شمارنده محصولات** یک مثال ساده و مفید برای استفاده از JavaScript در ایجاد رابط‌های کاربری تعاملی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره کردن مقدار شمارنده در Local Storage یا افزودن دکمه‌های برای تنظیم مقدار خاص اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **شمارنده محصولات (Product Counter)** با استفاده از JavaScript می‌باشد
