TakeABreak

Inspiration

We were inspired by common problems that are happening to most students during this global pandemic

What it does

The website essentially gives the user a 25-minute timer and plays calming music in the background with inspirational quotes to fuel their motivation.

How we built it

We used repl.it to code our website in HTML, CSS, and Javascript.

Challenges we ran into

• We had problems with our animated gradient because a solid line of color would rise and fall with the animation of the gradient.
  • Our implementation of a button in HTML did properly execute our code in our javascript file.
  • Furthermore, once we got our button to work, the action would stop abruptly.
  • Formatting of the button also caused issues due to its height and flex
  • Our javascript timer had issues displaying the correct values for the time
  • The timer would continue past zero into negative numbers
  • The music that was linked to the play/pause music would not stop when 'pause' was pressed

Accomplishments that we're proud of

• The troubleshooting experience
• Fixing our gradient problem
• Making our play/pause buttons function correctly

What we learned

• How to code in HTML, CSS, and Javascript
• Understanding how to troubleshoot
• Collaborative IDEs

What's next for TakeABreak

• Implementation of motivation videos
• Allowing the user to change the timer
• Timer end beep

Built With

• css
• html
• htrml
• javascript