کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه لیست کارها (To-Do List)** با استفاده از 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.task {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
position: relative;
}
.deleteBtn {
position: absolute;
top: 10px;
right: 10px;
background-color: red;
border: none;
color: white;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل افزودن، حذف و ویرایش کارها است.
```javascript
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const tasksContainer = document.getElementById('tasksContainer');
// افزودن کار
addTaskBtn.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText) {
const taskDiv = document.createElement('div');
taskDiv.classList.add('task');
const taskContent = document.createElement('p');
taskContent.textContent = taskText;
taskDiv.appendChild(taskContent);
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('deleteBtn');
deleteBtn.addEventListener('click', () => {
tasksContainer.removeChild(taskDiv);
});
taskDiv.appendChild(deleteBtn);
tasksContainer.appendChild(taskDiv);
taskInput.value = ''; // خالی کردن ورودی
} else {
alert('لطفاً یک کار وارد کنید.');
}
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، یک ناحیه ورودی برای کار جدید و دکمه‌ای برای افزودن کار است.
- ناحیه‌ای برای نمایش کارها (`tasksContainer`) نیز وجود دارد.
2. **CSS**:
- طراحی زیبا و کاربرپسند برای برنامه با استفاده از CSS.
- هر کار در یک کادر با دکمه حذف مشخص شده است.
3. **JavaScript**:
- با استفاده از رویداد کلیک، کار جدید به لیست کارها اضافه می‌شود.
- کارها به صورت داینامیک ایجاد می‌شوند و هر کار شامل یک دکمه حذف است که با کلیک بر روی آن، کار مربوطه حذف می‌شود.
- در صورتی که کاربر سعی کند کار خالی اضافه کند، پیغام خطا نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **برنامه لیست کارها** یک مثال عالی از استفاده از JavaScript برای ایجاد یک اپلیکیشن تعاملی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش کارها یا ذخیره‌سازی کارها در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه لیست کارها (To-Do List)** با استفاده از HTML، CSS و JavaScript می‌باشد
