کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-bottom: 20px;
}
.note {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
position: relative;
}
.deleteBtn {
position: absolute;
top: 10px;
right: 10px;
background-color: red;
border: none;
color: white;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل افزودن، حذف و ویرایش یادداشت‌ها است.
```javascript
const noteInput = document.getElementById('noteInput');
const addNoteBtn = document.getElementById('addNoteBtn');
const notesContainer = document.getElementById('notesContainer');
// افزودن یادداشت
addNoteBtn.addEventListener('click', () => {
const noteText = noteInput.value.trim();
if (noteText) {
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
const noteContent = document.createElement('p');
noteContent.textContent = noteText;
noteDiv.appendChild(noteContent);
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('deleteBtn');
deleteBtn.addEventListener('click', () => {
notesContainer.removeChild(noteDiv);
});
noteDiv.appendChild(deleteBtn);
notesContainer.appendChild(noteDiv);
noteInput.value = ''; // خالی کردن ورودی
} else {
alert('لطفاً یک یادداشت وارد کنید.');
}
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، یک ناحیه ورودی برای یادداشت جدید و دکمه‌ای برای افزودن یادداشت است.
- ناحیه‌ای برای نمایش یادداشت‌ها (`notesContainer`) نیز وجود دارد.
2. **CSS**:
- طراحی زیبا و کاربرپسند برای برنامه با استفاده از CSS.
- هر یادداشت در یک کادر با دکمه حذف مشخص شده است.
3. **JavaScript**:
- با استفاده از رویداد کلیک، یادداشت جدید به لیست یادداشت‌ها اضافه می‌شود.
- یادداشت‌ها به صورت داینامیک ایجاد می‌شوند و هر یادداشت شامل یک دکمه حذف است که با کلیک بر روی آن، یادداشت مربوطه حذف می‌شود.
- در صورتی که کاربر سعی کند یادداشت خالی اضافه کند، پیغام خطا نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **برنامه یادداشت‌برداری** یک مثال عالی از استفاده از JavaScript برای ایجاد یک اپلیکیشن تعاملی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش یادداشت‌ها یا ذخیره‌سازی یادداشت‌ها در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه یادداشت‌برداری** با استفاده از HTML، CSS و JavaScript می‌باشد
