This tutorial guides you through building a Water Intake Calculator in JavaScript. This calculator is a handy tool that helps users monitor and achieve their daily hydration goals by logging water consumption and visualizing progress. It’s a practical project for enhancing your JavaScript skills while creating a useful application.
Adding Header Assets
To begin, you’ll need to include the necessary CSS stylesheets in the <head> section of your HTML document. This will ensure that the calculator’s appearance is styled correctly using Google Fonts and Bootstrap.
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu&display=swap'> <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
Creating the HTML Structure
Next, you need to set up the basic HTML structure of your calculator. This includes the header section, which displays the title and daily goal, and the main section, which contains the visual representation of the water intake and the logging area.
<!-- header section -->
<header id="header">
<div class="container mb-5">
<div class="row height align-items-center">
<div class="col text-center mx-auto">
<h2 class="font-weight-bold">Track water intake</h2>
<h5>Today's goal is : 3 litres</h5>
</div>
</div>
</div>
</header>
<!-- end of header section -->
<!-- main section -->
<section id="main">
<div class="container">
<div class="row align-items-end">
<!-- big cup -->
<div class="col-md-4 text-center d-flex justify-content-center">
<div class="big-cup">
<div class="remained d-flex flex-column mt-5">
<p class="litres font-weight-bold">3.00 L</p>
<p class="remaining-text">Remaining</p>
<div class="percentage font-weight-bold rounded align-self-center mt-5">
0 %
</div>
</div>
</div>
</div>
<!-- end of big cup -->
<!-- logging area -->
<div class="col-md-8 text-center">
<h3 class="heading">Log quantity of water :</h3>
<div class="cups d-flex justify-content-around align-items-end">
<div class="small-cup cup-250">250 ml</div>
<div class="small-cup cup-500">500 ml</div>
<div class="small-cup cup-750">750 ml</div>
<div class="small-cup cup-1000">1000 ml</div>
</div>
</div>
<!-- end of logging area -->
</div>
</div>
<div class="container">
<div class="row mt-4 justify-content-center">
<button class="btn btn-lg reset-button">Reset all logs</button>
</div>
</div>
</section>
<!-- end of main section -->
<script src="./script.js"></script>
Applying CSS Styles
Now, let’s add the CSS styles to make the calculator visually appealing. These styles define the appearance of the cups, percentages, and overall layout of the calculator.
body {
background: #279dd4;
color: white;
font-family: "Ubuntu", sans-serif;
}
.height {
min-height: 20vh;
}
.big-cup {
background: white;
color: rgb(24, 76, 180);
border: 0.3rem solid rgb(24, 76, 180);
border-radius: 0 0 2.5rem 2.5rem;
width: 15em;
min-height: 20em;
}
.litres {
font-size: 1.3rem;
}
.percentage {
font-size: 2.2rem;
background: rgb(110, 174, 199);
min-width: 80%;
}
.cups {
min-height: 20em;
}
.small-cup {
background: white;
color: rgb(24, 76, 180);
border: 0.2rem solid rgb(24, 76, 180);
border-radius: 0 0 1rem 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.small-cup:hover {
background: rgb(110, 174, 199);
color: white;
}
.cup-250 {
height: 5em;
width: 4em;
}
.cup-500 {
height: 8em;
width: 5em;
}
.cup-750 {
height: 11em;
width: 6em;
}
.cup-1000 {
height: 14em;
width: 7em;
}
.reset-button {
background: white;
color: rgb(24, 76, 180);
border: 0.2rem solid rgb(24, 76, 180);
cursor: pointer;
}
.reset-button:hover {
background: rgb(110, 174, 199);
color: white;
}
@media screen and (max-width: 768px) {
.heading {
margin-top: 1em;
}
.reset-button {
margin-bottom: 1em;
}
}
Implementing JavaScript Functionality
This is where the magic happens! The JavaScript code handles the logic for tracking water intake, updating the visual representation, and resetting the logs. It uses event listeners to respond to user interactions with the small cups and the reset button.
const smallCups = document.querySelectorAll(".small-cup");
const litres = document.querySelector(".litres");
const percentage = document.querySelector(".percentage");
const remained = document.querySelector(".remained");
const todaysGoalText = document.querySelector("h5");
const resetButton = document.querySelector(".reset-button");
let totalWater = 3;
let percentValue = 0;
smallCups.forEach((cup, index) => {
cup.addEventListener("click", () => updateBigCup(index));
});
resetButton.addEventListener("click", () => resetLogs());
function updateBigCup(index) {
const logValue = parseInt(smallCups[index].innerHTML);
totalWater -= logValue / 1000;
litres.innerText = totalWater + " L";
percentValue += (logValue / 3000) * 100;
percentage.innerText = percentValue.toFixed(1) + " %";
if (percentValue >= 99) {
litres.innerText = "0 L";
percentage.innerText = "100 %";
todaysGoalText.innerText = "You have achieved your daily goal. Keep it up !";
}
}
function resetLogs() {
totalWater = 3;
percentValue = 0;
litres.innerText = "3.00 L";
percentage.innerText = "0 %";
todaysGoalText.innerText = `Today's goal is : 3 litres`;
}
Adding Footer Assets
You may require some footer assets so, add the appropriate code below.
That completes the Water Intake Calculator in Javascript tutorial. You should now have a working calculator that helps you track your daily water intake and stay hydrated.
