FocusForge banner

FocusForge

4 devlogs
6h 3m 42s

FocusForge is a sleek productivity web app designed to boost focus and efficiency. It features a dynamic To-Do list, an interactive Pomodoro timer, progress tracking, and a modern dark-themed interface with smooth animations. Perfect for managing …

FocusForge is a sleek productivity web app designed to boost focus and efficiency. It features a dynamic To-Do list, an interactive Pomodoro timer, progress tracking, and a modern dark-themed interface with smooth animations. Perfect for managing tasks and staying productive.

This project uses AI

I used AI tools to help improve color schemes, spacing, and overall layout aesthetics of the project. All functionality, structure, and original content were created manually.

Demo Repository

Loading README...

mathew.emad778

Shipped this project!

Hours: 6.06
Cookies: 🍪 25
Multiplier: 4.15 cookies/hr

FocusForge is a modern productivity web app built to help users stay focused and organized through a clean, responsive interface. It combines a dynamic To-Do list where users can add, complete, and delete tasks with real-time progress tracking, alongside a fully functional 25-minute Pomodoro timer featuring start, pause, reset, and session counting. The app also includes a smooth dark mode toggle for improved user comfort during long work sessions. Built using HTML, CSS, and vanilla JavaScript without external libraries, the project focuses on DOM manipulation, state management, interactive UI design, and responsive layout implementation. FocusForge reflects my understanding of JavaScript logic, event handling, debugging, and creating a polished user experience from scratch.

mathew.emad778

I completed the remaining core features of FocusForge.

Fully implemented the Pomodoro Timer (start, pause, reset functionality)

Added session tracking to monitor completed focus sessions

Connected completed tasks to the progress tracking system

Implemented a dynamic progress bar that updates in real-time

Improved UI consistency across all sections with smooth transitions

FocusForge is now a fully functional productivity dashboard combining task management and focus tracking in one clean, dark-themed interface.

Next step: polish animations, optimize performance, and refine user experience

Attachment
0
mathew.emad778

Finished building the full To-Do List system for FocusForge.

Added dynamic task creation using JavaScript

Tasks render instantly in the UI

Clean dark styling with electric blue highlights

Structured the code to support future features (delete, complete, progress tracking)

Improved spacing and hover interactions for better UX

The app now has real interactivity.
Next step: connect tasks to progress tracking and Pomodoro sessions

Attachment
0
mathew.emad778

I finished building the To-Do section for FocusForge.

Implemented task input with dynamic add functionality

Styled the list with a dark UI and electric blue accents

Added hover effects and smooth transitions

Structured the list for future features like delete and progress tracking

Next step: connecting it to progress tracking and Pomodoro logic.

Attachment
0
mathew.emad778

Finished building the navbar for FocusForge today.

Added a sticky, dark-themed navigation bar with the FocusForge logo.

Included a theme toggle button for switching between dark and light modes.

Styled links with hover effects and smooth underline transitions.
Next step: work on the To-Do section and layout of the main dashboard.

Attachment
0