water-reminder

💧 Water & Notes Reminder

A lightweight productivity and wellness reminder system designed to help you track daily water intake, manage personal notes, and receive scheduled alerts.

The project is available as both:

🌐 1. Google Chrome Extension

🚀 Installation

Follow these steps to install the extension locally in Google Chrome.

Step 1: Open Chrome Extensions

Open Google Chrome and navigate to:

chrome://extensions

Step 2: Enable Developer Mode

Enable the Developer mode toggle from the top-right corner.

Step 3: Load the Extension

  1. Click Load unpacked.
  2. Navigate to the project directory.
  3. Select the following folder:

Desktop/project/water-reminder/chrome-extension

  1. The Water & Notes Reminder extension will now appear in your installed extensions.

📖 Using the Chrome Extension

🥤 1. Track Daily Water Intake

You can quickly record your water consumption directly from the extension.

Quick Logging

Use the predefined buttons:

Custom Amount

You can also enter a custom quantity and click Log.

The dashboard automatically updates your:

🎯 2. Configure Daily Water Target

Set your desired daily water consumption goal.

For example:

2000 ml

or

3000 ml

Enter your target in the Daily Target field and click Save.

⏰ 3. Configure Water Reminder Schedule

Choose how frequently you want to receive water reminders.

Available intervals include:

Active Hours

You can also define the period during which reminders should be active.

Example:

Reminders will automatically remain inactive outside the configured schedule.

📝 4. Create Custom Notes & Reminders

Use the Notes section to create reminders for important tasks or activities.

Example Notes

Reminder Modes

You can configure reminders in two ways:

⏰ Exact Time

Set a specific time when the reminder should trigger.

Example:

06:30 PM

⏱️ Relative Time

Set a reminder based on a number of minutes.

Example:

15 minutes

After configuring the reminder, click Set Alert.

🔔 5. Alert Window & Rain Sound

When a scheduled reminder is triggered:

  1. A dedicated alert window will appear in the Chrome browser.
  2. Your exact reminder text will be displayed prominently.
  3. A soothing rain/raindrop sound will play continuously.
  4. The sound will continue until you dismiss the reminder.

To stop the alert, click:

🔕 Stop Sound & Dismiss

🛍️ 6. Publishing to Chrome Web Store

To publish the extension on the Chrome Web Store:

  1. Create a production ZIP package of the extension.
  2. Open the Chrome Web Store Developer Dashboard.
  3. Upload the packaged extension.

Example package:

chrome-extension/water-notes-reminder.zip

Before publishing, make sure the extension includes the required manifest, icons, permissions, and store listing information.

💻 2. Visual Studio Code Extension

🚀 Installation

The VS Code extension can be installed using a .vsix package.

Step 1: Open Visual Studio Code

Launch Visual Studio Code.

Step 2: Open Extensions

Use:

Step 3: Install the VSIX Package

  1. Open the Extensions panel.
  2. Click the … menu.
  3. Select Install from VSIX…
  4. Select:

water-reminder-0.0.1.vsix

  1. Restart VS Code if required.

📊 Using the VS Code Extension

💧 1. Water Intake Status

The extension displays your current water consumption directly in the VS Code status bar.

Example:

💧 0/2000 ml (Left: 2000 ml)

The status bar is automatically updated whenever you log additional water.

🥤 2. Quick Water Logging

Click the water indicator in the VS Code status bar to quickly record your water intake.

For example:

250 ml

The dashboard and status bar will update automatically.

⌨️ 3. Command Palette

Open the Command Palette using:

Search for:

Water & Notes

Available commands include:

✨ Key Features

Feature Chrome Extension VS Code Extension
Daily Water Tracking ✅ ✅
Custom Water Amount ✅ ✅
Daily Water Target ✅ ✅
Water Reminders ✅ ✅
Custom Notes ✅ ✅
Scheduled Alerts ✅ ✅
Exact-Time Reminders ✅ ✅
Relative-Time Reminders ✅ ✅
Progress Tracking ✅ ✅
Rain Sound Alert ✅ —
Status Bar Indicator — ✅
Command Palette — ✅

📁 Project Structure

A typical project structure can look like:

water-reminder/
│
├── chrome-extension/
│   ├── manifest.json
│   ├── popup/
│   ├── background/
│   ├── assets/
│   └── ...
│
├── vscode-extension/
│   ├── src/
│   ├── package.json
│   ├── README.md
│   └── ...
│
└── README.md

🎯 Project Goal

Water & Notes Reminder is designed to provide simple, non-intrusive reminders while working on a computer.

It combines:

The goal is to help users maintain healthy hydration habits while also keeping track of important tasks and activities during their workday.