کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **فروشگاه کتاب** با استفاده از 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: 600px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.book-list {
display: flex;
flex-direction: column;
}
.book {
background-color: #e9ecef;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
position: relative;
}
.book-title {
font-size: 20px;
font-weight: bold;
}
.book-author {
font-size: 16px;
color: #555;
}
.book-price {
font-size: 16px;
color: #28a745;
}
.details-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل تعریف کتاب‌ها و نمایش آنها در صفحه است.
```javascript
// تعریف لیست کتاب‌ها
const books = [
{
title: "کتاب اول",
author: "نویسنده اول",
price: "15000 تومان",
description: "این کتاب درباره موضوعات مختلف است و شامل داستان‌ها و تجربیات جالب می‌باشد."
},
{
title: "کتاب دوم",
author: "نویسنده دوم",
price: "20000 تومان",
description: "کتابی الهام‌بخش و آموزنده که به مسائل روز می‌پردازد."
},
{
title: "کتاب سوم",
author: "نویسنده سوم",
price: "25000 تومان",
description: "این کتاب شامل نکات مهم در زمینه موفقیت و توسعه فردی است."
}
];
// انتخاب المان لیست کتاب‌ها
const bookList = document.getElementById('bookList');
// تابع برای نمایش کتاب‌ها
function displayBooks() {
books.forEach((book, index) => {
const bookDiv = document.createElement('div');
bookDiv.classList.add('book');
bookDiv.innerHTML = `
`;
bookList.appendChild(bookDiv);
});
}
// تابع برای نمایش جزئیات کتاب
function showDetails(index) {
const book = books[index];
alert(`عنوان: ${book.title}\nنویسنده: ${book.author}\nقیمت: ${book.price}\nتوضیحات: ${book.description}`);
}
// نمایش کتاب‌ها در صفحه
displayBooks();
```
### توضیحات کد:
1. **HTML**: شامل عنوان فروشگاه، و بخشی برای نمایش لیست کتاب‌ها است.
2. **CSS**: طراحی زیبا و کاربرپسند برای نمایش کتاب‌ها.
3. **JavaScript**:
- **تعریف کتاب‌ها**: شامل عنوان، نویسنده، قیمت و توضیحات هر کتاب.
- **تابع برای نمایش کتاب‌ها**: که کتاب‌ها را به صورت داینامیک در صفحه قرار می‌دهد.
- **تابع برای نمایش جزئیات کتاب**: که هنگام کلیک روی دکمه "جزئیات"، اطلاعات بیشتری درباره کتاب نمایش می‌دهد.
### نتیجه‌گیری
این پروژه **فروشگاه کتاب** یک مثال عالی برای استفاده از HTML، CSS و JavaScript به صورت همزمان است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن کتاب‌ها، ویرایش آنها و ذخیره اطلاعات در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **فروشگاه کتاب** با استفاده از HTML، CSS و JavaScript می‌باشد
