دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی

دانلود پروژه کاربردی "اپلیکیشن یادداشت ساده" با استفاده از JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

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

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


### پروژه "اپلیکیشن یادداشت ساده" با استفاده از JavaScript
 
این پروژه یک اپلیکیشن یادداشت‌برداری ساده است که به کاربران اجازه می‌دهد یادداشت‌های خود را اضافه، ویرایش و حذف کنند. این اپلیکیشن با استفاده از HTML، CSS و JavaScript ساخته شده است و می‌تواند به راحتی در مرورگر اجرا شود.
 
#### ویژگی‌های پروژه:
- **اضافه کردن یادداشت:** کاربران می‌توانند یادداشت‌های جدیدی اضافه کنند.
- **حذف یادداشت:** امکان حذف یادداشت‌ها.
- **ویرایش یادداشت:** امکان ویرایش یادداشت‌های موجود.
- **ذخیره‌سازی محلی:** یادداشت‌ها در Local Storage مرورگر ذخیره می‌شوند تا در بارگذاری مجدد صفحه از دست نروند.
 
### راه‌اندازی پروژه
 
#### 1. ساختار فایل‌ها
 
ساختار پروژه به صورت زیر است:
 
```
note-app/
├── index.html
├── styles.css
└── script.js
```
 
#### 2. کد منبع
 
##### فایل `index.html`
 
این فایل رابط کاربری اپلیکیشن یادداشت را ایجاد می‌کند:
 
```html
   
   
    اپلیکیشن یادداشت
   
   
       

اپلیکیشن یادداشت

       
       
       
   
   
```
 
##### فایل `styles.css`
 
برای زیباسازی رابط کاربری استفاده می‌شود:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 400px;
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
input[type="text"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
}
 
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
button:hover {
    background-color: #45a049;
}
 
.note {
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
}
 
.note button {
    background-color: #ff4757;
    position: absolute;
    top: 5px;
    right: 5px;
}
```
 
##### فایل `script.js`
 
این فایل منطق اپلیکیشن یادداشت را پیاده‌سازی می‌کند:
 
```javascript
const noteInput = document.getElementById('note-input');
const addNoteButton = document.getElementById('add-note');
const notesContainer = document.getElementById('notes-container');
 
// بارگذاری یادداشت‌ها از Local Storage
function loadNotes() {
    const notes = JSON.parse(localStorage.getItem('notes')) || [];
    notes.forEach(note => displayNote(note));
}
 
// اضافه کردن یادداشت
function addNote() {
    const noteText = noteInput.value.trim();
    if (noteText === '') {
        alert('لطفاً یک یادداشت وارد کنید.');
        return;
    }
 
    const note = { text: noteText };
    displayNote(note);
    saveNoteToLocal(note);
    noteInput.value = '';
}
 
// نمایش یادداشت در صفحه
function displayNote(note) {
    const noteDiv = document.createElement('div');
    noteDiv.classList.add('note');
    noteDiv.innerHTML = `
       

${note.text}

       
    `;
    notesContainer.appendChild(noteDiv);
}
 
// ذخیره یادداشت در Local Storage
function saveNoteToLocal(note) {
    const notes = JSON.parse(localStorage.getItem('notes')) || [];
    notes.push(note);
    localStorage.setItem('notes', JSON.stringify(notes));
}
 
// حذف یادداشت
function deleteNote(button) {
    const noteDiv = button.parentElement;
    notesContainer.removeChild(noteDiv);
    removeNoteFromLocal(noteDiv.querySelector('p').innerText);
}
 
// حذف یادداشت از Local Storage
function removeNoteFromLocal(noteText) {
    const notes = JSON.parse(localStorage.getItem('notes')) || [];
    const updatedNotes = notes.filter(note => note.text !== noteText);
    localStorage.setItem('notes', JSON.stringify(updatedNotes));
}
 
// رویداد کلیک دکمه اضافه کردن یادداشت
addNoteButton.addEventListener('click', addNote);
 
// بارگذاری یادداشت‌ها در هنگام بارگذاری صفحه
loadNotes();
```
 
### 3. اجرای پروژه
 
برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. می‌توانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
 
### نتیجه‌گیری
 
این پروژه "اپلیکیشن یادداشت ساده" به شما این امکان را می‌دهد که با اصول ساخت یک اپلیکیشن تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش یادداشت‌ها، طراحی بهتری برای رابط کاربری، یا اضافه کردن گزینه‌های دسته‌بندی یادداشت‌ها اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه وب است.
| صفحه قابل مشاهده: دانلود پروژه کاربردی "اپلیکیشن یادداشت ساده" با استفاده از JavaScript می‌باشد