کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **کتابخانه (Library App)** با استفاده از JavaScript
این پروژه یک اپلیکیشن کتابخانه ساده است که به کاربران اجازه می‌دهد کتاب‌ها را اضافه، مشاهده، و حذف کنند. ما از 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
form {
margin-bottom: 20px;
}
input {
padding: 10px;
margin: 5px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
width: 100%;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#book-list {
margin-top: 20px;
}
.book-item {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
```
### 3. **JavaScript**
سپس منطق اپلیکیشن کتابخانه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const bookForm = document.getElementById('book-form');
const bookList = document.getElementById('book-list');
// آرایه برای ذخیره کتاب‌ها
let books = [];
// افزودن کتاب
bookForm.addEventListener('submit', function(e) {
e.preventDefault(); // جلوگیری از بارگذاری مجدد صفحه
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
const pages = document.getElementById('pages').value;
const book = {
title: title,
author: author,
pages: pages
};
books.push(book);
displayBooks();
bookForm.reset(); // پاک کردن فرم
});
// نمایش کتاب‌ها
function displayBooks() {
bookList.innerHTML = ''; // پاک کردن لیست قبلی
books.forEach((book, index) => {
const bookItem = document.createElement('div');
bookItem.classList.add('book-item');
bookItem.innerHTML = `
${book.title}
نویسنده: ${book.author}
صفحات: ${book.pages}
`;
bookList.appendChild(bookItem);
});
}
// حذف کتاب
function removeBook(index) {
books.splice(index, 1);
displayBooks();
}
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان اپلیکیشن، فرم برای افزودن کتاب، و یک بخش برای نمایش کتاب‌ها است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **آرایه کتاب‌ها**: کتاب‌ها در یک آرایه ذخیره می‌شوند.
- **اضافه کردن کتاب**: با پر کردن فرم و کلیک روی دکمه "اضافه کردن کتاب"، کتاب به آرایه اضافه می‌شود و نمایش داده می‌شود.
- **نمایش کتاب‌ها**: تابعی برای نمایش کتاب‌ها در صفحه.
- **حذف کتاب**: با کلیک روی دکمه "حذف"، کتاب مربوطه از آرایه و لیست حذف می‌شود.
### نتیجه‌گیری
این پروژه **کتابخانه** یک مثال عالی برای استفاده از JavaScript در ایجاد برنامه‌های کاربردی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی داده‌ها در `localStorage` یا افزودن قابلیت جستجو در کتاب‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **کتابخانه (Library App)** با استفاده از JavaScript می‌باشد
