کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### نشان‌گذار (Bookmark Manager) با جاوا اسکریپت و کد منبع
در این پروژه، یک **مدیر نشان‌گذار** ساده را با استفاده از 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: 90%;
max-width: 600px;
}
.form-container {
margin-bottom: 20px;
}
input {
padding: 10px;
margin: 5px 0;
width: calc(100% - 22px);
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark {
background-color: #f9f9f9;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.bookmark a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.bookmark button {
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
```
### 3. **JavaScript**
در این بخش، منطق مدیر نشان‌گذار را با جاوا اسکریپت پیاده‌سازی می‌کنیم.
```javascript
// افزودن رویداد به دکمه برای افزودن نشان‌گذار
document.getElementById('addBookmarkBtn').addEventListener('click', addBookmark);
// افزودن نشان‌گذار
function addBookmark() {
const siteName = document.getElementById('siteName').value;
const siteUrl = document.getElementById('siteUrl').value;
// بررسی ورودی‌ها
if (!siteName || !siteUrl) {
alert('لطفاً نام و آدرس سایت را وارد کنید.');
return;
}
// ساخت یک شیء برای نشان‌گذار
const bookmark = {
name: siteName,
url: siteUrl
};
// گرفتن نشان‌گذارهای موجود از localStorage
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
// افزودن نشان‌گذار جدید
bookmarks.push(bookmark);
// ذخیره نشان‌گذارها در localStorage
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
// پاک کردن ورودی‌ها
document.getElementById('siteName').value = '';
document.getElementById('siteUrl').value = '';
// بروزرسانی لیست نشان‌گذارها
displayBookmarks();
}
// نمایش نشان‌گذارها
function displayBookmarks() {
const bookmarksList = document.getElementById('bookmarksList');
bookmarksList.innerHTML = '';
// گرفتن نشان‌گذارها از localStorage
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
// ایجاد HTML برای هر نشان‌گذار
bookmarks.forEach(bookmark => {
const div = document.createElement('div');
div.classList.add('bookmark');
div.innerHTML = `
`;
bookmarksList.appendChild(div);
});
}
// حذف نشان‌گذار
function deleteBookmark(url) {
// گرفتن نشان‌گذارها از localStorage
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
// فیلتر کردن نشان‌گذار برای حذف آن
bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);
// ذخیره نشان‌گذارهای باقی‌مانده
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
// بروزرسانی لیست نشان‌گذارها
displayBookmarks();
}
// نمایش نشان‌گذارها هنگام بارگذاری صفحه
document.addEventListener('DOMContentLoaded', displayBookmarks);
```
### توضیحات کد:
1. **HTML**:
- فرم برای دریافت نام و آدرس سایت کاربر و دکمه‌ای برای افزودن نشان‌گذار.
- بخشی برای نمایش نشان‌گذارهای ذخیره‌شده.
2. **CSS**:
- **طراحی ظاهری**: شامل فرم و دکمه‌ها با استایل مناسب برای ایجاد رابط کاربری جذاب.
3. **JavaScript**:
- **افزودن نشان‌گذار**: اطلاعات ورودی گرفته می‌شود و به `localStorage` اضافه می‌گردد.
- **نمایش نشان‌گذارها**: نشان‌گذارها از `localStorage` گرفته شده و در صفحه نمایش داده می‌شوند.
- **حذف نشان‌گذار**: با کلیک بر روی دکمه حذف، نشان‌گذار مورد نظر از `localStorage` پاک می‌شود و لیست بروزرسانی می‌گردد.
### نتیجه‌گیری
این پروژه **مدیر نشان‌گذار** به کاربران امکان می‌دهد تا لینک‌های دلخواه خود را به راحتی ذخیره و مدیریت کنند. با استفاده از `localStorage`، نشان‌گذارها حتی پس از بستن مرورگر نیز باقی می‌مانند. از این پروژه می‌توان به عنوان یک تمرین عالی برای کار با JavaScript، مدیریت DOM و کار با `localStorage` استفاده کرد. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی نشان‌گذار (Bookmark Manager) با جاوا اسکریپت و کد منبع می‌باشد
