کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه یادداشت‌برداری** (Note App) با استفاده از 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: 80%;
max-width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 10px;
font-size: 16px;
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;
margin-left: 10px;
}
.notes {
margin-top: 20px;
}
.note {
background-color: #e9ecef;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
position: relative;
}
.delete-btn {
position: absolute;
top: 5px;
right: 10px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل افزودن، حذف و نمایش یادداشت‌ها است.
```javascript
// انتخاب المان‌های HTML
const noteInput = document.getElementById('noteInput');
const addNoteBtn = document.getElementById('addNoteBtn');
const notesList = document.getElementById('notesList');
// افزودن رویداد کلیک به دکمه اضافه کردن یادداشت
addNoteBtn.addEventListener('click', addNote);
// تابع برای اضافه کردن یادداشت
function addNote() {
const noteText = noteInput.value.trim();
if (noteText === "") {
alert("لطفا یک یادداشت وارد کنید.");
return;
}
// ایجاد یک عنصر جدید برای یادداشت
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
noteDiv.textContent = noteText;
// ایجاد دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('delete-btn');
deleteBtn.addEventListener('click', function() {
notesList.removeChild(noteDiv);
});
noteDiv.appendChild(deleteBtn);
notesList.appendChild(noteDiv);
// پاک کردن ورودی
noteInput.value = "";
}
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای یادداشت جدید، دکمه برای اضافه کردن یادداشت و یک بخش برای نمایش یادداشت‌ها است.
2. **CSS**: طراحی ساده و کاربرپسند برای ایجاد یک رابط بصری زیبا.
3. **JavaScript**:
- **تعریف عناصر**: شامل ورودی یادداشت، دکمه اضافه کردن و لیست یادداشت‌ها.
- **تابع برای اضافه کردن یادداشت**: وقتی کاربر یادداشتی وارد می‌کند و دکمه را می‌زند، یادداشت جدید ایجاد می‌شود.
- **دکمه حذف**: هر یادداشت دارای دکمه‌ای برای حذف است که با کلیک روی آن، یادداشت حذف می‌شود.
### نتیجه‌گیری
این پروژه **برنامه یادداشت‌برداری** یک مثال عالی از کار با DOM و مفاهیم جاوااسکریپت است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره یادداشت‌ها در Local Storage یا ویرایش یادداشت‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه یادداشت‌برداری** (Note App) با استفاده از HTML، CSS و JavaScript می‌باشد
