کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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;
}
.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 {
width: 80%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.task-list {
margin-top: 20px;
text-align: left;
}
.task {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.task button {
background-color: #dc3545;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل اضافه کردن و حذف وظایف است.
```javascript
// انتخاب عناصر HTML
const addTaskBtn = document.getElementById('addTaskBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// تابع برای اضافه کردن وظیفه
addTaskBtn.addEventListener('click', function() {
const taskText = taskInput.value.trim();
// بررسی اینکه آیا ورودی خالی است یا خیر
if (taskText === "") {
alert("لطفا یک وظیفه وارد کنید");
return;
}
// ایجاد عنصر وظیفه
const taskDiv = document.createElement('div');
taskDiv.className = 'task';
// ایجاد متن وظیفه
const taskContent = document.createElement('span');
taskContent.textContent = taskText;
// ایجاد دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.addEventListener('click', function() {
taskList.removeChild(taskDiv);
});
// افزودن متن و دکمه حذف به عنصر وظیفه
taskDiv.appendChild(taskContent);
taskDiv.appendChild(deleteBtn);
// افزودن وظیفه به لیست
taskList.appendChild(taskDiv);
// پاک کردن ورودی
taskInput.value = "";
});
```
### توضیحات کد:
1. **HTML**: شامل ورودی برای اضافه کردن وظیفه، دکمه‌ای برای اضافه کردن وظیفه و بخشی برای نمایش لیست وظایف است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **انتخاب عناصر**: دکمه افزودن، ورودی و لیست وظایف را انتخاب می‌کند.
- **اضافه کردن وظیفه**: وقتی کاربر روی دکمه "اضافه کردن وظیفه" کلیک می‌کند، یک وظیفه جدید به لیست اضافه می‌شود و ورودی پاک می‌شود.
- **حذف وظیفه**: هر وظیفه دارای دکمه‌ای برای حذف آن است.
### نتیجه‌گیری
این پروژه **سیستم ثبت وظایف** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره وظایف در Local Storage، ویرایش وظایف یا مرتب‌سازی وظایف را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم ثبت وظایف** با استفاده از HTML، CSS و JavaScript می‌باشد
