کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش  سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

   

 ساخت یک **Sticky Notes** با استفاده از HTML5 و JavaScript یک پروژه ساده و جذاب است که به شما کمک می‌کند با مفاهیم پایه‌ای وب‌سایت‌سازی، مدیریت داده‌ها و تعامل کاربر آشنا شوید. در این پروژه، کاربران می‌توانند یادداشت‌هایی با متن دلخواه ایجاد کرده، و آنها را ذخیره کنند.

 

### توضیحات پروژه

برنامه **Sticky Notes** به کاربران این امکان را می‌دهد که یادداشت‌های خود را ایجاد کنند، ویرایش کنند و حذف کنند. یادداشت‌ها در صفحه باقی می‌مانند و می‌توانند بعد از بارگذاری مجدد صفحه دوباره مشاهده شوند.

 

### ویژگی‌های اصلی پروژه

1. **ایجاد یادداشت جدید**: کاربران می‌توانند یادداشت‌های جدید ایجاد کنند.

2. **ویرایش یادداشت‌ها**: کاربران می‌توانند متن یادداشت‌ها را ویرایش کنند.

3. **حذف یادداشت‌ها**: کاربران می‌توانند یادداشت‌ها را از لیست حذف کنند.

4. **ذخیره‌سازی محلی**: یادداشت‌ها در Local Storage مرورگر ذخیره می‌شوند تا پس از بارگذاری مجدد صفحه باقی بمانند.

 

### کد منبع نمونه

 

#### ۱. ایجاد فایل HTML

ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:

 

```html

   

   

   

   

   

   

```

 

#### ۲. ایجاد فایل CSS

سپس یک فایل CSS به نام `styles.css` ایجاد کنید و کد زیر را در آن قرار دهید:

 

```css

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

}

 

.container {

    width: 400px;

    background-color: white;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

 

h1 {

    text-align: center;

    margin-bottom: 20px;

}

 

textarea {

    width: 100%;

    height: 100px;

    border: 1px solid #ccc;

    border-radius: 4px;

    padding: 10px;

    margin-bottom: 10px;

    resize: none;

}

 

button {

    width: 100%;

    padding: 10px;

    background-color: #007bff;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

 

button:hover {

    background-color: #0056b3;

}

 

.note {

    background-color: #ffeb3b;

    padding: 10px;

    margin: 10px 0;

    border-radius: 4px;

    position: relative;

}

 

.delete {

    position: absolute;

    top: 5px;

    right: 5px;

    color: red;

    cursor: pointer;

}

```

 

#### ۳. ایجاد فایل JavaScript

سپس یک فایل JavaScript به نام `app.js` ایجاد کنید و کد زیر را در آن قرار دهید:

 

```javascript

// انتخاب عناصر از DOM

const noteInput = document.getElementById("noteInput");

const addNoteButton = document.getElementById("addNoteButton");

const notesContainer = document.getElementById("notesContainer");

 

// بارگذاری یادداشت‌ها از Local Storage

let notes = JSON.parse(localStorage.getItem("notes")) || [];

 

// نمایش یادداشت‌ها

function displayNotes() {

    notesContainer.innerHTML = "";

    notes.forEach((note, index) => {

        const noteDiv = document.createElement("div");

        noteDiv.className = "note";

        noteDiv.innerHTML = `

            ${note}

            حذف

        `;

        notesContainer.appendChild(noteDiv);

    });

}

 

// اضافه کردن یادداشت

addNoteButton.addEventListener("click", () => {

    const noteText = noteInput.value.trim();

    if (noteText) {

        notes.push(noteText);

        localStorage.setItem("notes", JSON.stringify(notes));

        noteInput.value = "";

        displayNotes();

    } else {

        alert("لطفاً یادداشت خود را وارد کنید.");

    }

});

 

// حذف یادداشت

function deleteNote(index) {

    notes.splice(index, 1);

    localStorage.setItem("notes", JSON.stringify(notes));

    displayNotes();

}

 

// نمایش یادداشت‌ها هنگام بارگذاری صفحه

displayNotes();

```

 

### توضیحات کد

1. **انتخاب عناصر DOM**: با استفاده از `getElementById`، عناصر مورد نیاز را انتخاب می‌کنیم.

2. **ذخیره‌سازی محلی**: یادداشت‌ها در Local Storage مرورگر ذخیره می‌شوند و در هنگام بارگذاری صفحه دوباره بارگذاری می‌شوند.

3. **عملکرد افزودن یادداشت**: با کلیک بر روی دکمه، اگر فیلد خالی نباشد، یادداشت جدید به لیست اضافه می‌شود و در Local Storage ذخیره می‌شود.

4. **عملکرد حذف یادداشت**: با کلیک بر روی گزینه "حذف" در کنار هر یادداشت، آن یادداشت از لیست و از Local Storage حذف می‌شود.

 

### نحوه اجرای پروژه

1. یک پوشه جدید ایجاد کنید و فایل‌های `index.html`، `styles.css` و `app.js` را در آن قرار دهید.

2. فایل `index.html` را در مرورگر باز کنید تا یادداشت‌های چسبان را مشاهده کنید و با ایجاد یادداشت‌های جدید کار کنید.

 

### نتیجه‌گیری

این پروژه **Sticky Notes** یک ابزار ساده و کاربردی است که به شما کمک می‌کند تا با مفاهیم پایه‌ای JavaScript، HTML و CSS آشنا شوید. شما می‌توانید این پروژه را با افزودن ویژگی‌هایی مانند قابلیت تغییر رنگ یادداشت‌ها، تنظیم تاریخ ایجاد یادداشت و یا استفاده از یک API برای ذخیره‌سازی اطلاعات گسترش دهید. این پروژه به شما کمک می‌کند مهارت‌های خود را در برنامه‌نویسی و توسعه وب بهبود بخشید.