کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **یادداشت‌های سریع (Quick Notes) در JavaScript**
این پروژه یک برنامه یادداشت‌برداری ساده است که به کاربران اجازه می‌دهد یادداشت‌های خود را به راحتی ایجاد، ویرایش و حذف کنند. این برنامه با استفاده از 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 {
text-align: center;
width: 80%;
max-width: 500px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
resize: none;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.notes {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.note {
background-color: white;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر
const noteInput = document.getElementById('noteInput');
const addNoteBtn = document.getElementById('addNoteBtn');
const notesContainer = document.getElementById('notesContainer');
// تابع برای افزودن یادداشت
addNoteBtn.addEventListener('click', function() {
const noteText = noteInput.value.trim();
if (noteText) {
// ایجاد عنصر یادداشت
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
// ایجاد عنصر متن یادداشت
const noteContent = document.createElement('span');
noteContent.textContent = noteText;
// ایجاد دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('delete-btn');
deleteBtn.textContent = 'حذف';
deleteBtn.addEventListener('click', function() {
notesContainer.removeChild(noteDiv);
});
// افزودن متن و دکمه حذف به یادداشت
noteDiv.appendChild(noteContent);
noteDiv.appendChild(deleteBtn);
// افزودن یادداشت به container
notesContainer.appendChild(noteDiv);
// پاک کردن ورودی
noteInput.value = '';
} else {
alert('لطفاً یادداشت خود را وارد کنید!');
}
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان، یک textarea برای نوشتن یادداشت‌ها، یک دکمه برای افزودن یادداشت، و یک container برای نمایش یادداشت‌ها است.
2. **CSS**:
- طراحی برای یادداشت‌ها و دکمه‌ها، شامل ویژگی‌های چیدمان و استایل‌های ظاهری.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب عناصر HTML با استفاده از `getElementById`.
- **تابع برای افزودن یادداشت**: وقتی کاربر روی دکمه "افزودن یادداشت" کلیک می‌کند، یک یادداشت جدید ایجاد می‌شود.
- **دکمه حذف**: هر یادداشت دکمه‌ای برای حذف دارد که با کلیک بر روی آن یادداشت از لیست حذف می‌شود.
- **بررسی ورودی**: اگر ورودی خالی باشد، پیامی به کاربر نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **یادداشت‌های سریع** یک مثال عالی برای استفاده از مفاهیم JavaScript، شامل کار با DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره یادداشت‌ها در `localStorage` یا ویرایش یادداشت‌ها را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **یادداشت‌های سریع (Quick Notes) در JavaScript** می‌باشد
