دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی **مدیریت مهمان** با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **مدیریت مهمان** با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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


 در اینجا یک پروژه ساده برای ایجاد یک **مدیریت مهمان** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربر این امکان را می‌دهد که اطلاعات مهمانان را اضافه، مشاهده و حذف کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای مدیریت مهمان ایجاد می‌کنیم.
 
```html
   
   
    مدیریت مهمان
   
   
       

مدیریت مهمان

       
       
 
       

مهمانان:

       
       
       
    ```
     
    ### 2. **CSS**
    سپس از CSS برای طراحی ظاهری برنامه استفاده می‌کنیم.
     
    ```css
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
     
    .container {
        text-align: center;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
     
    input {
        width: 200px;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
     
    button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }
     
    button:hover {
        background-color: #0056b3;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    .delete-btn {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        background-color: #dc3545;
        color: white;
        cursor: pointer;
    }
     
    .delete-btn:hover {
        background-color: #c82333;
    }
    ```
     
    ### 3. **JavaScript**
    اکنون به سراغ پیاده‌سازی منطق مدیریت مهمان با JavaScript می‌رویم. در این کد، مهمانان اضافه، مشاهده و حذف می‌شوند.
     
    ```javascript
    const guestList = document.getElementById('guestList');
    const guestNameInput = document.getElementById('guestName');
    const addGuestBtn = document.getElementById('addGuestBtn');
     
    addGuestBtn.addEventListener('click', addGuest);
     
    function addGuest() {
        const guestName = guestNameInput.value.trim();
        
        if (guestName === '') {
            alert('لطفاً نام مهمان را وارد کنید.');
            return;
        }
     
        const li = document.createElement('li');
        li.textContent = guestName;
     
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'حذف';
        deleteBtn.classList.add('delete-btn');
        deleteBtn.addEventListener('click', () => {
            guestList.removeChild(li);
        });
     
        li.appendChild(deleteBtn);
        guestList.appendChild(li);
        guestNameInput.value = ''; // پاک کردن ورودی
    }
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل عنوان برنامه، ورودی برای نام مهمان و دکمه‌ای برای اضافه کردن مهمان است. همچنین لیستی برای نمایش مهمانان وجود دارد.
    2. **CSS**: طراحی ساده و کاربرپسند با رنگ‌ها و استایل‌های زیبا.
    3. **JavaScript**:
       - **رویداد `click`**: زمانی که کاربر روی دکمه کلیک می‌کند، نام مهمان از ورودی دریافت می‌شود.
       - **تابع `addGuest`**:
         - بررسی می‌کند که آیا نام مهمان خالی است یا خیر.
         - اگر نام معتبر باشد، یک عنصر `
  • ` جدید برای مهمان ایجاد می‌کند و یک دکمه حذف به آن اضافه می‌کند.
    •      - دکمه حذف با کلیک روی آن، مهمان را از لیست حذف می‌کند.
       - **پاک کردن ورودی**: پس از اضافه کردن مهمان، ورودی نام پاک می‌شود.
     
    ### نتیجه‌گیری
    این برنامه مدیریت مهمان می‌تواند به عنوان یک پروژه ساده و آموزنده برای یادگیری HTML، CSS و JavaScript مورد استفاده قرار گیرد. شما می‌توانید ویژگی‌های بیشتری مانند ذخیره‌سازی محلی (Local Storage) برای نگهداری اطلاعات مهمانان یا اضافه کردن ویرایش نام مهمانان را پیاده‌سازی کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **مدیریت مهمان** با استفاده از HTML، CSS و JavaScript می‌باشد