book helper
By
@marygoat
- 9 Devlogs
- 11 Total hours
a site that encourages you to keep reading!
Ship #2
✨ Blessed
Book Helper
A pixel-styled site to help you focus on your reading!
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
Booklist
Quotes
Spotify playlist
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 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.
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.
28m 47s logged
Book Helper
DEVLOG: #8
booklist update . . ship?!
alright, this was a quick devlog! i have made my book list better, rather than just being a text book.
update includes:
- Checklist system, add book titles of your own
- Notes for personal use
- Counter of how many books are listed and how many are read
i wanted to do some sort of like search for a book thing like an api? but that seemed too complicated for me so i just opted for a simple checklist system.
1h 11m 34s logged
Book Helper
DEVLOG: #7
spotify + quotes!
i have added TWO! features:
-
Spotify: a reading playlist for more variety in sound so that its not just white noise and rain
-
Quotes: a little tab to give a random motivational quote(BY ME!) when you log in. tuff right?
then i changed a feature:
- Timer Change: some people didnt know that settings would allow you to change the timer time, so i have placed the input into the timer box itself and put a button next to it saying “Change Time” so that its more obvious and less tedious to open up settings for it.
and since i made that change, i also REMOVED! one feature…
- Settings button: i DELETED it since the only thing in settings was the timer changer, which was relocated as stated earlier.
i was struggling to figure out what i should add to improve this site, but looking back on feedback, people talked about added more ambience noises, so why not a full playlist?
i also added quotes because i had learned how to do randomized quotes from the snowglobe program with the little motivational snowglove site, so i reused my code! i also added back the pixelated font, cause i think it makes more sense. i want to change the corners to look more pixelated too, but i want to do it in an unique way and not in a boring, “ai looking” way.
2h 4m 46s logged
Book Helper
DEVLOG: #7
change up ui + booklist?!
alright! so, i have changed up the ui to make it less ai looking?
- reverted to original font
- borders now round at 20px
i have also added a new modal / window, a booklist!
Booklist
the booklist is a simple notepad where the user can write down anything, but the intention is to write down book titles or information about the books theyve read!
i used my old maryOS code that had a notepad to help me figure out how to make it so that the text saves. it was a bit funky implementing that code into this new project due to having to rename ids and variables having to match, but i managed to figure it out!
i also removed unnecessary code that ai gave me such as escape key to leave the modal, since theres already a close button on it.
1h 35m 30s logged
Book Helper
DEVLOG: #6
rewriting code!
alrighty, i have rewritten parts of my code since i got feedback of it being over the 30% ai threshold. one of the things i rewrote was the white noise generator, since that used web api and i didn’t really understand it. i decided to just add a mp3 of white noise and use the same function for the rain noise that also used mp3. i also took away some fallback stuff and extreme security stuff since a simple book project like this does NOT need stuff like that, but it was nice to learn ways of fallback if i ever needed it! i have also changed the badge icons with… very rough drawings of mine, but atleast it aint emojis!
Ship #1
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!
