کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **سیستم یادداشت‌برداری (Keep 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 {
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: 20px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.note {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
position: relative;
}
.deleteBtn {
position: absolute;
top: 5px;
right: 5px;
background-color: red;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق سیستم را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
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');
noteDiv.textContent = noteText;
// ایجاد دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('deleteBtn');
// افزودن رویداد کلیک به دکمه حذف
deleteBtn.addEventListener('click', function() {
notesContainer.removeChild(noteDiv);
});
// افزودن دکمه حذف به یادداشت
noteDiv.appendChild(deleteBtn);
// افزودن یادداشت به کانتینر یادداشت‌ها
notesContainer.appendChild(noteDiv);
// پاک کردن ورودی
noteInput.value = '';
}
});
```
### توضیحات کد:
1. **HTML**:
- شامل یک کادر متنی برای وارد کردن یادداشت جدید، یک دکمه برای افزودن یادداشت و یک کانتینر برای نمایش یادداشت‌ها است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری. شامل استایل برای یادداشت‌ها و دکمه‌ها است.
3. **JavaScript**:
- **رویداد کلیک**: با کلیک بر روی دکمه "افزودن یادداشت"، یک یادداشت جدید ایجاد می‌شود و در زیر یادداشت‌های قبلی نمایش داده می‌شود.
- همچنین یک دکمه حذف برای هر یادداشت ایجاد می‌شود که به کاربر اجازه می‌دهد یادداشت‌های خود را حذف کند.
### نتیجه‌گیری
این پروژه **سیستم یادداشت‌برداری** یک مثال ساده و کاربردی از استفاده از JavaScript برای ایجاد یک برنامه کاربردی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی یادداشت‌ها در مرورگر (استفاده از localStorage) یا دسته‌بندی یادداشت‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سیستم یادداشت‌برداری (Keep Notes)** با استفاده از JavaScript می‌باشد
