دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی **لیست‌کننده آیتم‌ها** (Item Lister) با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **لیست‌کننده آیتم‌ها** (Item Lister) با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



در اینجا یک پروژه ساده برای ایجاد یک **لیست‌کننده آیتم‌ها** (Item Lister) با استفاده از 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: 500px;
        text-align: center;
    }
     
    h1 {
        margin-bottom: 20px;
    }
     
    form {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
     
    input {
        padding: 10px;
        font-size: 16px;
        width: 100%;
    }
     
    button {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 5px;
    }
     
    .item-list {
        list-style-type: none;
        padding: 0;
    }
     
    .item-list li {
        padding: 10px;
        background-color: #f8f8f8;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    button.delete {
        background-color: #dc3545;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    ```
     
    ### 3. **JavaScript**
    اکنون به سراغ پیاده‌سازی منطق برنامه با JavaScript می‌رویم. این بخش شامل اضافه کردن آیتم جدید، حذف آیتم و جستجو در لیست است.
     
    ```javascript
    // انتخاب عناصر
    const form = document.getElementById('addForm');
    const itemList = document.getElementById('items');
    const filter = document.getElementById('filter');
     
    // افزودن آیتم
    form.addEventListener('submit', function(e) {
        e.preventDefault();
     
        // گرفتن مقدار ورودی
        const newItem = document.getElementById('item').value;
     
        // ایجاد یک آیتم جدید در لیست
        const li = document.createElement('li');
        li.className = 'item';
        li.appendChild(document.createTextNode(newItem));
     
        // ایجاد دکمه حذف
        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'delete';
        deleteBtn.appendChild(document.createTextNode('حذف'));
        li.appendChild(deleteBtn);
     
        // اضافه کردن آیتم به لیست
        itemList.appendChild(li);
     
        // پاک کردن ورودی
        document.getElementById('item').value = '';
    });
     
    // حذف آیتم
    itemList.addEventListener('click', function(e) {
        if (e.target.classList.contains('delete')) {
            if (confirm('آیا مطمئن هستید؟')) {
                const li = e.target.parentElement;
                itemList.removeChild(li);
            }
        }
    });
     
    // فیلتر کردن آیتم‌ها
    filter.addEventListener('keyup', function(e) {
        // دریافت متن جستجو
        const text = e.target.value.toLowerCase();
        const items = itemList.getElementsByTagName('li');
     
        // جستجو در هر آیتم
        Array.from(items).forEach(function(item) {
            const itemName = item.firstChild.textContent;
            if (itemName.toLowerCase().indexOf(text) != -1) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل عنوان برنامه، فرم برای اضافه کردن آیتم جدید، ورودی جستجو، و یک لیست برای نمایش آیتم‌ها است.
    2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
    3. **JavaScript**:
       - **افزودن آیتم**: با ارسال فرم، یک آیتم جدید به لیست اضافه می‌شود.
       - **حذف آیتم**: هر آیتم دارای دکمه "حذف" است که با کلیک بر روی آن، آیتم از لیست حذف می‌شود.
       - **فیلتر کردن آیتم‌ها**: کاربر می‌تواند با تایپ در کادر جستجو، آیتم‌های موجود در لیست را فیلتر کند.
     
    ### نتیجه‌گیری
    این پروژه **لیست‌کننده آیتم‌ها** یک تمرین عالی برای درک بهتر کار با DOM و تعامل با کاربر با استفاده از JavaScript است. این پروژه می‌تواند به شما کمک کند تا با مفاهیم اصلی JavaScript مانند رویدادها (Events)، افزودن و حذف عناصر از DOM و جستجوی در لیست کار کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **لیست‌کننده آیتم‌ها** (Item Lister) با استفاده از HTML، CSS و JavaScript می‌باشد