کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه لیست کارها (ToDo List App)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا کارهای مختلف را اضافه کنند، علامت‌گذاری کنند و آن‌ها را حذف کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه ایجاد می‌کنیم.
```html
برنامه لیست کارها
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهر برنامه استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
input {
width: calc(100% - 22px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 10px;
}
.completed {
text-decoration: line-through;
color: gray;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق برنامه با JavaScript می‌رویم.
```javascript
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
// اضافه کردن کار جدید
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTask();
}
});
// تابع اضافه کردن کار
function addTask() {
const taskText = taskInput.value.trim();
if (taskText !== '') {
const li = document.createElement('li');
li.textContent = taskText;
// دکمه علامت‌گذاری
const completeBtn = document.createElement('button');
completeBtn.textContent = '✔️';
completeBtn.addEventListener('click', () => {
li.classList.toggle('completed');
});
// دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '❌';
deleteBtn.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(completeBtn);
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = ''; // پاک کردن ورودی
}
}
```
### توضیحات کد:
1. **HTML**: شامل یک ورودی برای اضافه کردن کار جدید، دکمه‌ای برای افزودن کار و یک لیست برای نمایش کارها است.
2. **CSS**: طراحی صفحه با استفاده از رنگ‌ها، حاشیه‌ها و الگوهای زیبا.
3. **JavaScript**:
- **رویدادها**: با کلیک بر روی دکمه یا فشار دادن کلید Enter، کار جدید به لیست اضافه می‌شود.
- **تابع `addTask`**: این تابع کار جدید را به لیست اضافه می‌کند و دکمه‌های علامت‌گذاری و حذف را برای هر کار ایجاد می‌کند.
- **دکمه علامت‌گذاری**: با کلیک بر روی دکمه، کار به حالت کامل (با خط خورده) تغییر می‌کند.
- **دکمه حذف**: با کلیک بر روی دکمه، کار از لیست حذف می‌شود.
### نتیجه‌گیری
این برنامه لیست کارها یک پروژه ساده و کاربردی برای یادگیری JavaScript و کار با DOM در صفحات وب است. شما میتوانید ویژگی‌های بیشتری مانند ذخیره‌سازی کارها در Local Storage، افزودن قابلیت ویرایش کارها و فیلتر کردن کارهای کامل و ناقص را به این پروژه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ساده برای ایجاد یک **برنامه لیست کارها (ToDo List App)** با استفاده از HTML، CSS و JavaScript می‌باشد
