کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.fruit-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.fruit-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
button {
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.total {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل ایجاد لیست میوه‌ها و محاسبه قیمت کل است.
```javascript
// لیست میوه‌ها و قیمت‌های آنها
const fruits = [
{ name: "سیب", price: 1000 },
{ name: "موز", price: 800 },
{ name: "پرتقال", price: 1200 },
{ name: "کیوی", price: 1500 },
{ name: "انگور", price: 2000 },
];
// انتخاب بخش‌های HTML
const fruitListDiv = document.getElementById('fruitList');
const totalAmountSpan = document.getElementById('totalAmount');
// متغیر برای جمع کل
let totalAmount = 0;
// تابع برای ایجاد لیست میوه‌ها
function displayFruits() {
fruits.forEach(fruit => {
const fruitItem = document.createElement('div');
fruitItem.className = 'fruit-item';
fruitItem.innerHTML = `
${fruit.name} - ${fruit.price} تومان
`;
fruitListDiv.appendChild(fruitItem);
});
}
// تابع برای خرید میوه
function buyFruit(price) {
totalAmount += price;
totalAmountSpan.textContent = totalAmount;
}
// نمایش لیست میوه‌ها در ابتدا
displayFruits();
```
### توضیحات کد:
1. **HTML**: شامل عنوان فروشگاه، لیست میوه‌ها و نمایش جمع کل است.
2. **CSS**: طراحی ساده و کاربرپسند برای فروشگاه میوه.
3. **JavaScript**:
- **لیست میوه‌ها**: آرایه‌ای شامل نام و قیمت میوه‌ها.
- **تابع `displayFruits`**: برای ایجاد لیست میوه‌ها و نمایش آن در HTML.
- **تابع `buyFruit`**: برای افزودن قیمت میوه به جمع کل و به‌روزرسانی نمایش.
### نتیجه‌گیری
این پروژه **فروشگاه میوه** یک مثال عالی برای یادگیری نحوه کار با JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن امکان حذف میوه‌ها، ذخیره‌سازی اطلاعات خرید در Local Storage یا طراحی بهبود یافته برای رابط کاربری اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **فروشگاه میوه** با استفاده از HTML، CSS و JavaScript می‌باشد
