How to use JavaScript for a system that tracks and analyzes personal fitness data?
13/03/2024
•
5
min
To track and analyze personal fitness data using JavaScript, we need to incorporate various elements like HTML for structure, CSS for styling, and JavaScript for functionality and interactions. We'll create a simple page that collects personal fitness data like steps taken, calories burned, and hours slept and display the analysis.
<!DOCTYPE html>
<html>
<head>
<title>Personal Fitness Tracker</title>
<style>
body {font-family: Arial, sans-serif;}
h1 {text-align: center;}
.form {width: 50%; margin: 0 auto;}
label {display: block; padding: 10px 0;}
</style>
</head>
<body>
<h1>Personal Fitness Tracker</h1>
<form id="fitnessForm" class="form">
<label>
Steps Taken
<input type="number" id="steps" required>
</label>
<label>
Calories Burned
<input type="number" id="calories" required>
</label>
<label>
Hours Slept
<input type="number" id="sleep" required>
</label>
<button type="submit">Submit</button>
</form>
<h2 id='analysis'></h2>
<script src="fitness.js"></script>
</body>
</html>
The JavaScript file "fitness.js":
document.getElementById('fitnessForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent form from submitting and page from refreshing
// Get the values from the input fields
var steps = document.getElementById('steps').value;
var calories = document.getElementById('calories').value;
var sleep = document.getElementById('sleep').value;
// Calculate and display analysis
calculateAnalysis(steps, calories, sleep);
});
function calculateAnalysis(steps, calories, sleep) {
var analysisResult = "";
if(steps < 5000) {
analysisResult += "You should walk more. ";
} else if(steps > 10000) {
analysisResult += "Good job on walking. ";
} else {
analysisResult += "You are on an average step count. ";
}
if(calories > 2500) {
analysisResult += "You may want to burn more calories. ";
} else {
analysisResult += "Good on keeping a check on your calories. ";
}
if(sleep < 7) {
analysisResult += "You should sleep more. ";
} else if(sleep > 9) {
analysisResult += "You are over-sleeping. ";
} else {
analysisResult += "You have a great sleep schedule. ";
}
document.getElementById('analysis').innerText = analysisResult; // Display the results
}
Here's how it works:
- We are adding an event listener to the form, which listens to the 'submit' event. When the form is submitted, it prevents the default action (refreshing the page) and fetches the inputs from the form.
- The values then pass through the
calculateAnalysisfunction. - Depending on the inputs received, the function will set a message in
analysisResult. This is your analysis of the data based on chosen criteria: steps taken, calories burned, hours slept. - Once analysisResult is set, we use
innerTextto display the results.
and replace all numbered list with "Step 1", "Step 2" etc.
If this text doesnt contain numbered list jus don't change anything and answer me with the same text.
AI agent for developers
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.