The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a water intake reminder

Written by

Bernardo Palos

in

Here’s a simple Water Intake Reminder App built using HTML, CSS, and JavaScript. It allows users to set a daily goal and receive periodic notifications.

Features:

  • Set daily water intake goal

  • Choose reminder interval (e.g., every 30 minutes)

  • Desktop notifications

Full Code:

Let’s build this in a single HTML file.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Water Intake Reminder</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #e0f7fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }

    h1 {
      color: #00796b;
    }

    .container {
      background: #ffffff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;
    }

    label {
      display: block;
      margin-top: 1rem;
    }

    input, select {
      width: 100%;
      padding: 0.5rem;
      margin-top: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background: #00796b;
      color: white;
      padding: 0.75rem;
      border: none;
      border-radius: 5px;
      margin-top: 1.5rem;
      cursor: pointer;
      width: 100%;
    }

    button:hover {
      background: #004d40;
    }

    #status {
      margin-top: 1rem;
      color: #388e3c;
    }
  </style>
</head>
<body>
  <h1>Water Intake Reminder</h1>
  <div class="container">
    <label for="goal">Daily Water Goal (ml):</label>
    <input type="number" id="goal" placeholder="e.g., 2000" />

    <label for="interval">Reminder Interval (minutes):</label>
    <select id="interval">
      <option value="30">30 minutes</option>
      <option value="60">1 hour</option>
      <option value="90">1.5 hours</option>
    </select>

    <button onclick="startReminder()">Start Reminders</button>
    <div id="status"></div>
  </div>

  <script>
    let reminderInterval;

    function startReminder() {
      const goal = document.getElementById('goal').value;
      const interval = document.getElementById('interval').value;

      if (!goal || goal <= 0) {
        alert("Please enter a valid water goal.");
        return;
      }

      Notification.requestPermission().then(permission => {
        if (permission !== "granted") {
          alert("Please allow notifications to receive reminders.");
          return;
        }

        clearInterval(reminderInterval);
        const msInterval = interval * 60 * 1000;

        reminderInterval = setInterval(() => {
          new Notification("💧 Time to drink water!", {
            body: `Stay hydrated and reach your daily goal of ${goal}ml!`,
            icon: "https://cdn-icons-png.flaticon.com/512/727/727790.png"
          });
        }, msInterval);

        document.getElementById('status').innerText =
          `Reminders set every ${interval} minutes. Goal: ${goal}ml`;
      });
    }
  </script>
</body>
</html>

Usage:

  1. Open the HTML file in a browser.

  2. Set your water intake goal and interval.

  3. Allow browser notifications when prompted.

  4. You’ll get periodic reminders to drink water.

Let me know if you’d like a mobile version or local storage to track progress!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About