Site icon FSIBLOG

How to Create a Drink Water Tracker Using HTML, CSS And JavaScript

Rick Bowen (JavaScript)
How to Create a Drink Water Tracker Using HTML, CSS And JavaScript

In today’s fast-paced world, staying hydrated is often overlooked. As a developer and designer using javaScript, I’ve experienced how easy it is to get lost in work and forget about one of the simplest yet most important aspects of health drinking water. That’s why I created a “Drink Water Tracker,” an intuitive solution to help you maintain your hydration goals effortlessly.

Why a Water Tracker?

Water is essential for nearly every function in your body, from regulating temperature to improving concentration. Yet, many of us struggle to drink enough water daily. A water tracker provides:

Features of the Drink Water Tracker

Building the Tracker:

Below is a simplified HTML, CSS, and JavaScript code snippet to demonstrate how the Drink Water Tracker works.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drink Water Tracker</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="tracker-container">
    <h1>Drink Water Tracker</h1>
    <p>Set your daily water intake goal:</p>
    <input type="number" id="water-goal" placeholder="Enter goal (ml)">
    <button id="set-goal">Set Goal</button>

    <div id="progress-bar">
      <div id="progress"></div>
    </div>

    <p>Add water (ml):</p>
    <input type="number" id="water-input" placeholder="Enter amount">
    <button id="add-water">Add</button>

    <p id="status">You have consumed 0 ml today.</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS for Styling

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

.tracker-container {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#progress-bar {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
}

#progress {
  height: 100%;
  width: 0;
  background: #76c7c0;
  transition: width 0.3s ease;
}

button {
  background: #76c7c0;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #5a9e96;
}

JavaScript for Functionality

let dailyGoal = 0;
let consumedWater = 0;

const goalInput = document.getElementById('water-goal');
const setGoalButton = document.getElementById('set-goal');
const waterInput = document.getElementById('water-input');
const addWaterButton = document.getElementById('add-water');
const progressBar = document.getElementById('progress');
const status = document.getElementById('status');

setGoalButton.addEventListener('click', () => {
  dailyGoal = parseInt(goalInput.value);
  if (isNaN(dailyGoal) || dailyGoal <= 0) {
    alert('Please enter a valid goal!');
    return;
  }
  updateStatus();
});

addWaterButton.addEventListener('click', () => {
  const addedWater = parseInt(waterInput.value);
  if (isNaN(addedWater) || addedWater <= 0) {
    alert('Please enter a valid amount!');
    return;
  }
  consumedWater += addedWater;
  updateProgress();
  updateStatus();
});

function updateProgress() {
  const percentage = Math.min((consumedWater / dailyGoal) * 100, 100);
  progressBar.style.width = percentage + '%';
}

function updateStatus() {
  if (dailyGoal > 0) {
    status.textContent = `You have consumed ${consumedWater} ml of ${dailyGoal} ml.`;
  } else {
    status.textContent = 'Set a daily goal to start tracking!';
  }
}

Visual Representation

Here’s how the tracker could look:

Note: Replace the placeholder with your actual visual output.

Final Thoughts

With this Drink Water Tracker, you can take control of your hydration and improve your overall well-being. Whether it’s for personal use or as part of a larger app, this project is a great way to combine wellness with technology.

Exit mobile version