book helper
By
@marygoat
- 5 Devlogs
- 6 Total hours
a site that encourages you to keep reading!
Ship #1
Changes requested
Book Helper
A pixel-styled site to help you focus on your reading!
3 QoL improvements:
Timer: Helps create a habit of reading.
Ambient Noise: Prevents distractions to help with focused reading.
Trophy system: Motivates readers to keep reading in order to collect achievements.
Description
Book Helper is a site made to help you have a consistent reading schedule. By putting on a timer, you are more likely to push through and read at least a little for the day, growing your mind. I personally struggle a lot with reading, so I thought making a site for it would help me and others have a proper reading schedule!
Features
Adjustable timer
Ambient noise
Rain
White noise
Leveling up system
Site theme customization
Trophies
Stats
Technicalities
This site saves your storage through localStorage, so that you can maintain a streak and maintain your progress as you read. Mask-image was used in order to change the mascot’s color with the theme, which was a bit tricky to understand at first. The trophy system checks after a session if you have earned an achievement or not, looking at streak length, total hours read, and total sessions completed. The white noise is procedurally computer generated, with the Web Audio API. The theme system is updated through javascript by changing the value of the color variables when the user changes themes.
Challenges
It was a struggle to get the modals / window pop ups working how I wanted them to work, since connecting it to a button and making some sort of overlay was difficult to me. I only ever did some sort of window pop-up once, and that took me a really long time to understand. Eventually, I understood that toggling a class on and off with a click detector is how it could be made.
Why was this made?
This was made for the Stardance Hack Club program, for the Frictionless mission.
AI Usage
I used Claude in order to help me debug minor bugs in my code, as well as figure out how to make the themes and mascot change colors depending on the theme. The white noise was helped by Claude too, since I didn’t understand API’s all that well.
39m 40s logged
Book Helper
DEVLOG: #5
worm mascot… ship?!
i have added a little worm mascot guy! with some research and ai debugging, i managed to create a mascot that changes colors based off the theme. it was a bit weird learning it, but i understood it eventually, since it basically only puts an overlay on the image. i think it adds a nice little touch! i have also made my readme, talking about all the features such as the timer, stats, and why the site was made. im ready to ship!
1h 31m 26s logged
Book Helper
DEVLOG: #4
tested site, pixelated it!
i have tested the website, and it WORKS?! i had to tweak some things like making each theme look a bit nicer and configure colors, but it works!
- Levels actually unlock new themes
- Trophies are awarded when the right requirements are met
- In settings, you can properly change the timer time
im pretty happy with how this is turning out, but now im not sure what to do. i had mentioned of adding some sort of shop and book list, but i dont plan on implementing them right now.
i think i will make my own assets for the trophies instead of just using emojis, either that or find a free use image online. maybe ill even add a lil mascot guy to this???
1h 19m 26s logged
Book Helper
DEVLOG: #3
new tabs + stylization
alrighty, i have made the site a bit more colorful and changed the formatting so that its more centered on the page. i have added features like:
- Trophies
- Customization
- Settings
i asked ai to help me connect the buttons to actually opening up a window thingy, since i was struggling with it for a long time. the javascript was also a bit hard with all of the localstorage and badge system, but with searching and debugging i think it works?? i haven’t tested it yet so who knows… i do know that streaks work though! at least some what
1h 12m 14s logged
Book Helper
DEVLOG: #2
more apps!
coolio, i have added TWO!! window thingies
- stats
- ambient noises
i had a REALLY long rain file… like . . . 120 mb. not good.
i am currently trimming it down cause it was an hour long and it’ll be compressed too.
i tried doing some javascript for the stats, with some help of ai, but i havent gotten to testing it yet. hopefully it works !
it was a struggle formatting it, and also programming the buttons so that theyd play the right audio and would change text and all that fun stuff. regardless of all that, i think its coming along nicely :)
53m 32s logged
Book Helper
DEVLOG: #1
starting the site!
i have created a website to help people stay engaged on reading, since I struggle a lot with reading myself! I want to make this into some sort of like gamefied website, but so far I just put a 15-minute timer. im planning on adding features like:
- Shop for customization
- Booklist
- Streaks
i hope this will turn out well, since thatd be pretty cool!
it was a bit difficult knowing how i wanted the website to look like, but for now i made it a simple blue scheme. might make it a pixelated sort of style? dunno yet!
