I built a productivity tool using ChatGPT

I had to reload to clear the timer to show the logs because it had other stuff..

If you’re like me, you want to track your time.
And while there are lots of time tracking tools, available — I just wanted something simple. A stopwatch that shows time passing, and status buttons to change what is being worked on.

Then a thought struck me. What if I ask ChatGPT to help me make a program?

Five days later, after hundreds of prompts I have a working system.

It works flawlessly*

*flawless in this case means it works but has some quirks and many bugs
also, don’t look at the code! (what a MESS!!)

Here’s how it works.
The program is a .HTML file on the computer. It’s loaded in the web browser.

Originally it was supposed to save a cookie to save your session but I quickly lost my marbles having to delete a cookie after every load, so loading the webpage again loses history.

If you start the timer without entering a project name, the project bar turns red.

It’s supposed to turn back to normal color after you type something in, but that doesn’t work. Stopping the timer flashes green, starting again goes to normal color if all fields are filled.

Deleting the project name flashes the screen red IF a project was started.
Clearing the timer flashes the screen green. I’m not sure why the screen flashes green after clicking clear but I like it.

Status options are Finished, Active, Break, Exception.
Pressing one adds the timer current run time, the project name and the status into the “Logs” list below.

You used to be able to add a new status and click “add status”
which would add a button for to the row. This has stopped working — not sure why.
The add status bar is also wayy too big. I frequently try to punch a project name into it.

Clicking twice on a status gives the option to remove it. Don’t accidently remove a status because it currently can’t be added back!

The timer also changes color as time goes on
For less than 15 minutes, the color is set to blue.
A t 15 minutes, the color is set to green.
past 30 minutes, the color is set to dark green.
At one hour, the color is set to orange.
Finally If the timer is at least one full day , the color is set to red.

Clicking any status logs the current project name, the timer count and the status to the log file.

The timer can be started, stopped and cleared. Clicking any action causes the log to be added to the list that “project” was “timer action” at “timer count”

Clear logs doesn’t yet work. It used to, but after adding code for the colors it’s broken.
Export works. Clicking export takes the current log and saves it as a .txt

To run it, save the code as a .HTML file then open the file in your browser.
All in all, it’s a pretty valuable tool and was a fun project to make. As I’m teaching myself to code, this was a extreme test of skill — along with ChatGPT helpfully spitting out sections of code needed.

Over time, I plan to add functions to it. A pomodo timer, a full task manager, and a working clear button. I’m pretty impressed with how it turned out so far- and look forward to additions to the tool in the future.

The code is here https://pastebin.com/CXcWEQJM

and the password is: timer

Current bugs with code
The </span> tag is missing from the #current-status element.

1. The margin property of the #start-btn, #stop-btn, and #clear-btn elements in the CSS is missing a value.
2. The </h2> tag is missing from the Logs section.
3. The #add-status-form form doesn't work as intended. When a new status is added, it doesn't create a button for that status.
4. The #new-status input field is too large and overlaps with the #timer element.
5. The “Clear Logs” button doesn’t work.

Here’s what I still need to do

1. Add </span> after the word "Status" in the #current-status element.
2. Add a value to the margin property for the #start-btn, #stop-btn, and #clear-btn elements in the CSS.
3. Add </h2> after the word "Logs".
4. Modify the JavaScript code to create a new button for each new status added using the #add-status-form.
5. Decrease the width of the #new-status input field to avoid overlapping with the #timer element.
6. Modify the JavaScript code to fix the “Clear Logs” button.