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

جزئیات محصول

دانلود پروژه کاربردی **لیست کارها (TODO List)** با قابلیت ایجاد، خواندن، بروزرسانی و حذف (CRUD) با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **لیست کارها (TODO List)** با قابلیت ایجاد، خواندن، بروزرسانی و حذف (CRUD) با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



 در اینجا یک پروژه ساده برای ایجاد یک **لیست کارها (TODO List)** با قابلیت ایجاد، خواندن، بروزرسانی و حذف (CRUD) با استفاده از 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: 300px;
        text-align: center;
    }
     
    input[type="text"] {
        width: calc(100% - 22px);
        height: 40px;
        font-size: 16px;
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
     
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
    }
     
    button:hover {
        background-color: #218838;
    }
     
    ul {
        list-style: none;
        padding: 0;
    }
     
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
     
    li button {
        background-color: #dc3545;
        border: none;
        color: white;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
    }
     
    li button:hover {
        background-color: #c82333;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل توابعی برای اضافه کردن، حذف و ویرایش کارها است.
     
    ```javascript
    // انتخاب عناصر DOM
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');
     
    // تابع برای اضافه کردن کار جدید
    addTaskBtn.addEventListener('click', function() {
        const taskText = taskInput.value;
        if (taskText) {
            const li = document.createElement('li');
            li.textContent = taskText;
     
            // دکمه ویرایش
            const editBtn = document.createElement('button');
            editBtn.textContent = 'ویرایش';
            editBtn.onclick = function() {
                const newTask = prompt('ویرایش کار:', taskText);
                if (newTask) {
                    li.firstChild.textContent = newTask;
                }
            };
            
            // دکمه حذف
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'حذف';
            deleteBtn.onclick = function() {
                taskList.removeChild(li);
            };
     
            li.appendChild(editBtn);
            li.appendChild(deleteBtn);
            taskList.appendChild(li);
            taskInput.value = ''; // پاک کردن ورودی
        }
    });
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل ورودی برای وارد کردن کار جدید، دکمه‌ای برای اضافه کردن کار و یک لیست برای نمایش کارها است.
    2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
    3. **JavaScript**:
       - **تابع اضافه کردن کار**: با کلیک بر روی دکمه "اضافه کردن"، کار جدید به لیست اضافه می‌شود.
       - **تابع ویرایش کار**: با کلیک بر روی دکمه "ویرایش"، کار مورد نظر قابل ویرایش می‌شود.
       - **تابع حذف کار**: با کلیک بر روی دکمه "حذف"، کار از لیست حذف می‌شود.
     
    ### نتیجه‌گیری
    این پروژه **لیست کارها (TODO List)** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی کارها در Local Storage یا اضافه کردن تاریخ سررسید به کارها اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **لیست کارها (TODO List)** با قابلیت ایجاد، خواندن، بروزرسانی و حذف (CRUD) با استفاده از HTML، CSS و JavaScript می‌باشد