برنامه یادداشت در جاوا اسکریپت
در دنیای امروز، اپلیکیشن‌های یادداشت‌برداری جایگاه ویژه‌ای دارند. این برنامه‌ها به کاربران اجازه می‌دهند تا یادداشت‌های خود را به سادگی ذخیره، ویرایش، و مدیریت کنند. در اینجا، ما به بررسی چگونگی ایجاد یک برنامه یادداشت ساده با استفاده از جاوا اسکریپت می‌پردازیم.
معرفی پروژه
ابتدا، شما باید یک پروژه جدید ایجاد کنید. برای این کار، یک فایل HTML بسازید و سپس با استفاده از CSS و جاوا اسکریپت، طراحی و عملکرد آن را پیاده‌سازی کنید.
ساختار HTML
یک ساختار ساده HTML شامل المان‌های زیر است:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h1>برنامه یادداشت</h1>
<textarea id="noteInput" placeholder="یادداشت خود را اینجا بنویسید..."></textarea>
<button id="addNote">افزودن یادداشت</button>
<ul id="notesList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، ما یک عنوان، یک منطقه متنی برای ورودی یادداشت، یک دکمه برای افزودن یادداشت و یک لیست برای نمایش یادداشت‌ها داریم.
CSS برای زیباسازی
برای زیبا کردن ظاهر برنامه، از CSS استفاده کنید. به عنوان مثال:
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
#app {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,
- 1);
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
این کد CSS به طراحی زیبا و کاربرپسند کمک می‌کند.
عملکرد جاوا اسکریپت
حال بیایید به بخش اصلی برنامه بپردازیم: جاوا اسکریپت. با استفاده از کد زیر، می‌توانید یادداشت‌ها را اضافه کنید و آنها را نمایش دهید:
```javascript
document.getElementById('addNote').addEventListener('click', function() {
const noteInput = document.getElementById('noteInput');
const noteText = noteInput.value;
if (noteText) {
const notesList = document.getElementById('notesList');
const li = document.createElement('li');
li.textContent = noteText;
notesList.appendChild(li);
noteInput.value = '';
} else {
alert('لطفا یک یادداشت وارد کنید!');
}
});
```
این کد به دکمه "افزودن یادداشت" یک رویداد کلیک اضافه می‌کند. وقتی کاربر دکمه را می‌زند، متن یادداشت را می‌گیرد و آن را به لیست یادداشت‌ها اضافه می‌کند.
نتیجه‌گیری
برنامه یادداشت ساده‌ای که در اینجا توضیح داده شد، می‌تواند به عنوان یک پایه بسیار خوب برای پروژه‌های بزرگ‌تر و پیچیده‌تر مورد استفاده قرار گیرد. شما می‌توانید ویژگی‌های جدیدی مانند ویرایش و حذف یادداشت‌ها، ذخیره‌سازی محلی و حتی همگام‌سازی با سرور را به این برنامه اضافه کنید. با خلاقیت و تلاش، می‌توانید این برنامه را به یک ابزار کاربردی تبدیل کنید.
