JavaScript Callback Functions in JavaScript Callbacks with Timers Triggering an Animation

Tyree Mack
seal-mask
.a{fill-rule:evenodd;}techdegree
Tyree Mack
Full Stack JavaScript Techdegree Student 2,920 Points

Triggering an Animation

I am not sure what I am getting wrong in this objective. The keyword within the question was "function should be triggered 2 seconds after the page loads," which made me think I will be using the setTimeout function. However, when I insert setTimeout(startAnimation, 2000), I receive this bummer hint: Remember a timeout is 1000 milliseconds for every second. Not sure what this indicating since I am putting 2000 as equal to 2 seconds. What am I missing from this objective?

app.js
const section = document.getElementById("animateMe");

function startAnimation() {
  setTimeout(startAnimation, 2000); //Applies spinning animation to section element
  section.className = "spin";
}
index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
        <section id="animateMe">
            <p>Animate Me in 2 Seconds!</p>
        </section>
        <script src='app.js'></script>
    </body>
</html>

1 Answer

Blake Larson
Blake Larson
12,700 Points

setTimeout takes a callback and a duration in milliseconds.

setTimeout(function(){ 
section.className = "spin";
 }, 2000);

You can use it like this too but it looks like they don't want it this way.

setTimeout(() => {
section.className = 'spin';
}, 2000);
Tyree Mack
seal-mask
.a{fill-rule:evenodd;}techdegree
Tyree Mack
Full Stack JavaScript Techdegree Student 2,920 Points

It seems like you're using an anonymous function and the directions specifically say do not use that type of function. I understand setTimeout uses duration in milliseconds, but it seems as though no matter what number I insert, the bummer hint continues to say "Remember a timeout is 1000 milliseconds for every second." I'm just confused in understanding what I am doing wrong.

Blake Larson
Blake Larson
12,700 Points
setTimeout(() => { 
startAnimation();
 }, 2000);