کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **Notepad** (یادداشت‌برداری) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربر این امکان را می‌دهد که متن را وارد کرده، ذخیره کند و بار دیگر باز کند.
### 1. **HTML**
ابتدا ساختار HTML را برای Notepad ایجاد می‌کنیم.
```html
Notepad
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهری برنامه استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
textarea {
width: 100%;
height: 200px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
font-size: 16px;
resize: none;
}
.buttons {
margin-top: 10px;
}
button {
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق Notepad با JavaScript می‌رویم. در این کد، کاربر می‌تواند متن را ذخیره، بارگذاری و پاک کند.
```javascript
const noteArea = document.getElementById('noteArea');
const saveBtn = document.getElementById('saveBtn');
const loadBtn = document.getElementById('loadBtn');
const clearBtn = document.getElementById('clearBtn');
// ذخیره یادداشت
saveBtn.addEventListener('click', () => {
const notes = noteArea.value;
localStorage.setItem('notes', notes);
alert('یادداشت ذخیره شد!');
});
// بارگذاری یادداشت
loadBtn.addEventListener('click', () => {
const savedNotes = localStorage.getItem('notes');
if (savedNotes) {
noteArea.value = savedNotes;
} else {
alert('هیچ یادداشتی پیدا نشد.');
}
});
// پاک کردن یادداشت
clearBtn.addEventListener('click', () => {
noteArea.value = '';
localStorage.removeItem('notes');
alert('یادداشت پاک شد!');
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک textarea برای وارد کردن متن و سه دکمه برای ذخیره، بارگذاری و پاک کردن یادداشت‌ها است.
2. **CSS**: طراحی ساده و زیبا با استفاده از استایل‌ها برای textarea و دکمه‌ها.
3. **JavaScript**:
- **دکمه ذخیره**: با کلیک بر روی دکمه "ذخیره"، متن در textarea به Local Storage ذخیره می‌شود.
- **دکمه بارگذاری**: با کلیک بر روی دکمه "بارگذاری"، متن ذخیره‌شده از Local Storage به textarea بارگذاری می‌شود.
- **دکمه پاک کردن**: با کلیک بر روی دکمه "پاک کردن"، متن موجود در textarea پاک می‌شود و همچنین یادداشت ذخیره‌شده از Local Storage حذف می‌شود.
### نتیجه‌گیری
این Notepad ساده می‌تواند به عنوان یک پروژه سرگرم‌کننده و آموزنده برای یادگیری HTML، CSS و JavaScript مورد استفاده قرار گیرد. شما میتوانید ویژگی‌های بیشتری مانند قابلیت تغییر رنگ، انتخاب فونت و تاریخ یادداشت را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ساده برای ایجاد یک **Notepad** (یادداشت‌برداری) با استفاده از HTML، CSS و JavaScript می‌باشد
