مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **برنامه ردیاب کالری** (Calories Tracker) با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **برنامه ردیاب کالری** (Calories Tracker) با استفاده از HTML، CSS و JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد


  در اینجا یک پروژه ساده برای ایجاد یک **برنامه ردیاب کالری** (Calories Tracker) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا کالری‌هایی که مصرف کرده‌اند را وارد کرده و مجموع کالری‌های مصرفی را مشاهده کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای ردیاب کالری ایجاد می‌کنیم.
 
```html
   
   
    ردیاب کالری
   
   
       

ردیاب کالری

       
       
       
        
       

غذاهای مصرف شده

       
            
           

    مجموع کالری: 0 کالری

       
       
    ```
     
    ### 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: 90%;
        max-width: 400px;
        text-align: center;
    }
     
    h1 {
        margin-bottom: 20px;
    }
     
    input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
     
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        margin-bottom: 20px;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        background-color: #f4f4f4;
        margin: 5px 0;
        padding: 10px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     
    h3 {
        margin-top: 20px;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
     
    ```javascript
    const foodItemInput = document.getElementById('food-item');
    const caloriesInput = document.getElementById('calories');
    const addBtn = document.getElementById('add-btn');
    const foodList = document.getElementById('food-list');
    const totalCaloriesDisplay = document.getElementById('total-calories');
     
    let totalCalories = 0;
     
    // تابع اضافه کردن کالری
    function addCalories() {
        const foodItem = foodItemInput.value.trim();
        const calories = parseInt(caloriesInput.value);
     
        if (foodItem === '' || isNaN(calories) || calories <= 0) {
            alert('لطفا نام غذا و کالری معتبر را وارد کنید.');
            return;
        }
     
        // افزودن غذا به لیست
        const listItem = document.createElement('li');
        listItem.textContent = `${foodItem}: ${calories} کالری`;
        
        // افزودن دکمه حذف
        const removeBtn = document.createElement('button');
        removeBtn.textContent = 'حذف';
        removeBtn.onclick = () => {
            totalCalories -= calories; // کم کردن کالری
            totalCaloriesDisplay.textContent = totalCalories; // به روزرسانی مجموع کالری
            foodList.removeChild(listItem); // حذف از لیست
        };
        
        listItem.appendChild(removeBtn);
        foodList.appendChild(listItem);
        
        // به روزرسانی مجموع کالری
        totalCalories += calories;
        totalCaloriesDisplay.textContent = totalCalories;
     
        // پاک کردن ورودی‌ها
        foodItemInput.value = '';
        caloriesInput.value = '';
    }
     
    // افزودن رویداد کلیک به دکمه
    addBtn.addEventListener('click', addCalories);
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل عنوان برنامه، ورودی برای نام غذا، ورودی برای کالری، دکمه اضافه کردن و لیستی از غذاهای مصرف شده است.
    2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
    3. **JavaScript**:
       - **متغیرها**: متغیرهایی برای ذخیره نام غذا، کالری، لیست غذاها و مجموع کالری تعریف شده است.
       - **تابع اضافه کردن کالری**: این تابع مسئولیت بررسی ورودی‌ها، افزودن غذا به لیست و به روزرسانی مجموع کالری را بر عهده دارد.
       - **دکمه حذف**: به هر غذای اضافه شده یک دکمه حذف تعلق می‌گیرد تا کاربر بتواند آن را از لیست حذف کند.
     
    ### نتیجه‌گیری
    این پروژه **ردیاب کالری** یک مثال عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی داده‌ها در مرورگر یا ارائه نمودارهای تحلیلی اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **برنامه ردیاب کالری** (Calories Tracker) با استفاده از HTML، CSS و JavaScript می‌باشد