کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### برنامه ساده چک‌کننده کالری با استفاده از جاوا اسکریپت با کد منبع
این پروژه شامل یک برنامه چک‌کننده کالری است که با استفاده از جاوا اسکریپت، HTML و CSS پیاده‌سازی شده است. این برنامه به کاربران این امکان را می‌دهد که کالری موجود در غذاها را وارد کنند و مجموع کالری‌های مصرفی خود را محاسبه و نمایش دهند.
#### ویژگی‌ها و عملکرد سیستم:
1. **ورود کالری**: کاربران می‌توانند کالری غذاهای مختلف را وارد کنند.
2. **محاسبه مجموع کالری**: برنامه مجموع کالری‌های وارد شده را محاسبه می‌کند.
3. **نمایش لیست غذاها**: لیستی از غذاها و کالری‌های آنها را نمایش می‌دهد.
4. **حذف غذا**: امکان حذف غذاها از لیست.
#### ساختار پروژه
```
calorie-checker/
│
├── index.html # فایل اصلی HTML
├── style.css # فایل CSS برای استایل‌دهی
└── script.js # فایل جاوا اسکریپت برای عملکرد برنامه
```
#### مراحل پیاده‌سازی
##### 1. فایل `index.html`
```html
چک‌کننده کالری
چک‌کننده کالری
لیست غذاها و کالری‌ها
مجموع کالری: 0 کالری
```
##### 2. فایل `style.css`
```css
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
input {
margin: 10px 0;
padding: 10px;
font-size: 16px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.delete-button {
background-color: #dc3545;
color: white;
border: none;
cursor: pointer;
}
.delete-button:hover {
background-color: #c82333;
}
```
##### 3. فایل `script.js`
```javascript
// script.js
document.addEventListener('DOMContentLoaded', () => {
const calorieForm = document.getElementById('calorieForm');
const calorieList = document.getElementById('calorieList');
const totalCaloriesDisplay = document.getElementById('totalCalories');
let totalCalories = 0;
// اضافه کردن غذا
calorieForm.addEventListener('submit', function (e) {
e.preventDefault();
const food = document.getElementById('food').value;
const calories = parseInt(document.getElementById('calories').value);
addFoodToList(food, calories);
updateTotalCalories(calories);
calorieForm.reset();
});
// اضافه کردن غذا به لیست
function addFoodToList(food, calories) {
const li = document.createElement('li');
li.innerHTML = `
${food}: ${calories} کالری
`;
calorieList.appendChild(li);
}
// به‌روزرسانی مجموع کالری‌ها
function updateTotalCalories(calories) {
totalCalories += calories;
totalCaloriesDisplay.innerText = totalCalories;
}
// حذف غذا
window.removeFood = function (button, calories) {
const li = button.parentElement;
li.remove();
totalCalories -= calories;
totalCaloriesDisplay.innerText = totalCalories;
};
});
```
### نتیجه‌گیری
این برنامه ساده چک‌کننده کالری به شما این امکان را می‌دهد که کالری غذاها را وارد کرده و مجموع کالری‌های مصرفی را محاسبه کنید. با استفاده از این پروژه، شما میتوانید با مفاهیم اساسی جاوا اسکریپت، HTML و CSS آشنا شوید. میتوانید این پروژه را گسترش دهید و ویژگی‌های جدیدی مانند ذخیره‌سازی محلی، جستجو در لیست غذاها یا اضافه کردن ویژگی‌های پیشرفته‌تر به آن اضافه کنید.
| صفحه قابل مشاهده:
دانلود پروژه کاربردی برنامه ساده چک‌کننده کالری با استفاده از جاوا اسکریپت با کد منبع می‌باشد
