Aesthetic Timer

Wait, is that it? YESSSS!!! The goal-setting functionality has been implemented, which means that the basic functions of the site are now complete.
I learned that localStorage can only store strings, not great since I wanted to store a list, but using JSON.stringify to string an object (and JSON.parse to get the object back) was helpful.

Made the structure of the goal input area, still need to figure out how to store goals, submit/save goals, etc.

This devlog isn't as definite as I'd like it to be, I started work on the Add Goal part of the site but got sidetracked and implemented the reset site data button.

Currently, the design for the goals is finished but the input is not, and the reset-data function works.

Made the title customizable (with no HTML input tag!). It also saves.
Actually, i'm super proud I figured out how to do this without AI (unless Google AI summaries count, the ones at the top of the page? hmm) or tutorials, just Stack Overflow.

Things I've learned:
- element.textContent has whitespace at the end? I used trim() so that there was no need to press backspace too many times
- I had to make sure to put a boolean stating whether the title was currently being edited -- otherwise, multiple clicks on the title would create multiple keydown (basically listening to the keyboard for keypresses) listeners, so when a key was pressed, it registered multiple times. yipes...

Created the second page and the link to the first page, now just need to make the second page function --> planned function is a goal list that you can add to, and then a list of created timers that you can (optionally) have alongside the goals.

idea! --> be able to reuse past timers, click Start on a past timer in Timer History

Made the animation for the dashboard button!

Implemented the option to change the timer size in the settings (lightbox).
[still need to fix the delete data thing, inshaAllah, rn it's just a button]

Lesson! -- learned that you need to use event.target.value to get the value of the drop-down when someone chooses something within it

The buttons to change the website's aesthetic are functioning! Now to change the colors associated with each aesthetic, which involves decisions...

(by the way, each aesthetic collage was made by me using Canva!)

Woohoo, the initial render of the aesthetic worked! The buttons to change the aesthetic won't work, however, so I need to figure that out.
After that, inshaAllah, I also need to figure out the glassmorphism (if any) for the buttons and the colors of the individual aesthetics' timers.

Finally finished the timer functionality! The timer's customizable, resettable, and pausable.

Next up (inshaAllah) is making the backgrounds and implementing the changing aesthetic functionality.

Made it so that the timer input couldn't have minutes or seconds greater than 60.

... for some reason it wouldn't let me show a devlog, so I also worked on getting the timer to work, no visible progress yet there.

Learned the importance of DOMContentLoaded --- had some issues where the showLightbox function would not want to work since the button it was attached to had not yet been loaded, so JS returned null. Google was a big help (and so far, no project-specific ChatGPT so there's a win!!!).

Now the settings lightbox shows and can be x-ed out.

Updates:
- added and positioned buttons
- imported icons (Font Awesome)
- started work on lightbox, settings, and general design

Something funny:
- Forgot that absolute was for position and not display, had issues getting the X button positioned correctly in the settings lightbox because I wrote display: absolute and not position: absolute.

Been working on the Settings lightbox, don't yet have the function to display/hide it, it's not yet visible in the image. Planning to have the site have a lot of glassmorphism/shininess to emphasize its aesthetic-ness.

Woohoo! Added formatting, so now this actually looks like a timer app.
Reused some code from an older project (pomoblocko) for the footer with the links to charities, had a small issue since I forgot to link the JS file...

Made GitHub repo, started HTML
outlined fonts for each style:
- Sleek BW -- Inter
- Cottagecore -- Playfair Display
- y2k -- LXGW Marker Gothic
- vintage -- Savate
- soft girl -- Caveat
formatting? none so far...