کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **برنامه TODO (To-Do App) در JavaScript**
این پروژه یک برنامه ساده برای مدیریت کارها (TODO) است که به کاربران اجازه می‌دهد وظایف خود را اضافه، حذف و علامت‌گذاری کنند. این برنامه از HTML، CSS و JavaScript برای پیاده‌سازی استفاده می‌کند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه TODO ایجاد می‌کنیم.
```html
برنامه TODO
```
### 2. **CSS**
برای طراحی ظاهری برنامه TODO از 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: 90%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 10px;
font-size: 16px;
margin-right: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: #888;
}
button.delete {
background-color: #dc3545;
}
```
### 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 === '') {
alert('لطفا یک کار وارد کنید!');
return;
}
// ایجاد یک عنصر لیست جدید
const listItem = document.createElement('li');
listItem.textContent = taskText;
// دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('delete');
// افزودن رویداد کلیک به دکمه حذف
deleteBtn.addEventListener('click', function() {
taskList.removeChild(listItem);
});
// افزودن رویداد کلیک برای علامت‌گذاری کار به عنوان انجام شده
listItem.addEventListener('click', function() {
listItem.classList.toggle('completed');
});
// افزودن دکمه حذف به عنصر لیست
listItem.appendChild(deleteBtn);
// افزودن عنصر لیست به لیست
taskList.appendChild(listItem);
// پاک کردن ورودی
taskInput.value = '';
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، ورودی برای اضافه کردن کار جدید، دکمه‌ای برای افزودن کار و لیستی برای نمایش کارها.
2. **CSS**:
- طراحی ساده و کاربرپسند برای ورودی‌ها، دکمه‌ها و لیست کارها.
3. **JavaScript**:
- **انتخاب عناصر HTML**: برای ورودی کار، دکمه افزودن و لیست کارها.
- **رویداد کلیک دکمه افزودن**:
- بررسی ورودی خالی و نمایش پیغام هشدار.
- ایجاد عنصر لیست جدید و افزودن متن کار.
- ایجاد دکمه حذف و افزودن رویداد کلیک برای حذف کار.
- افزودن رویداد کلیک برای علامت‌گذاری کار به عنوان انجام شده.
- **پاک کردن ورودی**: پس از افزودن کار جدید، ورودی خالی می‌شود.
### نتیجه‌گیری
این پروژه **برنامه TODO** یک مثال عالی برای یادگیری نحوه کار با DOM و رویدادهای کاربر در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره کارها در محلی (local storage) یا امکان ویرایش کارها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه TODO (To-Do App) در JavaScript** می‌باشد
