کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **مدیر برنامه‌ریزی قطار** (Train Schedule Manager) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران امکان می‌دهد تا اطلاعات مربوط به زمان‌بندی قطارها را مدیریت و مشاهده کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه ایجاد می‌کنیم.
```html
مدیر برنامه‌ریزی قطار
مدیر برنامه‌ریزی قطار
نام قطار |
مقصد |
زمان حرکت |
عملیات |
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهری برنامه استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
input, button {
padding: 10px;
font-size: 16px;
}
button {
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #f8f8f8;
}
button.delete-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق برنامه با JavaScript می‌رویم. این بخش شامل اضافه کردن برنامه‌های جدید، نمایش آن‌ها در جدول و حذف برنامه‌ها است.
```javascript
document.getElementById("trainForm").addEventListener("submit", function(event) {
event.preventDefault(); // جلوگیری از ارسال فرم پیش‌فرض
// دریافت مقادیر ورودی‌ها
const trainName = document.getElementById("trainName").value;
const destination = document.getElementById("destination").value;
const departureTime = document.getElementById("departureTime").value;
// اضافه کردن ردیف جدید به جدول
addTrainToSchedule(trainName, destination, departureTime);
// پاک کردن ورودی‌ها
document.getElementById("trainForm").reset();
});
function addTrainToSchedule(trainName, destination, departureTime) {
const tableBody = document.getElementById("scheduleBody");
const row = document.createElement("tr");
// ایجاد سلول‌های جدول
const trainNameCell = document.createElement("td");
trainNameCell.textContent = trainName;
const destinationCell = document.createElement("td");
destinationCell.textContent = destination;
const departureTimeCell = document.createElement("td");
departureTimeCell.textContent = departureTime;
const actionCell = document.createElement("td");
const deleteButton = document.createElement("button");
deleteButton.textContent = "حذف";
deleteButton.classList.add("delete-btn");
deleteButton.addEventListener("click", function() {
row.remove();
});
actionCell.appendChild(deleteButton);
// افزودن سلول‌ها به ردیف
row.appendChild(trainNameCell);
row.appendChild(destinationCell);
row.appendChild(departureTimeCell);
row.appendChild(actionCell);
// افزودن ردیف به جدول
tableBody.appendChild(row);
}
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، فرم برای اضافه کردن برنامه جدید، و جدولی برای نمایش برنامه‌های قطار است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری جذاب و کاربرپسند.
3. **JavaScript**:
- **افزودن برنامه قطار**: با ارسال فرم، یک کلمه جدید به جدول برنامه اضافه می‌شود.
- **ایجاد ردیف جدید در جدول**: تابع `addTrainToSchedule` یک ردیف جدید با اطلاعات قطار ایجاد می‌کند و آن را به جدول اضافه می‌کند.
- **حذف برنامه**: هر ردیف دارای دکمه "حذف" است که با کلیک بر روی آن، ردیف از جدول حذف می‌شود.
### نتیجه‌گیری
این پروژه مدیر برنامه‌ریزی قطار می‌تواند به عنوان یک ابزار مفید برای تمرین و یادگیری JavaScript و نحوه تعامل با عناصر HTML مورد استفاده قرار گیرد. شما میتوانید ویژگی‌های بیشتری مانند ذخیره اطلاعات در مرورگر کاربر، جستجو و فیلتر کردن برنامه‌ها، و نمایش تایمر برای زمان‌های حرکت را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **مدیر برنامه‌ریزی قطار** (Train Schedule Manager) با استفاده از HTML، CSS و JavaScript می‌باشد
