Keystone πβ¨ A personal planner web application built with HTML, CSS, and vanilla JavaScript. Named 'Keystone' because it's designed to be the central, essential piece that holds your day's plans and thoughts together.
This project started as a Python desktop application but pivoted to a web-based approach to achieve a more flexible and modern user interface.
Core Features π― This planner aims to integrate several tools into one clean interface:
ποΈ Calendar: A visual way to track appointments, add events, and see notes for specific days.
β To-Do List: Manage daily tasks with satisfying checkboxes.
π§ Brain Dump: A free-form section to get all your thoughts out without structure.
π "Remember" List: A place for important notes that aren't tasks (e.g., birthdays, ideas).
β Top Priorities: Highlight the most critical tasks for the day to maintain focus.
π Daily Mood Tracker: A simple 1-5 scale to log and reflect on your daily well-being.
Tech Stack & Libraries π» Structure: HTML5
Styling: CSS3 (Custom properties, Flexbox, Grid)
Logic: Vanilla JavaScript (ES6+)
Design Inspiration: The UI was initially prototyped in Figma and translated from a React/TSX component library into a clean, framework-free web application.
Project Goals π§ The primary goal of this project is to learn and improve skills in:
DOM Manipulation: Building a dynamic, single-page application (SPA) entirely with vanilla JavaScript.
State Management: Handling the application's state (tasks, events, etc.) within JavaScript objects and re-rendering the UI as needed.
Modern CSS: Using custom properties (variables) and advanced layouts to create a beautiful, responsive, and themeable interface.
Event Handling: Managing all user interactions, from button clicks to form submissions.
Translating Design to Code: Accurately converting a component-based design into a modular, file-based web project.
Current Status π The core user interface for all features has been successfully built. The application is functional and styled. Next steps will involve refactoring, adding data persistence (e.g., using localStorage or a backend service), and further polishing the user experience.
Screenshots π¨ (This section can be updated with screenshots of the final, running web application.)