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

جزئیات محصول

دانلود پروژه کاربردی **سیستم ثبت وظایف در JavaScript**

دانلود پروژه کاربردی **سیستم ثبت وظایف در JavaScript**

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

خرید فایل


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

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

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

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


 ### پروژه **سیستم ثبت وظایف در JavaScript**
 
این پروژه یک سیستم ساده برای ثبت و مدیریت وظایف (Tasks) است. کاربران می‌توانند وظایف جدیدی اضافه کنند، وظایف را مشاهده کنند و آن‌ها را حذف کنند. این پروژه از 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;
    }
     
    h1 {
        margin-bottom: 20px;
    }
     
    input {
        width: 80%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
    }
     
    button {
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        margin-bottom: 20px;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    button.deleteBtn {
        background-color: #dc3545;
    }
    ```
     
    ### 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.trim();
     
        if (taskText) {
            const listItem = document.createElement('li');
     
            listItem.textContent = taskText;
     
            // ایجاد دکمه حذف
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'حذف';
            deleteBtn.classList.add('deleteBtn');
            deleteBtn.onclick = function() {
                taskList.removeChild(listItem);
            };
     
            listItem.appendChild(deleteBtn);
            taskList.appendChild(listItem);
            
            // پاک کردن فیلد ورودی
            taskInput.value = '';
        } else {
            alert('لطفا یک وظیفه وارد کنید.');
        }
    });
     
    // اجازه دادن به اضافه کردن وظیفه با کلید Enter
    taskInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            addTaskBtn.click();
        }
    });
    ```
     
    ### توضیحات کد:
     
    1. **HTML**:
       - شامل عنوان، یک ورودی برای وظایف جدید، یک دکمه برای اضافه کردن وظیفه و یک لیست برای نمایش وظایف است.
     
    2. **CSS**:
       - طراحی ساده برای رابط کاربری شامل استایل برای ورودی، دکمه و لیست وظایف.
     
    3. **JavaScript**:
       - **انتخاب عناصر DOM**: انتخاب عناصر HTML برای تعامل.
       - **تابع اضافه کردن وظیفه**: وظایف جدید را به لیست اضافه می‌کند و شامل یک دکمه حذف است.
       - **دکمه حذف**: امکان حذف وظایف از لیست.
       - **اجازه دادن به اضافه کردن وظیفه با کلید Enter**: کاربر می‌تواند با فشردن کلید Enter وظیفه جدیدی اضافه کند.
     
    ### نتیجه‌گیری
    این پروژه **سیستم ثبت وظایف** یک راه عالی برای یادگیری کار با DOM و مدیریت رویدادها در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی وظایف در Local Storage، قابلیت ویرایش وظایف یا اضافه کردن تاریخ سررسید برای هر وظیفه را اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **سیستم ثبت وظایف در JavaScript** می‌باشد