مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **لیست اقلام (Item List)** با استفاده از JavaScript

دانلود پروژه کاربردی **لیست اقلام (Item List)** با استفاده از JavaScript

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

خرید فایل


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

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

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

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




 ### پروژه **لیست اقلام (Item List)** با استفاده از JavaScript
 
این پروژه یک لیست اقلام ساده است که به کاربران اجازه می‌دهد اقلام را به لیست اضافه کنند و آن‌ها را مشاهده و حذف کنند. ما از 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;
    }
     
    h1 {
        margin-bottom: 20px;
    }
     
    input {
        padding: 10px;
        width: 70%;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
    }
     
    button {
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
    }
     
    button:hover {
        background-color: #0056b3;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
        margin-top: 20px;
    }
     
    li {
        padding: 10px;
        background-color: #eaeaea;
        margin: 5px 0;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    li button {
        background-color: #dc3545;
        border: none;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }
     
    li button:hover {
        background-color: #c82333;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
     
    ```javascript
    // انتخاب عناصر HTML
    const itemInput = document.getElementById('itemInput');
    const addItemBtn = document.getElementById('addItemBtn');
    const itemList = document.getElementById('itemList');
     
    // افزودن رویداد کلیک به دکمه اضافه کردن
    addItemBtn.addEventListener('click', addItem);
     
    // تابع اضافه کردن اقلام
    function addItem() {
        const itemText = itemInput.value.trim();
        if (itemText === '') {
            alert('لطفاً یک نام برای قلم وارد کنید!');
            return;
        }
     
        // ایجاد عنصر جدید لیست
        const li = document.createElement('li');
        li.textContent = itemText;
     
        // ایجاد دکمه حذف
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'حذف';
        deleteBtn.addEventListener('click', () => {
            itemList.removeChild(li);
        });
     
        // افزودن دکمه حذف به لیست
        li.appendChild(deleteBtn);
        itemList.appendChild(li);
     
        // پاک کردن ورودی
        itemInput.value = '';
    }
    ```
     
    ### توضیحات کد:
    1. **HTML**:
       - شامل عنوان پروژه، یک ورودی برای اضافه کردن اقلام، یک دکمه برای افزودن و یک لیست برای نمایش اقلام است.
     
    2. **CSS**:
       - طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
     
    3. **JavaScript**:
       - **انتخاب عناصر**: انتخاب عناصر HTML با استفاده از `getElementById`.
       - **تابع `addItem`**: این تابع برای افزودن اقلام به لیست استفاده می‌شود. اگر ورودی خالی باشد، یک هشدار نمایش داده می‌شود. در غیر این صورت، یک عنصر `li` جدید ایجاد شده و به لیست اضافه می‌شود.
       - **دکمه حذف**: هر قلم به یک دکمه حذف متصل است که با کلیک بر روی آن، قلم مربوطه از لیست حذف می‌شود.
     
    ### نتیجه‌گیری
    این پروژه **لیست اقلام** یک مثال عالی از استفاده از JavaScript برای مدیریت DOM و تعامل با کاربر است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش اقلام یا ذخیره‌سازی محلی (local storage) اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **لیست اقلام (Item List)** با استفاده از JavaScript می‌باشد