دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی ساخت یک برنامه یادداشت‌های چسبنده (Sticky Notes) به زبان JavaScript

دانلود پروژه کاربردی ساخت یک برنامه یادداشت‌های چسبنده (Sticky Notes) به زبان JavaScript

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

خرید فایل


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

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

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

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


ساخت یک برنامه یادداشت‌های چسبنده (Sticky Notes) به زبان JavaScript یک پروژه جالب و مفید است که به شما امکان می‌دهد تا با مفاهیم برنامه‌نویسی وب و کار با DOM آشنا شوید. در این پروژه، کاربران می‌توانند یادداشت‌هایی را ایجاد، ویرایش و حذف کنند. 
 
### توضیحات پروژه:
برنامه یادداشت‌های چسبنده به کاربران این امکان را می‌دهد که یادداشت‌های متنی ایجاد کنند که می‌توانند در هر جایی در صفحه نمایش داده شوند. همچنین کاربران می‌توانند یادداشت‌ها را جابه‌جا کنند و آنها را حذف کنند.
 
### ویژگی‌های اصلی پروژه:
1. **ایجاد یادداشت جدید**: کاربران می‌توانند یادداشت‌های جدید ایجاد کنند.
2. **ویرایش یادداشت**: کاربران می‌توانند متن یادداشت‌ها را ویرایش کنند.
3. **حذف یادداشت**: کاربران می‌توانند یادداشت‌های غیرضروری را حذف کنند.
4. **جابجایی یادداشت‌ها**: یادداشت‌ها قابل جابجایی هستند تا کاربران بتوانند آن‌ها را در صفحه قرار دهند.
5. **طراحی کاربرپسند**: رابط کاربری ساده و کاربرپسند.
 
### کد منبع نمونه:
 
#### ۱. ساختار فایل‌ها
ابتدا یک پروژه ساده HTML و JavaScript ایجاد کنید. ساختار فایل‌ها به این صورت است:
 
```
sticky-notes/
  ├── index.html
  ├── style.css
  └── script.js
```
 
#### ۲. کد `index.html`
این کد HTML برای ساختار صفحه و وارد کردن استایل‌ها و اسکریپت‌ها است:
 
```html
   
   
    برنامه یادداشت‌های چسبنده
   
   
       
       
   
   
```
 
#### ۳. کد `style.css`
این کد CSS برای طراحی یادداشت‌ها و صفحه است:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}
 
#app {
    position: relative;
}
 
#newNoteBtn {
    margin-bottom: 20px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
}
 
.note {
    width: 200px;
    height: 200px;
    background-color: #ffeb3b;
    border: 1px solid #fbc02d;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    cursor: move;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
 
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.note-header h3 {
    margin: 0;
    font-size: 18px;
}
 
.note-header button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
```
 
#### ۴. کد `script.js`
این کد JavaScript برای مدیریت منطق برنامه و رفتار یادداشت‌ها است:
 
```javascript
const notesContainer = document.getElementById('notesContainer');
const newNoteBtn = document.getElementById('newNoteBtn');
 
newNoteBtn.addEventListener('click', createNewNote);
 
// Function to create a new note
function createNewNote() {
    const note = document.createElement('div');
    note.classList.add('note');
    note.setAttribute('draggable', true);
 
    // Set random position
    note.style.top = `${Math.random() * (window.innerHeight - 200)}px`;
    note.style.left = `${Math.random() * (window.innerWidth - 200)}px`;
 
    note.innerHTML = `
       
           

یادداشت

           
       
       
    `;
 
    // Event listener to delete note
    note.querySelector('.deleteBtn').addEventListener('click', () => {
        notesContainer.removeChild(note);
    });
 
    // Drag and drop functionality
    note.addEventListener('dragstart', dragStart);
    note.addEventListener('dragend', dragEnd);
    note.addEventListener('dragover', dragOver);
    note.addEventListener('drop', drop);
 
    notesContainer.appendChild(note);
}
 
// Drag and drop functions
function dragStart(event) {
    event.dataTransfer.setData('text/plain', null);
    this.classList.add('dragging');
}
 
function dragEnd() {
    this.classList.remove('dragging');
}
 
function dragOver(event) {
    event.preventDefault();
}
 
function drop(event) {
    event.preventDefault();
    const draggedNote = document.querySelector('.dragging');
    const notes = Array.from(notesContainer.children);
    const closestNote = notes.reduce((closest, note) => {
        const box = note.getBoundingClientRect();
        const offset = event.clientY - box.top - box.height / 2;
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: note };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
 
    if (closestNote) {
        notesContainer.insertBefore(draggedNote, closestNote);
    } else {
        notesContainer.appendChild(draggedNote);
    }
}
```
 
### توضیحات کد:
1. **ایجاد یادداشت جدید**: کاربر با کلیک روی دکمه "یادداشت جدید" می‌تواند یک یادداشت جدید ایجاد کند که در یک موقعیت تصادفی روی صفحه نمایش داده می‌شود.
2. **حذف یادداشت**: هر یادداشت دارای دکمه‌ای برای حذف آن است.
3. **جابجایی یادداشت‌ها**: کاربران می‌توانند یادداشت‌ها را با استفاده از قابلیت کشیدن و رها کردن (drag and drop) جابه‌جا کنند.
4. **استفاده از متن**: یادداشت‌ها شامل یک ناحیه متنی هستند که کاربران می‌توانند متن یادداشت‌های خود را در آن وارد کنند.
 
### نتیجه‌گیری
این پروژه یک برنامه یادداشت‌های چسبنده ساده است که به شما کمک می‌کند تا با مفاهیم اولیه HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را با اضافه کردن ویژگی‌های جدید مانند ذخیره‌سازی یادداشت‌ها در Local Storage یا ایجاد دسته‌بندی‌های مختلف برای یادداشت‌ها گسترش دهید.
| صفحه قابل مشاهده: دانلود پروژه کاربردی ساخت یک برنامه یادداشت‌های چسبنده (Sticky Notes) به زبان JavaScript می‌باشد