دنیای پروژه

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



 ایجاد یک **ToDo List** با استفاده از **JavaScript**، **HTML** و **CSS** یک پروژه مفید و آموزشی است. در این پروژه، کاربران می‌توانند کارهای خود را اضافه کنند، آنها را مشاهده کنند و کارهای انجام‌شده را حذف کنند.
 
در ادامه، کد منبع این برنامه را به همراه توضیحات ارائه می‌دهم.
 
### ساختار پروژه
ابتدا یک پوشه جدید به نام `todo-list` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `style.css` و `script.js` بسازید.
 
### 1. کد HTML (`index.html`)
```html
   
   
    لیست کارها
   
   
       

لیست کارها

       
       
       
       
       
    ```
     
    ### 2. کد CSS (`style.css`)
    ```css
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
     
    .container {
        text-align: center;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
     
    h1 {
        color: #333;
    }
     
    input {
        padding: 10px;
        width: 200px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
    }
     
    button {
        padding: 10px 15px;
        border: none;
        background-color: #4CAF50;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }
     
    button:hover {
        background-color: #45a049;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        padding: 10px;
        margin: 10px 0;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    li button {
        background-color: #e74c3c;
        border: none;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
    }
     
    li button:hover {
        background-color: #c0392b;
    }
    ```
     
    ### 3. کد JavaScript (`script.js`)
    ```javascript
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');
     
    // تابع اضافه کردن کار
    addTaskBtn.addEventListener('click', function() {
        const taskText = taskInput.value.trim();
        
        if (taskText === '') {
            alert('لطفاً یک کار وارد کنید.');
            return;
        }
     
        const li = document.createElement('li');
        li.textContent = taskText;
     
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'حذف';
        deleteBtn.addEventListener('click', function() {
            taskList.removeChild(li);
        });
     
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
     
        taskInput.value = ''; // پاک کردن ورودی
    });
     
    // اجازه دادن به فشردن کلید Enter
    taskInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            addTaskBtn.click();
        }
    });
    ```
     
    ### توضیحات کد
     
    1. **HTML**:
       - شامل ساختار اصلی برنامه است. ورودی برای افزودن کار جدید، دکمه برای اضافه کردن کار و یک لیست برای نمایش کارها.
     
    2. **CSS**:
       - استایل برای طراحی لیست کارها و عناصر آن. شامل طراحی ورودی، دکمه‌ها و لیست کارها.
     
    3. **JavaScript**:
       - **اضافه کردن کار**: با کلیک بر روی دکمه یا فشار دادن کلید Enter، کار جدید به لیست اضافه می‌شود.
       - **حذف کار**: هر کار دارای دکمه‌ای برای حذف آن کار است. با کلیک روی این دکمه، کار از لیست حذف می‌شود.
       - **بررسی ورودی خالی**: اگر کار خالی باشد، یک پیام هشدار نمایش داده می‌شود.
     
    ### نحوه اجرای پروژه
    1. فایل‌های `index.html`، `style.css` و `script.js` را ایجاد کرده و کدهای مربوطه را در آنها قرار دهید.
    2. فایل `index.html` را در مرورگر خود باز کنید.
    3. کارهای خود را اضافه کنید و از استفاده از لیست کارها لذت ببرید!
     
    با این کدها می‌توانید یک **ToDo List** ساده بسازید و از آن استفاده کنید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی *ToDo List** با استفاده از **JavaScript**، **HTML** و **CSS** می‌باشد