Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Callback Functions in JavaScript Callbacks with Timers Triggering an Animation

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,976 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);

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,976 Points
setTimeout(() => { 
startAnimation();
 }, 2000);