Rocket Focus
- 3 Devlogs
- 4 Total hours
Launch your productivity. A website to help you stay focused and achieve your goals. It's a timer.
Launch your productivity. A website to help you stay focused and achieve your goals. It's a timer.
I created some animations to make the web cooler: now the rocket seems to fly going up and down while it’s moving, also the track-path that follows the rocket turns vertically. Besides I added music effects, when the timer is on an ¡d the rocket is flying ambient music starts playing. Also when the rocket reach it’s objective a random alarm sounds advertising the user that the timer is off. Finally when the rocket is on the moon, it appears a shine behind the moon, like an eclipse.
I just added a progress bar for the timer which is inspired in the thematic of the website. While the timer is going down, the rocket is travelling from the planet Earth to the moon. You can personalize the time the rocket is travelling with the time input. I updated the hover animations of the buttons making them more beautiful (from my point of view). These animations and the path which is following the rocket are similar and both have a space-theme. Any idea for add to my website?
I created the main display of the website, which includes: -The title -The timer -The input for setting the time -Three buttons (for establishing the time, for start, for stop and for reset the timer). The hardest thing was to make a functional timer which you can set as you like. This part of Java Script is new for me, so I used the awesome Internet to help me understand how to do some stuff. My goal is that when the user starts the timer, a rocket launches and while the timer is on, the rocket is flying over the screen. I choose these theme for the timer because I like rockets and all this stuff but it could be a lot of things.