Web app in HTML/CSS/Javascript that counts the time spent focusing on something (e.g., programming, learning, reading etc.). This is my first project in life that includes Javascript :)
App can be used in two different modes:
User clicks "Start" and app saves the current time. It's also displayed on screen with "Elapsed time" counted in real time. When the activity ends, user clicks "Stop". Time is recorded in the table with addidional informations like: start time, end time and optional comment.
The sum of minutes in the table is converted to hours and displayed in "Total elapsed time".
Manual mode works similar to auto mode except that time is entered manually. User fill in amount of minutes and optional comment. After confirming data by pressing button "Add" record goes into the table. It's possible to enter negative numbers which may reflect e.g., mistake in entering values by user, break at work etc.
- It is possible to save save data from table to .xlsx file which can be opened by popular "Microsoft Excel". Example of saved file is shown in the photo below. Note that the name of file consist date and time when it was exported.
- App is protected against accidental closing by alert "Leave the page? Changes that you made may not be saved.".
https://html-css-js-focus-timer.vercel.app- Just open the link above, in section "Live preview".
- Download all files
- Open index.html in your browser