Water Intake Reminder -

CV-Plus Water Reminder – Google Calendar Integration Guide

🚀 Setup Instructions

1 Create Google Cloud Project

Visit Google Cloud Console and create a new project for CV-Plus.

2 Enable Calendar API

In the Cloud Console, enable the Google Calendar API for your project.

3 Create OAuth 2.0 Credentials

Create an OAuth 2.0 Client ID with type “Web application” and add your domain to authorized origins.

4 Update Configuration

Replace YOUR_GOOGLE_CLIENT_ID and YOUR_GOOGLE_API_KEY in the JavaScript file with your credentials.

5 Include Script

Add the integration script to your HTML file before the closing body tag.

⚙️ Configuration

API Credentials

const WATER_REMINDER_CONFIG = {
    google: {
        clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        apiKey: 'YOUR_API_KEY',
        scopes: [
            'https://www.googleapis.com/auth/calendar',
            'https://www.googleapis.com/auth/calendar.events'
        ]
    }
};

Reminder Times

reminderTimes: [
    { time: '09:00', label: 'Morning water intake' },
    { time: '12:00', label: 'Lunch time - stay hydrated' },
    { time: '15:00', label: 'Afternoon water break' },
    { time: '18:00', label: 'Evening exercise reminder' },
    { time: '21:00', label: 'Final water intake before bed' }
]

Customization Options

Daily water goal (default: 8 cups)
Cup size in ml (default: 250ml)
Notification timing (default: 15 minutes before)
Auto-sync interval (default: 5 minutes)
Calendar color and styling

📚 API Reference

Core Methods

ASYNC authenticate()

Authenticate user with Google OAuth 2.0 and setup calendar.

ASYNC logWaterIntake(cups = 1)

Log water intake and create calendar event. Returns total cups for the day.

SYNC getDailyWaterIntake(date)

Get water intake count for a specific date.

SYNC getWeeklyWaterIntake()

Get water intake summary for the past 7 days.

ASYNC updateReminderTime(index, newTime)

Update reminder time and sync with calendar. Format: “HH:MM”

ASYNC disconnect()

Disconnect from Google Calendar and clear stored auth.

Calendar Events

EVENT Reminder Event

Summary: 💧 [Reminder Label]
Time: Scheduled at configured times
Notifications: 15 minutes before + popup
Recurrence: Daily

EVENT Water Intake Event

Summary: 💧 Water Intake: X cup(s)
Time: When logged
Description: Logged X cup(s) of water (Xml)
Color: Blue

Local Storage Keys

KEY cvplus_water_auth

Stores OAuth token and expiration time.

KEY cvplus_water_log

Stores daily water intake log with dates as keys.

💻 Usage Examples

1. Initialize and Connect

// Initialize the system
const waterReminder = new WaterIntakeReminderManager();

// Connect to Google Calendar
await waterReminder.authenticate();

2. Log Water Intake

// Log 1 cup of water
await waterReminder.logWaterIntake(1);

// Log 2 cups of water
await waterReminder.logWaterIntake(2);

// Get daily total
const dailyTotal = waterReminder.getDailyWaterIntake();
console.log(`Today: ${dailyTotal} cups`);

3. Get Water Summary

// Get daily intake
const daily = waterReminder.getDailyWaterIntake();

// Get weekly summary
const weekly = waterReminder.getWeeklyWaterIntake();
console.log(weekly);
// Output: {
//   "Mon Jan 1 2024": 6,
//   "Tue Jan 2 2024": 8,
//   "Wed Jan 3 2024": 7,
//   ...
// }

4. Update Reminder Time

// Update first reminder to 8:00 AM
await waterReminder.updateReminderTime(0, '08:00');

// Update lunch reminder to 1:00 PM
await waterReminder.updateReminderTime(1, '13:00');

5. HTML Integration

<!-- Include the script -->
<script src="cv-plus-water-reminder-google-calendar-integration.js"></script>

<!-- Connect button -->
<button onclick="connectGoogleCalendar()">
    Connect Google Calendar
</button>

<!-- Log water button -->
<button onclick="logWater(1)">
    Log Water
</button>

<!-- Display water count -->
<div id="waterCount">0 of 8 cups</div>

🎯 Interactive Demo

ℹ️ This demo shows how the water intake tracker works. Click the cups to log water intake.

Daily Water Intake Tracker

0 of 8 cups

Connection Status

ℹ️ Not connected. Click “Connect Google Calendar” to start syncing.

✨ Key Features

🔐 OAuth 2.0

Secure authentication with Google

📅 Calendar Sync

Automatic event creation and sync

🔔 Notifications

Smart reminder notifications

💾 Local Storage

Persistent data storage

📊 Analytics

Daily and weekly summaries

⚙️ Customizable

Configure times and preferences

💧 CV-Plus Water Intake Reminder