Language Learning Tracker

Keep track of the amount of time you spend learning a language each day.

Overview

Language Learning Tracker Homepage

This web application helps users track the time they spend learning a language each day, with monthly totals displayed in hours and minutes. Users can also connect their Anki account to automatically track flashcard review counts, or enter them manually if they prefer not to link the app.

Core Functionality

Language Learning Tracker Update Time

Selecting a date highlights it in blue, allowing the user to input time spent across different learning categories. Once the user saves their entry, the total hours and minutes update automatically, and the data is stored in local storage so their progress persists between sessions. If Anki isn't connected, users can manually log their flashcard count for the day instead.

Feedback and Data Persistence

Language Learning Tracker Display Time

After saving, the selected date turns green to indicate that data has been recorded, and the month's total hours and minutes update accordingly. Clicking on any previously logged day displays the exact time recorded for that session.

Challenges

One of the biggest challenges was integrating the Anki API and learning how to effectively use local storage for data persistence. Building a dynamic calendar that correctly calculated the number of days in each month and aligned them with the right day of the week also proved tricky. Additionally, implementing conditional color-coding, such as highlighting a day blue while it's being edited and green once data is saved, required careful state management to keep the UI accurate and responsive.