Building A Weight Loss Tracker Using JavaScript, HTML, And CSS

This “Weight Loss Tracker” is a simple yet effective web-based tool to help users monitor and track their weight loss journey. With a clean and modern design, this app allows users to input their daily weight and track their progress over time. It provides an interactive chart that visualizes weight changes, helping users stay motivated. The app includes features like submitting weight data, calculating total weight loss, and displaying it in real-time. It’s a great tool for anyone looking to stay on top of their fitness goals and monitor their progress efficiently.

You Should Know:

To build a Weight Loss Tracker, you can use the following code snippets and commands:

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weight Loss Tracker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
<h1>Weight Loss Tracker</h1>
<form id="weightForm">
<label for="weight">Enter Today's Weight (kg):</label>
<input type="number" id="weight" step="0.1" required>
<button type="submit">Submit</button>
</form>
<div id="chart"></div>
<div id="totalLoss"></div>
</div>

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

2. CSS Styling

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

#chart {
margin-top: 20px;
height: 200px;
width: 100%;
}

3. JavaScript Functionality

[javascript]
const weightForm = document.getElementById(‘weightForm’);
const weightInput = document.getElementById(‘weight’);
const chart = document.getElementById(‘chart’);
const totalLoss = document.getElementById(‘totalLoss’);
let weights = [];

weightForm.addEventListener(‘submit’, function (e) {
e.preventDefault();
const weight = parseFloat(weightInput.value);
weights.push(weight);
updateChart();
updateTotalLoss();
weightInput.value = ”;
});

function updateChart() {
chart.innerHTML = ‘

Weight Progress

‘;
weights.forEach((w, i) => {
const bar = document.createElement(‘div’);
bar.style.height = ${w}px;
bar.style.width = ’20px’;
bar.style.backgroundColor = ‘blue’;
bar.style.margin = ‘2px’;
bar.style.display = ‘inline-block’;
chart.appendChild(bar);
});
}

function updateTotalLoss() {
if (weights.length > 1) {
const loss = weights[0] – weights[weights.length – 1];
totalLoss.innerHTML = <h3>Total Weight Loss: ${loss.toFixed(1)} kg</h3>;
}
}
[/javascript]

4. Linux Commands for Web Development

Start a local server to test your app:
```
python3 -m http.server 8000
```
Check your system’s network ports:
```
netstat -tuln
```
Monitor system resources while running your app:
```
htop
```

5. Windows Commands for Web Development

Check your IP configuration:
```
ipconfig
```
Test network connectivity:
```
ping google.com
```
Open the Task Manager to monitor app performance:
```
taskmgr
```

What Undercode Say:

Building a Weight Loss Tracker is a great way to practice front-end development skills using JavaScript, HTML, and CSS. This project not only helps you understand DOM manipulation and event handling but also introduces you to data visualization basics. For further enhancements, consider integrating a backend to store user data or using libraries like Chart.js for more advanced graphs. Keep practicing and exploring new tools to level up your development skills!

Useful Resources:

References:

Reported By: Priyanka Kumari – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅

Join Our Cyber World:

💬 Whatsapp | 💬 Telegram

Listen to this Post