کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه بوکمارک** (Bookmark App) با استفاده از 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
form {
margin-bottom: 20px;
}
input {
width: 80%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.bookmark-list {
margin-top: 20px;
text-align: left;
}
.bookmark {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.bookmark a {
text-decoration: none;
color: #007bff;
}
.bookmark button {
background-color: #dc3545;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل اضافه کردن و حذف بوکمارک‌ها است.
```javascript
// انتخاب عناصر HTML
const bookmarkForm = document.getElementById('bookmarkForm');
const siteNameInput = document.getElementById('siteName');
const siteUrlInput = document.getElementById('siteUrl');
const bookmarkList = document.getElementById('bookmarkList');
// تابع برای اضافه کردن بوکمارک
bookmarkForm.addEventListener('submit', function(event) {
event.preventDefault(); // جلوگیری از ارسال فرم
const siteName = siteNameInput.value.trim();
const siteUrl = siteUrlInput.value.trim();
// ایجاد عنصر بوکمارک
const bookmarkDiv = document.createElement('div');
bookmarkDiv.className = 'bookmark';
// ایجاد لینک سایت
const siteLink = document.createElement('a');
siteLink.href = siteUrl;
siteLink.target = '_blank'; // باز کردن لینک در تب جدید
siteLink.textContent = siteName;
// ایجاد دکمه حذف
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.addEventListener('click', function() {
bookmarkList.removeChild(bookmarkDiv);
});
// افزودن لینک و دکمه حذف به عنصر بوکمارک
bookmarkDiv.appendChild(siteLink);
bookmarkDiv.appendChild(deleteBtn);
// افزودن بوکمارک به لیست
bookmarkList.appendChild(bookmarkDiv);
// پاک کردن ورودی‌ها
siteNameInput.value = '';
siteUrlInput.value = '';
});
```
### توضیحات کد:
1. **HTML**: شامل فرم برای وارد کردن نام و آدرس سایت، دکمه‌ای برای اضافه کردن بوکمارک و بخشی برای نمایش لیست بوکمارک‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **انتخاب عناصر**: فرم، ورودی‌ها و لیست بوکمارک‌ها را انتخاب می‌کند.
- **اضافه کردن بوکمارک**: وقتی کاربر فرم را ارسال می‌کند، یک بوکمارک جدید به لیست اضافه می‌شود و ورودی‌ها پاک می‌شوند.
- **حذف بوکمارک**: هر بوکمارک دارای دکمه‌ای برای حذف آن است.
### نتیجه‌گیری
این پروژه **برنامه بوکمارک** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره بوکمارک‌ها در Local Storage، ویرایش بوکمارک‌ها یا دسته‌بندی بوکمارک‌ها را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه بوکمارک** (Bookmark App) با استفاده از HTML، CSS و JavaScript می‌باشد
