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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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


در اینجا یک پروژه ساده برای ایجاد یک **فهرست کار** با استفاده از 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;
    }
     
    .task-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 {
        padding: 10px;
        font-size: 16px;
        width: calc(100% - 22px);
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
    }
     
    button {
        padding: 10px;
        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 {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    li button {
        background-color: #dc3545;
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
    }
     
    li button:hover {
        background-color: #c82333;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
     
    ```javascript
    // انتخاب المان‌های HTML
    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.onclick = function() {
                taskList.removeChild(listItem);
            };
     
            listItem.appendChild(deleteBtn);
            taskList.appendChild(listItem);
            taskInput.value = ''; // پاک کردن ورودی
        }
    });
     
    // افزودن قابلیت فشردن Enter برای اضافه کردن کار
    taskInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            addTaskBtn.click();
        }
    });
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل عنوان برنامه، ورودی برای اضافه کردن کار جدید، دکمه‌ای برای افزودن کار و لیست نمایش کارها است.
    2. **CSS**: طراحی ساده و زیبا برای فهرست کار.
    3. **JavaScript**:
       - **انتخاب المان‌ها**: انتخاب المان‌های HTML برای تعامل با آن‌ها.
       - **تابع اضافه کردن کار**: وقتی کاربر دکمه "اضافه کردن" را فشار می‌دهد، کار جدید به لیست اضافه می‌شود.
       - **دکمه حذف**: برای هر کار جدید، دکمه‌ای برای حذف آن اضافه می‌شود.
       - **فشردن Enter**: کاربران می‌توانند با فشردن کلید Enter نیز کار جدید را اضافه کنند.
     
    ### نتیجه‌گیری
    این پروژه **فهرست کارها** یک مثال عالی برای یادگیری نحوه کار با DOM و رویدادهای کاربر در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی کارها در localStorage یا اضافه کردن گزینه‌های ویرایش برای هر کار اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **فهرست کار** با استفاده از HTML، CSS و JavaScript می‌باشد