Inspiration
I was inspired by the Pomodoro Technique to help students focus on their tasks and work efficiently. Online school has gotten to be very draining, especially among the STEM community and this is a tool to help lighten the load.
What it does
My website used Javascript to simulate a countdown timer which can be increased or decreased by the user. Audio is also implemented to help students unwind before beginning schoolwork.
How I built it
This project is built with HTML, CSS, Javascript and Sass. I used resources like w3schools and freeCodeCamp for resources The design and images are 100% mine
Challenges I ran into
This is my first responsive and detailed HTML websites, while working solo there was a lot of bumps in the road. Learning the syntax for new languages like Javascript and Sass was a challenge but after awhile I got familiar with it. I could not get the study clock flex box centered for the longest time, that was really frustrating at times.
Accomplishments that I'm proud of
The entire responsive website from navbar to footer. The music I would say is my favorite part, along with the inviting and calming aesthetic. It also works on mobile devices!
What I learned
A whole lot! Javascript syntax, cases, if statements. Importing google fonts, importing Sass to CSS to HTML. Adding audio, graphics, responsive resize, href link, buttons, and colors!
What's next for Student Study Clock
I want to add graphics to the clock, like a circle showing a visual representation of the time depleting. Also fixing the slideshow images on mobile UI.
Log in or sign up for Devpost to join the conversation.