Let's hit a few returns, and let's end our script tag. And now the first thing we want to do is set up something called a set interval. This way we can run a function or an instruction multiple times, and this is what's going to give us our animation. So we're going to type setInterval, and that has to have the capital "I" in the middle, all one word. Putin our parentheses, then a semicolon. Inside, we can declare a function that's going to run or we can create a generic function, which is what we're going to do here.
So we're going to type function, beginning and ending parentheses, beginning and ending curly brackets. Then after our function we're going to hit a comma, and then we're going to pick an amount of time that the set interval will wait before it runs the function again. So for now let's set this to 1000 milliseconds, or one second. Now let's get our cursor inside of the curly brackets, and let's split this open. So now what's inside of this function here, is going to run once every second.
So we do that by typing document.getElementById, then inside of the parentheses, we'll put our string, type in debug. Then after the parentheses we'll type .innerHTML, space, equals, space, and let's add the number variable, then a semicolon. And now at this point we can hit save, we can go back to the browser and hit reload, and then once per second you'll see a new random number being generated.
So this is the number that we're going to use to change the opacity of the glowing JPEG sitting on top of the original illustration. So now let's go back to our HTML file, and let's target the glowing animation that's sitting on top of the original illustration. So back inside of our script, let's hit a few returns, let's type document.getElementById again, and then we'll come up here and copy the ID named animation_glowing, which is assigned to the image that's bringing in the kaiju_02.jpg.
So let's copy that, let's come down here, let's paste it. And then outside of the parentheses we're going to set the style of this element, so we'll type .style, then another dot, then opacity, and we're going to set this equal to the variable named number. So with that change in place, save your HTMl, let's go back to the browser, hit reload, and now in addition to the numbers counting up in the debug area, you'll also notice that the opacity of the glowing JPEG file is being changed as well.
Inside of the parentheses, we're going to say if number, space, is less than .3, and then inside of the if statement, so if this condition is true, we're going to set number equal to itself plus .4. And we do that by typing a plus sign, an equals sign, and then .4 then a semicolon. So again, if the number's ever less than .3, we're going to add another .4 to this.
So the lowest the opacity can ever be is .3. If it ever gets below .3, we'll add .4 to it, which will jump the opacity anywhere from .4 up to .699. And now, with that in place, we'll save our HTML, go back to the browser, we'll hit reload, and now if you watch the random numbers you'll notice they never get below .3. And now our final step will be to come back to the HTML and let's comment out our debugging code. So we'll add an HTML comment around the paragraph with an ID of debug.
And so with that, I'll conclude this episode, and as always, thanks for watching.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.