Daily Planner - Frontend

Responsive daily productivity web app built with vanilla JavaScript. Plan your day hour by hour, track tasks and goals, take notes, and check live weather - all synced to a REST API with auto-save and an offline mock fallback.

---

At a glance (for reviewers & recruiters)

Daily Planner is a frontend-only project built without any framework, demonstrating clean OOP design and thoughtful API integration in vanilla JavaScript.

What it demonstrates

• Object-oriented architecture: Three classes structure the entire app - AutoSaveManager (data lifecycle), StatusManager (UI feedback), and MockStorage (API simulation). No spaghetti event listeners.
• Smart auto-save: Every field change is debounced, then diffed against an in-memory cache before firing a PUT - only truly changed data hits the network. Failed requests retry automatically up to a configurable limit.
• Mock API layer: A single boolean flag (USE_MOCK_API) swaps the real REST backend for a fully in-memory simulation (GET / POST / PUT / DELETE with artificial latency and sessionStorage persistence). Development works with zero backend.
• Date-aware UX: Clicking any calendar date loads that day's data from the API. Past dates switch the entire interface to read-only mode with a visual indicator.
• External API integration: Live weather fetched from OpenWeatherMap, icon selected dynamically from the condition returned by the API.

Stack: HTML5 · CSS3 · Vanilla JavaScript (ES2022) · OpenWeatherMap API · REST API

---

Architecture

/daily-planner-ui/
├── index.html        # Semantic HTML structure
├── style.css         # Responsive layout and design
├── script.js         # Application logic (OOP, auto-save, API layer)
└── assets/           # Weather icons, illustrations

Three classes handle all business logic:

Class	Responsibility
AutoSaveManager	Loads data per date, diffs against cache, fires create/update/delete, manages read-only mode
StatusManager	Injects and drives the save-status indicator (saving / saved / error)
MockStorage	Simulates the full REST surface with sessionStorage persistence and artificial delay

The debounce utility wraps all field listeners. AUTO_SAVE_CONFIG controls debounce delay, retry count, and retry delay - all configurable without touching business logic.

---

Architecture Diagrams

Use Case Diagram

Class Diagram

---

Features

• Hourly schedule from 06:00 to 21:00
• Checkbox-based task list with completion tracking
• Daily goals with radio-button tracker
• Freeform note area
• Live weather via OpenWeatherMap (condition-aware icon)
• Interactive calendar - click any date to load its data
• Auto-save with debounce and retry
• Read-only mode for past dates
• Mock API mode for offline development

---

Getting Started

Prerequisites

• A modern browser (Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)
• VS Code with the Live Server extension (recommended)
• A backend running at http://localhost:3000 - or enable mock mode (see below)

Installation

git clone https://github.com/Yan739/daily-planner.git
cd daily-planner
code .

Right-click index.html → Open with Live Server.

Mock mode (no backend required)

In script.js, set:

const USE_MOCK_API = true;

All API calls are intercepted by MockStorage, which persists data in sessionStorage for the session.

Weather API

1. Create a free account at OpenWeatherMap
2. Replace the API key in script.js:

const apiKey = 'YOUR_API_KEY';

---

REST API Contr