کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **کتابخانه (Bookshelf) با 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: 80%;
max-width: 400px;
text-align: center;
}
h1, h2 {
margin-bottom: 20px;
}
input {
width: calc(100% - 20px);
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;
}
.book-list {
margin-top: 20px;
text-align: left;
}
.book-list ul {
list-style-type: none;
padding: 0;
}
.book-list li {
background-color: #007bff;
color: white;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر DOM
const bookForm = document.getElementById('bookForm');
const bookTitleInput = document.getElementById('bookTitle');
const bookAuthorInput = document.getElementById('bookAuthor');
const bookList = document.getElementById('list');
// آرایه برای ذخیره کتاب‌ها
let books = [];
// تابع برای اضافه کردن کتاب
function addBook(e) {
e.preventDefault(); // جلوگیری از ارسال فرم
const title = bookTitleInput.value;
const author = bookAuthorInput.value;
// ایجاد یک شی کتاب و افزودن به آرایه
const book = {
title: title,
author: author
};
books.push(book);
displayBooks();
// پاک کردن ورودی‌ها
bookTitleInput.value = '';
bookAuthorInput.value = '';
}
// تابع برای نمایش کتاب‌ها
function displayBooks() {
// خالی کردن لیست قبل از نمایش کتاب‌های جدید
bookList.innerHTML = '';
books.forEach((book, index) => {
const li = document.createElement('li');
li.textContent = `${book.title} - ${book.author}`;
bookList.appendChild(li);
});
}
// افزودن رویداد ارسال به فرم
bookForm.addEventListener('submit', addBook);
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، فرم برای وارد کردن اطلاعات کتاب و بخشی برای نمایش لیست کتاب‌ها است.
2. **CSS**: طراحی ساده و جذاب برای رابط کاربری.
3. **JavaScript**:
- **کتاب‌ها**: یک آرایه برای ذخیره اطلاعات کتاب‌ها ایجاد می‌شود.
- **افزودن کتاب**: زمانی که کاربر فرم را ارسال می‌کند، یک کتاب جدید به آرایه اضافه می‌شود و لیست کتاب‌ها به روز می‌شود.
- **نمایش کتاب‌ها**: کتاب‌های موجود در آرایه به صورت لیست در صفحه نمایش داده می‌شوند.
### نتیجه‌گیری
این پروژه **کتابخانه** یک مثال خوب برای آشنایی با مفاهیم JavaScript مانند دستکاری DOM و مدیریت فرم‌ها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ویرایش و حذف کتاب‌ها، ذخیره‌سازی اطلاعات در Local Storage و فیلتر کردن کتاب‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **کتابخانه (Bookshelf) با JavaScript** می‌باشد
