Calorie calculator designed using HTML, CSS and JavaScript, where you can via inputs and select make the calculation that shows your basal metabolism and average calories and how much you need to eat to gain, lose or maintain weight.

  • By Renato Roca
  • Last update: Feb 28, 2022
  • Comments: 1

🍇 Calorius 🍇

Calculadora de calorias projetada usando HTML, CSS e JavaScript, onde é possível através de inputs e select fazer o cálculo que mostra seu metabolismo basal e a média de calorias e quanto é necessário comer para ganhar, perder ou manter o peso.

🥕 Sobre o projeto 🥕

Projeto feito e inspirado em um aplicativo que vi em um site fitness que mostra a importância da dieta para se obter um resultado desejado unido a exercícios físicos, onde foi possível aprender mais sobre a manipulação DOM e sobre como usar os valores do input e select.

🍽️ Resultado do projeto 🍽️

Web

Web

Preview

Web

✔️ Contribuir ✔️

Sugestões são bem vindas, para dar alguma dica ou crítica por favor abrir uma issue para discutir o que pode ser melhorado.

🏆 License 🏆

MIT

Github

https://github.com/renato-roca-dev/calorius

Comments(1)

  • 1

    English Translation

    Hello not an issue but i am english and couldnt find much online. i appriciate your time on this so i have made an english version using your code and am sharing it here for you

    HTML `

    Calorie Calculator

    Calorie Calculator

    kg

    cm

    Years Old

    `

    JAVASCRIPT FILE

    `const form = document.getElementById('form'); form.addEventListener('submit', handleSubmit);

    function handleSubmit(event) { event.preventDefault();

    const weight = getInputNumberValue("weight"); const height = getInputNumberValue("height"); const age = getInputNumberValue("age"); const gender = getSelectedValue("gender"); const activityLevel = getSelectedValue("activity__level");

    const basal = Math.round( gender === 'female' ? (655 + (9.6 * weight) + (1.8 * height) - (4.7 * age)) : (66 + (13.7 * weight) + (5 * height) - (6.8 * age)) );

    const maintenance = Math.round(basal * Number(activityLevel)); const gainWeight = maintenance + 450; const loseWeight = maintenance - 450;

    document.getElementById("outBasal"); outBasal.innerHTML = "Your basal metabolism is " + basal + " calories";;

    document.getElementById("outMaintenance"); outMaintenance.innerHTML = "To maintain weight you need to consume on average " + maintenance + " calories" ;

    document.getElementById("outLoseweight"); outLoseWeight.innerHTML = "To lose weight you need to consume on average " + loseWeight + " calories" ;

    document.getElementById("outGainWeight"); outGainWeight.innerHTML = "To gain weight you need to consume on average " + gainWeight + " calories" ; }

    function getSelectedValue(id) { const select = document.getElementById(id); return select.options[select.selectedIndex].value; }

    function getInputNumberValue(id) { return Number(document.getElementById(id).value); } `