کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
width: calc(100% - 22px);
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: red;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
}
```
### 3. **JavaScript**
در نهایت منطق برنامه لیست کتاب را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر DOM
const bookInput = document.getElementById('bookInput');
const addBookBtn = document.getElementById('addBookBtn');
const bookList = document.getElementById('bookList');
// تابع برای افزودن کتاب به لیست
function addBook() {
const bookName = bookInput.value.trim();
if (bookName) {
const li = document.createElement('li'); // ایجاد عنصر لیست
li.textContent = bookName; // اضافه کردن نام کتاب
const deleteBtn = document.createElement('button'); // ایجاد دکمه حذف
deleteBtn.textContent = 'حذف';
deleteBtn.onclick = function() {
bookList.removeChild(li); // حذف کتاب از لیست
};
li.appendChild(deleteBtn); // اضافه کردن دکمه به عنصر لیست
bookList.appendChild(li); // اضافه کردن کتاب به لیست
bookInput.value = ''; // خالی کردن ورودی
} else {
alert('لطفا نام کتاب را وارد کنید.'); // پیام خطا در صورت خالی بودن ورودی
}
}
// افزودن رویداد کلیک به دکمه افزودن کتاب
addBookBtn.addEventListener('click', addBook);
// همچنین می‌توان با زدن کلید Enter کتاب را افزود
bookInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addBook();
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای نام کتاب، دکمه‌ای برای افزودن کتاب و یک لیست برای نمایش کتاب‌ها است.
2. **CSS**: طراحی برای برنامه لیست کتاب که شامل طراحی ورودی، دکمه‌ها و لیست کتاب‌ها می‌شود.
3. **JavaScript**:
- **تابع افزودن کتاب**: وظیفه بررسی ورودی و افزودن کتاب به لیست و همچنین ایجاد دکمه حذف برای هر کتاب را بر عهده دارد.
- **حذف کتاب**: با کلیک بر روی دکمه حذف، کتاب مربوطه از لیست حذف می‌شود.
- **رویدادهای کلیک و کلید**: امکان افزودن کتاب با کلیک بر روی دکمه و همچنین با زدن کلید Enter وجود دارد.
### نتیجه‌گیری
این پروژه **برنامه لیست کتاب** یک مثال ساده و عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره کتاب‌ها در مرورگر (localStorage) یا افزودن جزئیات بیشتر به کتاب‌ها (نویسنده، سال انتشار و ...) اضافه کنید. از کدنویسی لذت ببرید!
در اینجا یک پروژه ساده برای ایجاد یک **برنامه لیست کتاب** با استفاده از 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 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
width: calc(100% - 22px);
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: red;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
}
```
### 3. **JavaScript**
در نهایت منطق برنامه لیست کتاب را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر DOM
const bookInput = document.getElementById('bookInput');
const addBookBtn = document.getElementById('addBookBtn');
const bookList = document.getElementById('bookList');
// تابع برای افزودن کتاب به لیست
function addBook() {
const bookName = bookInput.value.trim();
if (bookName) {
const li = document.createElement('li'); // ایجاد عنصر لیست
li.textContent = bookName; // اضافه کردن نام کتاب
const deleteBtn = document.createElement('button'); // ایجاد دکمه حذف
deleteBtn.textContent = 'حذف';
deleteBtn.onclick = function() {
bookList.removeChild(li); // حذف کتاب از لیست
};
li.appendChild(deleteBtn); // اضافه کردن دکمه به عنصر لیست
bookList.appendChild(li); // اضافه کردن کتاب به لیست
bookInput.value = ''; // خالی کردن ورودی
} else {
alert('لطفا نام کتاب را وارد کنید.'); // پیام خطا در صورت خالی بودن ورودی
}
}
// افزودن رویداد کلیک به دکمه افزودن کتاب
addBookBtn.addEventListener('click', addBook);
// همچنین می‌توان با زدن کلید Enter کتاب را افزود
bookInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addBook();
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای نام کتاب، دکمه‌ای برای افزودن کتاب و یک لیست برای نمایش کتاب‌ها است.
2. **CSS**: طراحی برای برنامه لیست کتاب که شامل طراحی ورودی، دکمه‌ها و لیست کتاب‌ها می‌شود.
3. **JavaScript**:
- **تابع افزودن کتاب**: وظیفه بررسی ورودی و افزودن کتاب به لیست و همچنین ایجاد دکمه حذف برای هر کتاب را بر عهده دارد.
- **حذف کتاب**: با کلیک بر روی دکمه حذف، کتاب مربوطه از لیست حذف می‌شود.
- **رویدادهای کلیک و کلید**: امکان افزودن کتاب با کلیک بر روی دکمه و همچنین با زدن کلید Enter وجود دارد.
### نتیجه‌گیری
این پروژه **برنامه لیست کتاب** یک مثال ساده و عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره کتاب‌ها در مرورگر (localStorage) یا افزودن جزئیات بیشتر به کتاب‌ها (نویسنده، سال انتشار و ...) اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه لیست کتاب** با استفاده از HTML، CSS و JavaScript می‌باشد
