کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **برنامه یادداشت‌برداری (Note Taking App)** با استفاده از 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;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.notes-list {
margin-top: 20px;
text-align: left;
}
.note-item {
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.delete-btn {
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
}
```
### 3. **JavaScript**
سپس منطق برنامه یادداشت‌برداری را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const noteInput = document.getElementById('noteInput');
const addNoteBtn = document.getElementById('addNoteBtn');
const notesList = document.getElementById('notesList');
// تابع برای اضافه کردن یادداشت
function addNote() {
const noteText = noteInput.value.trim();
if (noteText === '') {
alert("لطفا یک یادداشت وارد کنید.");
return;
}
// ایجاد عنصر جدید برای یادداشت
const noteItem = document.createElement('div');
noteItem.classList.add('note-item');
noteItem.innerHTML = `
`;
// افزودن یادداشت به لیست
notesList.appendChild(noteItem);
// پاک کردن ورودی
noteInput.value = '';
// افزودن رویداد کلیک به دکمه حذف
const deleteBtn = noteItem.querySelector('.delete-btn');
deleteBtn.addEventListener('click', function() {
notesList.removeChild(noteItem);
});
}
// افزودن رویداد کلیک به دکمه اضافه کردن یادداشت
addNoteBtn.addEventListener('click', addNote);
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان، یک فیلد متنی برای وارد کردن یادداشت، دکمه‌ای برای اضافه کردن یادداشت و یک بخش برای نمایش یادداشت‌ها است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب عناصر HTML از طریق `getElementById`.
- **تابع اضافه کردن یادداشت**: زمانی که کاربر دکمه "اضافه کردن یادداشت" را کلیک می‌کند، یک یادداشت جدید ایجاد می‌شود و به لیست یادداشت‌ها اضافه می‌شود.
- **حذف یادداشت**: دکمه حذف برای هر یادداشت اضافه می‌شود که با کلیک بر روی آن یادداشت مربوطه حذف می‌شود.
- **بررسی ورودی**: اطمینان از اینکه ورودی‌های وارد شده معتبر هستند.
### نتیجه‌گیری
این پروژه **برنامه یادداشت‌برداری** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره یادداشت‌ها در لوکال استوریج یا قابلیت ویرایش یادداشت‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه یادداشت‌برداری (Note Taking App)** با استفاده از JavaScript می‌باشد
