Progress Documentation

Week 1

Discussed what we should add in the magic 8 ball website

What I suggested for possible implementations are:
- Sound effect (different based on answer)
- Track streaks and do different animations like fireworks for rarer streaks (three of the same)
- Swiping spins the ball
- Too much shaking makes the ball explode
- Timeout delay to send notification to get you to interact gain / notification to use the app (x2)

Provided the implementation that I will add for the website

Additional Buttons that can manipulate the color of the ball
Sound effects that are triggered when clicking the ball
Track streaks and trigger animation graphics like fireworks for rarer streaks (three of the same)

Figure 1.1 Sprints that will be done by the team per week

Figure 1.2 Link to the Scrum Brainstorming Document

Week 2

Additional Buttons that can manipulate the color of the ball

Implemented a total of 8 colors
Buttons are styled with CSS and has a clicking and hover effect
Completed Task on 2021-11-20

Fig 2.1 Magic-8 Ball Week 1 Scrum

Resources Used:

HTML DOM getElementById() Method

CSS change button style after click

CSS Buttons

Week 3

Sound effects when buttons are clicked

<aside> 💡 Originally, this addition was only intended for the magic 8 ball only but I decided to add sound effects to the other buttons as well.

</aside>

Sound effect for the magic-8 ball (onclick) - was changed to on key pressed
Sound effect for the change ball colors (onclick)
Sound effect for the change background button (onclick)
Completed Task on 2021-11-24 Before the end of class

Fig 3.1 Magic 8 Ball - Week 3 Scrum

Resources Used:

Audio play() Method

W3Schools online HTML editor

javascript onclick sound effect Code Example

Week 4

Streak counter is applied and a fireworks animation would apply if the user has accumulated 3 or more streaks.

For this week, I have asked for help from my instructor and he was able to guide me on what to do. Completed the task within the day.

<aside> 💡 Originally, the idea was to create a fireworks animation that will spawn fireworks one by one but was changed to x amount of fireworks at the same time where x is the number of streaks.

</aside>

Once the user gets three of the same response from the magic 8 ball, it will start to do a fireworks animation accordingly to the number of strikes (3 fireworks).