کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک سیستم فهرست‌بندی کتاب با استفاده از JavaScript و HTML ارائه شده است. این سیستم به کاربران اجازه می‌دهد تا کتاب‌ها را اضافه کنند، فهرست آن‌ها را مشاهده کنند و آن‌ها را حذف کنند.
### 1. **HTML**
ابتدا کد HTML را برای ایجاد فرم ورودی و نمایش فهرست کتاب‌ها ایجاد می‌کنیم.
```html
سیستم فهرست‌بندی کتاب
سیستم فهرست‌بندی کتاب
فهرست کتاب‌ها:
```
### 2. **CSS**
سپس برای زیباسازی صفحه، از کد CSS زیر استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
input {
margin: 10px 0;
padding: 10px;
width: calc(100% - 20px);
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
padding: 10px;
background-color: #e7e7e7;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.delete-button {
background-color: #f44336;
border: none;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
```
### 3. **JavaScript**
و در نهایت، کد JavaScript برای افزودن کتاب‌ها، نمایش فهرست و حذف کتاب‌ها.
```javascript
document.getElementById('bookForm').addEventListener('submit', function(event) {
event.preventDefault(); // جلوگیری از ارسال فرم
// دریافت مقادیر ورودی
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('bookAuthor').value;
// ایجاد عنصر جدید برای نمایش در فهرست
const li = document.createElement('li');
li.textContent = `${title} - ${author}`;
// ایجاد دکمه حذف
const deleteButton = document.createElement('button');
deleteButton.textContent = 'حذف';
deleteButton.className = 'delete-button';
deleteButton.onclick = function() {
li.remove(); // حذف کتاب از فهرست
};
// افزودن دکمه حذف به عنصر لیست
li.appendChild(deleteButton);
document.getElementById('bookList').appendChild(li); // افزودن عنصر به فهرست
// پاک کردن ورودی‌ها
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
});
```
### نتیجه‌گیری
این پروژه به شما اجازه می‌دهد تا کتاب‌ها را به راحتی اضافه و حذف کنید. شما میتوانید این سیستم را گسترش دهید و ویژگی‌های جدیدی به آن اضافه کنید، مانند ذخیره‌سازی کتاب‌ها در مرورگر یا اضافه کردن قابلیت جستجو. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ایجاد یک سیستم فهرست‌بندی کتاب با استفاده از JavaScript و HTML می‌باشد
