کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **سیستم سفارش غذا** با استفاده از 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);
width: 80%;
max-width: 400px;
text-align: center;
}
.menu {
margin-bottom: 20px;
}
.food-item {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل مدیریت سفارشات و محاسبه مجموع قیمت‌ها است.
```javascript
const orderList = document.getElementById('orderList');
const totalPriceElement = document.getElementById('totalPrice');
let totalPrice = 0;
// انتخاب دکمه‌های سفارش
const orderButtons = document.querySelectorAll('.order-btn');
orderButtons.forEach(button => {
button.addEventListener('click', function() {
const foodName = this.dataset.food;
const foodPrice = parseInt(this.dataset.price);
// اضافه کردن غذا به لیست سفارش
addToOrder(foodName, foodPrice);
});
});
function addToOrder(foodName, foodPrice) {
const listItem = document.createElement('div');
listItem.textContent = `${foodName} - ${foodPrice} تومان`;
orderList.appendChild(listItem);
// به‌روزرسانی مجموع قیمت
totalPrice += foodPrice;
totalPriceElement.textContent = totalPrice;
}
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، منوی غذاها و یک بخش برای نمایش سفارشات است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **مدیریت سفارشات**: وقتی کاربر روی دکمه "سفارش دهید" کلیک می‌کند، غذا به لیست سفارشات اضافه می‌شود.
- **محاسبه مجموع قیمت**: مجموع قیمت غذاها به‌روزرسانی می‌شود و در صفحه نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **سیستم سفارش غذا** یک مثال عالی برای یادگیری کار با DOM و رویدادها در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند حذف غذا از سفارشات یا ذخیره‌سازی سفارشات در local storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم سفارش غذا** با استفاده از HTML، CSS و JavaScript می‌باشد
