کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **سیستم رزرو صندلی فیلم** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا صندلی‌های فیلم را انتخاب و رزرو کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای سیستم رزرو صندلی ایجاد می‌کنیم.
```html
رزرو صندلی فیلم
رزرو صندلی فیلم
صندلی‌های انتخاب شده: 0
قیمت کل: 0 تومان
```
### 2. **CSS**
برای طراحی ظاهری سیستم رزرو صندلی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: flex-start;
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: 90%;
max-width: 600px;
text-align: center;
}
.screen {
background-color: #333;
color: white;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.seats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 20px 0;
}
.seat {
width: 50px;
height: 50px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.seat.selected {
background-color: #28a745;
}
.seat.taken {
background-color: #dc3545;
cursor: not-allowed;
}
.info {
margin-top: 20px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل ایجاد صندلی‌ها و مدیریت انتخاب و رزرو آن‌ها است.
```javascript
const seatsContainer = document.getElementById('seats');
const selectedSeatsCount = document.getElementById('selectedSeats');
const totalPriceElement = document.getElementById('totalPrice');
const seatPrice = 10000; // قیمت هر صندلی
// ایجاد صندلی‌ها
for (let i = 0; i < 20; i++) {
const seat = document.createElement('div');
seat.className = 'seat';
seat.addEventListener('click', () => toggleSeat(seat));
seatsContainer.appendChild(seat);
}
let selectedSeats = [];
// توToggle صندلی
function toggleSeat(seat) {
if (seat.classList.contains('taken')) {
return; // اگر صندلی گرفته شده است، هیچ کار نکنید
}
seat.classList.toggle('selected');
updateSelectedSeats();
}
// به روزرسانی تعداد صندلی‌های انتخاب شده و قیمت کل
function updateSelectedSeats() {
selectedSeats = document.querySelectorAll('.seat.selected');
selectedSeatsCount.textContent = selectedSeats.length;
const totalPrice = selectedSeats.length * seatPrice;
totalPriceElement.textContent = totalPrice;
}
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، بخش صفحه نمایش، صندلی‌ها و نمایش تعداد صندلی‌های انتخاب شده و قیمت کل است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- ایجاد ۲۰ صندلی به صورت داینامیک و افزودن رویداد کلیک به هر صندلی.
- تغییر وضعیت صندلی‌ها (انتخاب شده یا غیرانتخاب شده) با کلیک کردن بر روی آن‌ها.
- به‌روزرسانی تعداد صندلی‌های انتخاب شده و قیمت کل.
### نتیجه‌گیری
این پروژه **سیستم رزرو صندلی فیلم** یک مثال عالی برای استفاده از مفاهیم JavaScript، دستکاری DOM و ایجاد یک رابط کاربری تعاملی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی اطلاعات رزرو، انتخاب صندلی‌های غیرقابل انتخاب و طراحی بهتر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم رزرو صندلی فیلم** با استفاده از HTML، CSS و JavaScript می‌باشد
