کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک برنامه چک‌لیست (Checklist App) با استفاده از Vanilla JavaScript یک پروژه عالی است که به شما کمک می‌کند تا با مفاهیم پایه‌ای JavaScript، مانند مدیریت رویدادها و تعامل با DOM، آشنا شوید. در این پروژه، کاربر می‌تواند موارد مختلف را به چک‌لیست اضافه کند، آن‌ها را بررسی کند و در صورت نیاز حذف کند.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `checklist-app` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
برنامه چک‌لیست
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 400px;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
input {
width: calc(100% - 100px);
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #0056b3;
}
#task-list {
list-style-type: none;
padding: 0;
}
.task-item {
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.task-item.completed {
text-decoration: line-through;
color: #888;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
.delete-btn:hover {
background-color: #c0392b;
}
```
#### ۴. پیاده‌سازی منطق برنامه در JavaScript
**script.js**:
```javascript
const addButton = document.getElementById('add-btn');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
// اضافه کردن تسک جدید به لیست
addButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText !== '') {
addTask(taskText);
taskInput.value = '';
} else {
alert('لطفاً یک آیتم وارد کنید.');
}
});
// افزودن تسک جدید به DOM
function addTask(taskText) {
const li = document.createElement('li');
li.className = 'task-item';
const taskSpan = document.createElement('span');
taskSpan.textContent = taskText;
// افزودن قابلیت تکمیل تسک با کلیک
taskSpan.addEventListener('click', () => {
li.classList.toggle('completed');
});
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-btn';
deleteButton.textContent = 'حذف';
// حذف تسک از لیست
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(taskSpan);
li.appendChild(deleteButton);
taskList.appendChild(li);
}
```
### توضیحات کد
1. **HTML**:
- شامل فیلد ورودی برای وارد کردن تسک جدید و یک دکمه برای افزودن آیتم‌ها به چک‌لیست است.
- **`
`**: لیستی برای نمایش تسک‌های اضافه شده.
2. **CSS**:
- طراحی ساده و زیبا برای فیلدهای ورودی، دکمه‌ها و تسک‌ها.
- حالت **`completed`** برای نمایش تسک‌های انجام‌شده به صورت خط خورده.
3. **JavaScript**:
- **اضافه کردن تسک جدید**: با کلیک بر روی دکمه "افزودن"، تسک جدید به لیست اضافه می‌شود.
- **نمایش تسک در DOM**: تابع `addTask` برای ایجاد آیتم جدید در DOM و افزودن آن به لیست استفاده می‌شود.
- **تکمیل تسک**: با کلیک بر روی نام تسک، آن را به عنوان "تکمیل شده" علامت‌گذاری می‌کند.
- **حذف تسک**: دکمه حذف برای پاک کردن تسک از لیست استفاده می‌شود.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. آیتم‌های چک‌لیست را وارد کرده و با کلیک بر روی "افزودن"، آن‌ها را به لیست اضافه کنید. هر آیتم می‌تواند با کلیک روی آن تکمیل شود یا با استفاده از دکمه "حذف" از لیست حذف شود.
### نتیجه‌گیری
این پروژه به شما کمک می‌کند تا یک برنامه چک‌لیست ساده را با استفاده از Vanilla JavaScript پیاده‌سازی کنید. این پروژه مفاهیم مدیریت رویدادها، ایجاد و حذف عناصر DOM و تعامل با ورودی‌های کاربر را به خوبی به شما آموزش می‌دهد. این قابلیت‌ها می‌توانند با اضافه کردن ویژگی‌های بیشتری مانند ذخیره‌سازی داده‌ها در Local Storage یا افزودن فیلترهای نمایش، گسترش پیدا کنند تا کاربر بتواند آیتم‌های تکمیل‌شده یا تکمیل‌نشده را ببیند.
| صفحه قابل مشاهده:
دانلود پروژه کاربردی برنامه چک‌لیست (Checklist App) با استفاده از Vanilla JavaScript می‌باشد
