مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **یادداشت جادویی** (Magic Notes) با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **یادداشت جادویی** (Magic Notes) با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



در اینجا یک پروژه ساده برای ایجاد یک **یادداشت جادویی** (Magic Notes) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا یادداشت‌های خود را ایجاد و ذخیره کنند و همچنین یادداشت‌ها را با رنگ‌های مختلف مشخص کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای یادداشت‌های جادویی ایجاد می‌کنیم.
 
```html
   
   
    یادداشت‌های جادویی
   
   
       

یادداشت‌های جادویی

       
       
       
           
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری یادداشت‌های جادویی از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 600px;
}
 
h1 {
    margin-bottom: 20px;
    text-align: center;
}
 
textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    resize: none;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
}
 
.notes-container {
    margin-top: 20px;
}
 
.note {
    background-color: #ffeb3b;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    position: relative;
}
 
.note button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #dc3545;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش به کاربر اجازه می‌دهد تا یادداشت‌های خود را اضافه کرده و حذف کند.
 
```javascript
// انتخاب عناصر
const noteInput = document.getElementById('noteInput');
const addNoteBtn = document.getElementById('addNoteBtn');
const notesContainer = document.getElementById('notesContainer');
 
// افزودن رویداد کلیک به دکمه
addNoteBtn.addEventListener('click', function() {
    const noteText = noteInput.value.trim();
 
    if (noteText) {
        // ایجاد یک عنصر جدید برای یادداشت
        const noteDiv = document.createElement('div');
        noteDiv.classList.add('note');
        noteDiv.innerHTML = `
           

${noteText}

           
        `;
 
        // افزودن یادداشت به بخش یادداشت‌ها
        notesContainer.appendChild(noteDiv);
        noteInput.value = ''; // پاک کردن متن textarea
 
        // افزودن رویداد کلیک به دکمه حذف
        const deleteNoteBtn = noteDiv.querySelector('.deleteNoteBtn');
        deleteNoteBtn.addEventListener('click', function() {
            notesContainer.removeChild(noteDiv);
        });
    } else {
        alert('لطفا یادداشت خود را وارد کنید!');
    }
});
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک textarea برای ورود متن یادداشت و یک دکمه برای اضافه کردن یادداشت است. همچنین یک بخش برای نمایش یادداشت‌ها وجود دارد.
2. **CSS**: طراحی ساده و کاربرپسند برای یادداشت‌های جادویی.
3. **JavaScript**:
   - **ورودی**: با هر کلیک روی دکمه "اضافه کردن یادداشت"، یادداشت جدید به بخش یادداشت‌ها اضافه می‌شود.
   - **حذف یادداشت**: هر یادداشت دارای دکمه‌ای برای حذف آن است.
 
### نتیجه‌گیری
این پروژه **یادداشت‌های جادویی** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی محلی، رنگ‌های مختلف برای یادداشت‌ها و قابلیت ویرایش یادداشت‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی **یادداشت جادویی** (Magic Notes) با استفاده از HTML، CSS و JavaScript می‌باشد