Closed lemangomeister closed 1 year ago
I guess that is fine as long as we don't think the user will get annoyed with it taking too long to come up with a response. I guess it is either that or we need to shorten the audio so it fits in the time frame the setTimeout()
function allows for the animation.
Which function dictates the animation ?
The shaking animation is started by the line document.getElementById("ball").classList.add("shake");
. This line of code adds a class to the image of the 8-ball. The CSS is set up so that any element with the class shake
does a shaking animation. To turn the shaking off, there is a function document.getElementById("ball").classList.remove("shake");
which removes the shake
class, stopping the animation. The length of the animation is controlled by the setTimeout()
function. The second parameter, 3000, which is the length of the delay in milliseconds. This parameter appears at the very bottom of the document since there is a whole function definition in the first parameter of setTimeout()
, as opposed to the function being defined elsewhere and called in setTimeout()
as you may be used to seeing. So to change the length of time of the animation, change the 3000 to the length of time you want the animation to play for in milliseconds.
My JS knowledge is limited so I'm not sure how to lengthen the animation to 6000ms. The setTimeout is already set to 6000ms.
Oh whoops. You also probably need to go into the CSS and change animation: shake 3s;
to animation: shake 6s;
.
I already change the code to async/ await
since using setimeout
the original code by itself will block the thread of the other code lines under it.
Oh whoops. You also probably need to go into the CSS and change
animation: shake 3s;
toanimation: shake 6s;
.
Recommend using the animation with CSS as well
The ball stops before the music stops playing. I have set the "setTimeout" from 3000 ms(?) to 6000 so that the response appears right after the tune is finished.