کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
width: calc(100% - 22px);
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: #dc3545;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
li button:hover {
background-color: #c82333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب المان‌های HTML
const projectInput = document.getElementById('projectInput');
const addProjectBtn = document.getElementById('addProjectBtn');
const projectList = document.getElementById('projectList');
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
// تابع برای اضافه کردن پروژه جدید
addProjectBtn.addEventListener('click', function() {
const projectText = projectInput.value.trim();
if (projectText) {
const listItem = document.createElement('li');
listItem.textContent = projectText;
// ایجاد دکمه حذف پروژه
const deleteProjectBtn = document.createElement('button');
deleteProjectBtn.textContent = 'حذف';
deleteProjectBtn.onclick = function() {
projectList.removeChild(listItem);
taskList.style.display = 'none'; // مخفی کردن لیست کارها
taskInput.style.display = 'none'; // مخفی کردن ورودی کار
addTaskBtn.style.display = 'none'; // مخفی کردن دکمه اضافه کردن کار
taskList.innerHTML = ''; // پاک کردن کارهای مربوط به پروژه حذف شده
};
// ایجاد دکمه برای افزودن کارها به پروژه
const addTaskBtn = document.createElement('button');
addTaskBtn.textContent = 'اضافه کردن کار';
addTaskBtn.onclick = function() {
taskInput.style.display = 'block'; // نمایش ورودی کار
addTaskBtn.style.display = 'block'; // نمایش دکمه اضافه کردن کار
taskList.style.display = 'block'; // نمایش لیست کارها
taskInput.setAttribute('data-project', projectText); // ذخیره نام پروژه برای کارهای جدید
};
listItem.appendChild(deleteProjectBtn);
listItem.appendChild(addTaskBtn);
projectList.appendChild(listItem);
projectInput.value = ''; // پاک کردن ورودی پروژه
}
});
// تابع برای اضافه کردن کار جدید
addTaskBtn.addEventListener('click', function() {
const taskText = taskInput.value.trim();
if (taskText) {
const listItem = document.createElement('li');
listItem.textContent = taskText;
// ایجاد دکمه حذف کار
const deleteTaskBtn = document.createElement('button');
deleteTaskBtn.textContent = 'حذف';
deleteTaskBtn.onclick = function() {
taskList.removeChild(listItem);
};
listItem.appendChild(deleteTaskBtn);
taskList.appendChild(listItem);
taskInput.value = ''; // پاک کردن ورودی کار
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای اضافه کردن پروژه‌ها، دکمه‌ای برای افزودن پروژه، لیست نمایش پروژه‌ها و همچنین ورودی و لیست کارها است.
2. **CSS**: طراحی ساده و زیبا برای فهرست پروژه‌ها و کارها.
3. **JavaScript**:
- **انتخاب المان‌ها**: انتخاب المان‌های HTML برای تعامل با آن‌ها.
- **تابع اضافه کردن پروژه**: وقتی کاربر دکمه "اضافه کردن پروژه" را فشار می‌دهد، پروژه جدید به لیست اضافه می‌شود و دکمه‌هایی برای حذف پروژه و اضافه کردن کار به آن پروژه ایجاد می‌شود.
- **تابع اضافه کردن کار**: وقتی کاربر دکمه "اضافه کردن کار" را فشار می‌دهد، کار جدید به لیست کارها اضافه می‌شود.
- **دکمه‌های حذف**: برای هر پروژه و کار، دکمه‌ای برای حذف آن‌ها وجود دارد.
### نتیجه‌گیری
این پروژه **فهرست پروژه‌ها و کارها** یک مثال عالی برای یادگیری نحوه کار با DOM و رویدادهای کاربر در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی پروژه‌ها و کارها در localStorage یا اضافه کردن ویژگی‌های ویرایش برای هر پروژه و کار اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **فهرست پروژه‌ها و کارها** با استفاده از HTML، CSS و JavaScript می‌باشد
