دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی پارکینگ ساده

دانلود پروژه کاربردی پارکینگ ساده" (Simple Parking Lot)** با استفاده از JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

  کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



پروژه **"پارکینگ ساده" (Simple Parking Lot)** با استفاده از JavaScript می‌تواند به شما کمک کند تا مفاهیم مدیریت داده‌ها و تعامل کاربر با رابط کاربری را بهتر درک کنید. در این پروژه، شما می‌توانید فضاهای خالی پارکینگ را نمایش دهید، خودروها را وارد و خارج کنید و وضعیت پارکینگ را مشاهده کنید.
 
### مراحل پیاده‌سازی پروژه
 
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `simple-parking-lot` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
 
#### ۲. ایجاد فایل HTML
**index.html**:
 
```html
   
   
    پارکینگ ساده
   
   
       

سیستم مدیریت پارکینگ

       
           
       
       
           
           
           
       
       
   
   
```
 
#### ۳. ایجاد فایل CSS
**styles.css**:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 0;
}
 
.container {
    margin-top: 50px;
}
 
h1 {
    color: #333;
}
 
.parking-lot {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 300px;
}
 
.parking-lot div {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: #ddd;
    border: 2px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
}
 
.controls {
    margin-top: 20px;
}
 
input {
    padding: 10px;
    font-size: 16px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
}
 
#message {
    margin-top: 20px;
    font-size: 18px;
    color: #e74c3c;
}
```
 
#### ۴. پیاده‌سازی منطق پارکینگ در JavaScript
**script.js**:
 
```javascript
const parkingSpacesDiv = document.getElementById('parking-spaces');
const carNumberInput = document.getElementById('car-number');
const parkBtn = document.getElementById('park-btn');
const removeBtn = document.getElementById('remove-btn');
const messageDiv = document.getElementById('message');
 
const parkingLot = new Array(6).fill(null); // 6 جای پارک
 
// نمایش وضعیت پارکینگ
function renderParkingLot() {
    parkingSpacesDiv.innerHTML = '';
    parkingLot.forEach((car, index) => {
        const spaceDiv = document.createElement('div');
        spaceDiv.textContent = car ? car : index + 1;
        parkingSpacesDiv.appendChild(spaceDiv);
    });
}
 
// پارک کردن خودرو
parkBtn.addEventListener('click', () => {
    const carNumber = carNumberInput.value.trim();
    if (carNumber === '') {
        showMessage('لطفاً شماره پلاک را وارد کنید.');
        return;
    }
 
    const emptyIndex = parkingLot.indexOf(null);
    if (emptyIndex === -1) {
        showMessage('پارکینگ پر است.');
        return;
    }
 
    parkingLot[emptyIndex] = carNumber;
    showMessage(`خودرو با شماره پلاک ${carNumber} پارک شد.`);
    renderParkingLot();
});
 
// خارج کردن خودرو
removeBtn.addEventListener('click', () => {
    const carNumber = carNumberInput.value.trim();
    if (carNumber === '') {
        showMessage('لطفاً شماره پلاک را وارد کنید.');
        return;
    }
 
    const carIndex = parkingLot.indexOf(carNumber);
    if (carIndex === -1) {
        showMessage('خودرو با این شماره پلاک در پارکینگ نیست.');
        return;
    }
 
    parkingLot[carIndex] = null;
    showMessage(`خودرو با شماره پلاک ${carNumber} خارج شد.`);
    renderParkingLot();
});
 
// نمایش پیام
function showMessage(message) {
    messageDiv.textContent = message;
}
 
// نمایش اولیه پارکینگ
renderParkingLot();
```
 
### توضیحات کد
1. **HTML**:
   - شامل یک بخش برای نمایش جایگاه‌های پارکینگ، یک فیلد ورودی برای وارد کردن شماره پلاک خودرو و دو دکمه برای پارک کردن و خارج کردن خودرو است.
 
2. **CSS**:
   - طراحی ساده برای نمایش جایگاه‌های پارکینگ با حالت شبکه‌ای و دکمه‌های ورودی.
 
3. **JavaScript**:
   - **پارک کردن خودرو**: وقتی کاربر شماره پلاک را وارد می‌کند و روی دکمه "پارک کردن" کلیک می‌کند، جای خالی در آرایه پیدا شده و خودرو در آن جایگاه قرار می‌گیرد.
   - **خارج کردن خودرو**: اگر کاربر شماره پلاکی را وارد کند که در پارکینگ باشد، آن خودرو از جایگاه پارک حذف می‌شود.
   - **نمایش وضعیت پارکینگ**: به‌روزرسانی و نمایش وضعیت پارکینگ به صورت بصری.
 
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. می‌توانید با وارد کردن شماره پلاک خودرو و کلیک روی "پارک کردن"، خودروها را پارک کنید و با کلیک روی "خروج خودرو"، آن‌ها را خارج کنید.
3. پیام‌های مربوط به وضعیت پارکینگ در پایین صفحه نمایش داده می‌شوند.
 
### نتیجه‌گیری
این پروژه ساده به شما کمک می‌کند تا مفاهیم مرتبط با مدیریت داده‌ها و تعامل کاربر با صفحه را از طریق JavaScript و HTML بهتر درک کنید. می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محدودیت زمانی برای پارک خودروها، محاسبه هزینه پارکینگ یا حتی مدیریت ورودی‌های متعدد پارکینگ را اضافه کنید.
| صفحه قابل مشاهده: دانلود پروژه کاربردی پارکینگ ساده" (Simple Parking Lot)** با استفاده از JavaScript می‌باشد