Create a Health Tracker using HTML CSS & JavaScript
Last Updated :
25 Jul, 2024
In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.
Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorage. This data is also shown on the website in tabular form.
Preview Image:

Approach:
- Create the App structure using Html tags, like <div>, <h1> for the heading, <input> tag for taking the input and <table> tag for the output, with corresponding classes and IDs.
- Add the different styling properties to the app using classes and elements that will define the padding, margin, font sizes to text, alignments, colors, etc to the specific elements.
- In JavaScript, first load the previous data from local storage in respective arrays and display that data inside a table in HTML.
- Add event listener to submit button.
- Whenever the submit button gets clicked, take the data from inputs and push that value to respective arrays of data.
- Then display that value in the table and also add the whole array back to local storage.
Example: This example describes the basic implementation of the health tracker app using HTML, CSS, and Javascript.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>
GeeksforGeeks | Create a Health
Tracker using HTML CSS & JavaScript
</title>
<!-- Font Awesome CSS CDN -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity=
"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="/style2.css">
</head>
<body>
<div class="app">
<h1>GeeksforGeeks</h1>
<h3>Health Tracker App</h3>
<div class="inputs">
<div>
<label for="water">
Water Intake (in ml)
</label>
<input id="water" type="number">
</div>
<div>
<label for="exercise">
Exercise Duration (in min)
</label>
<input id="exercise" type="number">
</div>
<div>
<label for="bloodsugerlevel">
Blood Sugar Level (in mg/dL)
</label>
<input id="bloodsugerlevel" type="number">
</div>
</div>
<button id="submit">Submit</button>
<div id="editSection" class="hidden">
<button id="cancelEdit" onclick="cancelEdit()">
Cancel
</button>
<button id="updateEntry" onclick="editRow()">
Update
</button>
</div>
<table>
<thead>
<tr>
<th>Date</th>
<th>Water Intake <br> (in ml)</th>
<th>Exercise Duration <br> (in min)</th>
<th>Blood Sugar Level <br> (in mg/dL)</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<!-- Font Awesome JS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"
integrity=
"sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="/script2.js"></script>
</body>
</html>
CSS
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #0f172a;
color: white;
}
h1 {
background-image: linear-gradient(to right, #0ea5e9, #10b981);
}
h3 {
background-image: linear-gradient(to right, #ec4899, #8b5cf6);
}
h1,
h3 {
color: transparent;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.app {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 650px;
margin: 1rem auto;
padding: 10px;
gap: 20px;
}
.inputs {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
height: fit-content;
}
.inputs>div {
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
}
label {
font-size: 0.9rem;
}
input,
label {
display: block;
}
input {
margin-top: 8px;
margin-bottom: 5px;
padding: 10px;
font-size: large;
background-color: #262626;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
input:focus-visible {
outline: 2px solid #ec4899;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
button{ display: block; cursor: pointer; border: none; }
#submit {
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-image: linear-gradient(to right, #ec4899, #8b5cf6);
font-size: 1.3rem;
border-radius: 5px;
color: white;
font-weight: bold;
transition: scale 0.3s ease-in-out;
}
#editSection{
width: 100%;
display: flex;
gap: 25px;
justify-content: space-between;
}
#editSection > button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 1.3rem;
border-radius: 5px;
color: white;
font-weight: bold;
transition: scale 0.3s ease-in-out;
}
#updateEntry { background-image:
linear-gradient(to right, #ec4899, #8b5cf6); }
#cancelEdit{ background-color: #ef4444; }
#submit:hover, #updateEntry:hover, #cancelEdit:hover { scale: 1.02; }
.hidden{ display: none !important; }
.edit, .delete{
margin: 0 auto;
padding: 5px 10px;
font-size: 1.1rem;
border-radius: 5px;
background-color: transparent;
color: white;
border: 1px solid white;
}
.edit:hover, .delete:hover{
background-color: #0a0a0a;
}
table {
width: 100%;
border-collapse: collapse;
position: relative;
overflow: hidden;
}
th,
td {
text-align: center;
padding: 10px;
border: 0;
}
tr:nth-child(even) {
background-color: #57534e;
}
tr:nth-child(odd) {
background-color: #262626;
}
th {
font-size: 0.9rem;
background-color: #0a0a0a;
}
tbody > tr:hover{
background-color: #737373;
color: black;
}
.delete-animation{
background-color: #ef4444 !important;
animation: deleteAnimate 0.4s linear forwards;
}
@keyframes deleteAnimate{
to{
transform: translateX(100%);
}
}
JavaScript
// script.js
const editIcon = `<i class="fas fa-edit"></i>`
const deleteIcon = `<i class="fas fa-trash"></i>`
function clearInputs() {
wInput.value = ""
eInput.value = ""
bInput.value = ""
}
function addToLocalStorage(){
localStorage.setItem("date", JSON.stringify(date))
localStorage.setItem("water", JSON.stringify(water))
localStorage.setItem("exercise", JSON.stringify(exercise))
localStorage.setItem("bloodsugar", JSON.stringify(bloodsugar))
}
function activateEdit(i){
wInput.value = water[i]
eInput.value = exercise[i]
bInput.value = bloodsugar[i]
editIndex = i
submitButton.classList.add("hidden")
editSection.classList.remove("hidden")
}
function cancelEdit() {
clearInputs()
editIndex = -1
submitButton.classList.remove("hidden")
editSection.classList.add("hidden")
}
function editRow(){
if(editIndex==-1) return
water[editIndex] = wInput.value
exercise[editIndex] = eInput.value
bloodsugar[editIndex] = bInput.value
fillTable()
addToLocalStorage()
cancelEdit()
}
function deleteRow(i){
if(!confirm(
`Confirm that you want to delete the entry:
\n ${date[i]}: ${water[i]}ml, ${exercise[i]}min,
${bloodsugar[i]}mg/dL`))
return
date.splice(i, 1)
water.splice(i, 1)
exercise.splice(i, 1)
bloodsugar.splice(i, 1)
document.querySelector(`#output > tr:nth-child(${i+1})`)
.classList.add("delete-animation")
addToLocalStorage()
setTimeout(fillTable, 500)
}
function fillTable(){
const tbody = document.getElementById("output")
const rows =
Math.max(water.length, exercise.length, bloodsugar.length)
let html = ""
for(let i=0; i<rows; i++){
let w = water[i] || "N/A"
let e = exercise[i] || "N/A"
let b = bloodsugar[i] || "N/A"
let d = date[i] || "N/A"
html+=`<tr>
<td>${d}</td>
<td>${w}</td>
<td>${e}</td>
<td>${b}</td>
<td>
<button onclick="activateEdit(${i})"
class="edit">${editIcon}
</button>
</td>
<td>
<button
onclick="deleteRow(${i})"
class="delete">${deleteIcon}
</button>
</td>
</tr>`
}
tbody.innerHTML = html;
}
let editIndex = -1;
let date =
JSON.parse(localStorage.getItem("date")) || []
let water =
JSON.parse(localStorage.getItem("water")) || []
let exercise =
JSON.parse(localStorage.getItem("exercise")) || []
let bloodsugar =
JSON.parse(localStorage.getItem("bloodsugar")) || []
const wInput = document.getElementById("water")
const eInput = document.getElementById("exercise")
const bInput = document.getElementById("bloodsugerlevel")
const submitButton = document.getElementById("submit")
const editSection = document.getElementById("editSection")
fillTable()
submitButton.addEventListener("click", ()=>{
const w = wInput.value || null;
const e = eInput.value || null;
const b = bInput.value || null;
if(w===null || e===null || b===null) {
alert("Please enter all the fields.")
return
}
const d = new Date().toLocaleDateString()
date = [d, ...date]
water = [w, ...water]
exercise = [e, ...exercise]
bloodsugar = [b, ...bloodsugar]
// date.push(d)
// water.push(w)
// exercise.push(e)
// bloodsugar.push(b)
clearInputs()
fillTable()
addToLocalStorage()
})
Output:
Similar Reads
How to Create Stopwatch using HTML CSS and JavaScript ? In this article, we will learn How to create a Stopwatch using HTML CSS, and JavaScript. The StopWatch will have the Start, Stop, and Reset functionality.Prerequisites:HTML CSS JavaScriptApproach:Create one container in which all the elements are present.Inside this container add 2 divs that contain
3 min read
Create an QR Code Generator Project using HTML CSS & JavaScript Today, more than 75% of websites and apps use QR codes to share links, contact info, or event details quickly. Here, youâll learn how to make your own QR Code Generator using HTML, CSS, and JavaScript. Weâll guide you step by step, so even if youâre a beginner, you can follow along easily. By the en
3 min read
Create a User Polls Project using HTML CSS & JavaScript Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data o
3 min read
How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi
2 min read
Create a Pomodoro Timer using HTML CSS and JavaScript In this article, we will see how to design Pomodoro Timer with the help of HTML CSS, and JavaScript. The Pomodoro Technique is a time management method that involves breaking your work into focused intervals, typically 25 minutes, followed by short breaks. After completing four cycles, take a longer
3 min read
How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a
3 min read
How to create a Color Generator using HTML CSS and JavaScript ? In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color
6 min read
How to Create Scroll Indicator using HTML CSS and JavaScript ? Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo
3 min read
How to create a dynamic report card using HTML, CSS and JavaScript ? We have to build a website where you can upload your student data like their name and marks in different subjects. And after uploading it will insert the student data in the table as well as, it will show the total marks, average, and pass/fail status. The implementation is done by using HTML and Ja
2 min read
Create a Trigonometry Toolbox using HTML CSS and JavaScript This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigono
3 min read