Simple Calorie Counter using HTML, CSS and JavaScript (Source Code) - Coding Torque

byPiyush Patil -
0

Simple Calorie Counter using HTML, CSS and JavaScript

Greetings, fellow coders! Welcome to Coding Torque, where we explore the exciting world of coding through hands-on projects and tutorials. In today's blog post, we will be building a simple calorie counter using HTML, CSS, and JavaScript. This calculator will help us determine how many calories we need to consume on a daily basis in order to either gain, maintain, or lose weight, based on our age, height, and current weight. Whether you're looking to make healthier lifestyle choices or simply want to learn more about web development, this tutorial has something for everyone. So let's get started!

Join us on Telegram Join Now

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript


I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Demo




HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Simple Calorie Calculator using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further Code Herre -->    
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>

</html>


Paste the below code in your <body> tag 

<div id="bmr-calculator" class="wrapper">
    <div class="calculator">
        <div class="choose-gender">
            <div class="segmented-control"><input id="calc-gender-male" type="radio" name="gender" value="male"
                    checked=""><label for="calc-gender-male">Male</label></div>
            <div class="segmented-control">
                <input id="calc-gender-female" type="radio" name="gender" value="female"><label
                    for="calc-gender-female">Female</label>
            </div>
        </div>
        <label for="calc-age" id="calc-age_value">Age: 25</label>
        <input id="calc-age" type="range" value="25" min="13" max="100">
        <label for="calc-height" id="calc-height_value">Height: 180cm</label>
        <input id="calc-height" type="range" value="180" min="80" max="250">
        <label for="calc-weight" id="calc-weight_value">Weight: 80kg</label>
        <input id="calc-weight" type="range" value="80" min="40" max="200">
        <label for="calc-walking" id="calc-walking_value">Walking: 2 hours per week</label>
        <input id="calc-walking" type="range" value="2" min="0" max="50">
        <label for="calc-cardio" id="calc-cardio_value">Cardio: 1 hour per week</label>
        <input id="calc-cardio" type="range" value="1" min="0" max="50">
    </div>
    <div class="results">
        <div id="calc-target-gain">
            To Gain Weight:<br>
            <span>2700 calories</span>
        </div>
        <div id="calc-target-maintain">
            To Maintain:<br>
            <span>2400 calories</span>
        </div>
        <div id="calc-target-lose">
            To Lose Weight:<br>
            <span>1900 calories</span>
        </div>
    </div>
</div>


Output Till Now


CSS Code

Create a file style.css and paste the code below.  

:root {
  --primary-color: #435fda;
  --secondary-color: #d8415c;
  --body-font-size: 16px;
  --line-height: 1.5;
  --content-width: 480px;
  --background-color: #fff;
  --background-color-secondary: #f8f8f9;
  --text-color: #060914;
  --text-color--muted: #71737f;
  --line-color: #ededef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #657bdb;
    --primary-color--translucent: rgba(85, 106, 195, 0.3);
    --secondary-color: #d93d59;
    --background-color: #060913;
    --background-color-secondary: #0f1424;
    --text-color: #e4e4e7;
    --text-color--muted: #838690;
    --line-color: #303341;
  }
}

html {
  font-size: 100%;
  background-color: var(--background-color);
  color: var(--text-color);
}

body {
  font-family: "Geomanist", sans-serif;
  font-size: var(--body-font-size);
  line-height: var(--line-height);
  padding: 0.5em 0.5em 2em 0.5em;
  margin: 0;
}

.wrapper {
  max-width: var(--content-width);
  margin: calc(var(--line-height) * 0.5em) auto 0 auto;
}

.results {
  margin-top: 0.5em;
  text-align: center;
}

.results > div {
  margin-bottom: 0.5em;
}

@media (min-width: 440px) {
  :root {
    --body-font-size: 18px;
    --line-height: 1.5;
  }

  .results {
    margin: 2em 1em 0 2em;
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
  }
  .results > div {
    margin-bottom: 0;
  }
}

.choose-gender {
  display: flex;
  align-items: stretch;
  margin-bottom: 2em;
}

.segmented-control {
  flex: 1;
  text-align: center;
  line-height: 2em;
  border: 1px solid var(--line-color);
}

.segmented-control:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.segmented-control:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

.results {
  color: var(--text-color--muted);
}

.results span {
  font-weight: 500;
  color: var(--text-color);
}

/* The crazy stuff that needs to be here for the custom input styling */
input[type="range"] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
  transition: all 0.265ms ease-out;
}

input[type="range"]:not(:last-of-type) {
  margin-top: 0;
  margin-bottom: 2.5em;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: var(--line-color);
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 8px 1px var(--secondary-color),
    0 0 16px 4px var(--background-color);
  border: 3px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--secondary-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--secondary-color);
}

input[type="radio"] {
  -webkit-appearance: none;
  display: none;
}

.segmented-control input[type="radio"] + label {
  border: 1px solid rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  color: var(--text-color--muted);
}

.segmented-control input[type="radio"]:checked + label {
  background-color: var(--line-color);
  width: 100%;
  height: 100%;
  display: block;
  color: var(--text-color);
}

.segmented-control input[type="radio"]:focus + label {
  border: 1px solid var(--secondary-color);
}

.segmented-control:first-child input[type="radio"]:checked + label {
  border-radius: 0.5em 0 0 0.5em;
}

.segmented-control:last-child input[type="radio"]:checked + label {
  border-radius: 0 0.5em 0.5em 0;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: var(--line-color);
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 8px 1px var(--secondary-color),
    0 0 16px 4px var(--background-color);
  border: 3px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--secondary-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

Output Till Now

Simple Calorie Counter using HTML, CSS and JavaScript

JavaScript Code

Create a file script.js and paste the code below. 


$(".calculator input").on("input change", function (event) {
    var parameterName = $(this).attr("id").split("calc-")[1];
    var centimeters = $(this).val()

    switch (parameterName) {
        case "height":
            $("#calc-height_value").html("Height: " + centimeters + " cm");
            break;
        case "weight":
            var kg = $(this).val();
            $("#calc-weight_value").html("Weight: " + kg + " kg");
            break;
        case "age":
            $("#calc-age_value").html("Age: " + $(this).val());
            break;
        case "cardio":
            $("#calc-cardio_value").html("Cardio: " + $(this).val() + " hours per week");
            break;
        case "walking":
            $("#calc-walking_value").html("Walking: " + $(this).val() + " hours per week");
            break;
    }

    var height = parseInt($("#calc-height").val(), 10);
    var age = parseInt($("#calc-age").val(), 10);
    var weight = parseInt($("#calc-weight").val(), 10);
    var walking = parseInt($("#calc-walking").val(), 10);
    var cardio = parseInt($("#calc-cardio").val(), 10);
    var gender = $(".calculator input[name='gender']:checked").val();

    // The Harris–Benedict equations revised by Mifflin and St Jeor in 1990: 'A new predictive equation for resting energy expenditure in healthy individuals'
    var bmr = parseInt(10 * weight + 6.25 * height - 5 * age, 10) + (gender === "male" ? 5 : -161);
    bmr = bmr * 1.2;
    bmr += walking * 60 * (.03 * weight * 1 / 0.45) / 7;
    bmr += cardio * 60 * (.07 * weight * 1 / 0.45) / 7;
    bmr = Math.floor(bmr);

    var targetGainWeight = Math.round((bmr + 300) / 100) * 100;
    var targetMaintain = Math.round((bmr) / 100) * 100;
    var targetLoseWeight = Math.round((bmr - 500) / 100) * 100;

    $("#calc-target-gain span").html(targetGainWeight + " calories");
    $("#calc-target-maintain span").html(targetMaintain + " calories");
    $("#calc-target-lose span").html(targetLoseWeight + " calories");
});
Join us on Telegram Join Now

Written by: Piyush Patil

Code Credits: @Geffrey

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖
 
 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post