کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **کتابخانه کتاب** (Book Library) با استفاده از 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;
}
input {
width: 90%;
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;
margin-bottom: 20px;
}
#bookList {
margin-top: 20px;
}
.book-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
.remove-btn {
background-color: #dc3545;
border: none;
color: white;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق سیستم کتابخانه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const bookTitleInput = document.getElementById('bookTitle');
const bookAuthorInput = document.getElementById('bookAuthor');
const addBookBtn = document.getElementById('addBookBtn');
const bookListDiv = document.getElementById('bookList');
// آرایه برای نگهداری کتاب‌ها
let books = [];
// تابع برای نمایش کتاب‌ها
function displayBooks() {
bookListDiv.innerHTML = '';
books.forEach((book, index) => {
const bookItem = document.createElement('div');
bookItem.classList.add('book-item');
bookItem.innerHTML = `
${book.title} - ${book.author}
`;
bookListDiv.appendChild(bookItem);
});
}
// تابع برای اضافه کردن کتاب
function addBook() {
const title = bookTitleInput.value.trim();
const author = bookAuthorInput.value.trim();
if (title === '' || author === '') {
alert('لطفاً عنوان و نویسنده کتاب را وارد کنید.');
return;
}
const newBook = {
title,
author
};
books.push(newBook);
displayBooks();
// پاک کردن ورودی‌ها
bookTitleInput.value = '';
bookAuthorInput.value = '';
}
// تابع برای حذف کتاب
function removeBook(index) {
books.splice(index, 1);
displayBooks();
}
// افزودن رویداد کلیک به دکمه اضافه کردن کتاب
addBookBtn.addEventListener('click', addBook);
```
### توضیحات کد:
1. **HTML**: شامل عنوان سیستم کتابخانه، ورودی‌ها برای عنوان و نویسنده کتاب، دکمه‌ای برای اضافه کردن کتاب و محلی برای نمایش لیست کتاب‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **متغیرها**: متغیرهایی برای نگهداری عناصر HTML و آرایه‌ای برای ذخیره کتاب‌ها.
- **تابع نمایش کتاب‌ها**: کتاب‌ها را در لیست نمایش می‌دهد.
- **تابع اضافه کردن کتاب**: کتاب جدیدی را به آرایه اضافه می‌کند و ورودی‌ها را پاک می‌کند.
- **تابع حذف کتاب**: کتاب مشخصی را از آرایه حذف می‌کند.
- **مدیریت رویداد**: به دکمه اضافه کردن کتاب یک رویداد کلیک اضافه می‌کند.
### نتیجه‌گیری
این پروژه **کتابخانه کتاب** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند جستجوی کتاب، ویرایش کتاب، یا ذخیره‌سازی داده‌ها در لوکال استوریج را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **کتابخانه کتاب** (Book Library) با استفاده از HTML، CSS و JavaScript می‌باشد
