Devlog #3: Background Music & Stats Page!

Heyyy there! Since the last devlog, I’ve been working on making the reading companion feel more cozy, by adding the background ambient sounds (rain, campfire, etc.) and also building out the stats page to basically just show some stats about your reading progress.

First of all, I added a background music player on the right side of the home screen! I set up a custom audio element with a dropdownmenu so you can switch between the different background sounds that are available. I also wrote some JavaScript to handle the play/pause button, and also to manually lower the volume on each track so they sound relatively the same, since some where louder than others.

I also built and styled the stats.html page! I used javascript in the html code by wrapping it in <script> tags, to connect with localStorage and pull your total reading time, how many books out of the seven you’ve completed, and also add a dynamic progress bar (this was made by AI) that fills up based on your progress.

Along the way, I made some CSS bugs and erros (I;m new in web devekopement), like some mismatched card class names and ids which I located and fixed. Moreover, I used AI to fix the grid margins on the book tracker so it fits inside the card without goinf over the border, and to also fix some javascript errors.

There’s still a lot to do, but in my opinion it’s kinda coming together into a complete and working reading companion. Hopefully, there will be more to show you next! That’s it for now, see you on the next devlog!