Exercise: What does "interactive" look like?
- Because this HTML file uses two images, you need to download the following folder, and then right-click to open the "js-example.html" file in Chrome.
Once open, you should see a web page that looks something like the following:
The turtle 🐢 and rabbit 🐇 will start racing right away. Play around with stopping and restarting the animation.
If at any point the race annoys you or you can no longer see the animals, restart and/or stop the animation using the buttons. No offense will be taken.
Go ahead and in your text editor, open the "js-example.html" file.
Internal CSS Example:
<style></style> element, we use the
- Next, in your text editor, navigate to row 72. We are going to change the "speed" of the race by changing a value here. Change the 500 to 100. Remember to save your changes, and then refresh the browser window.
By setting the turtle's starting position and CSS unit
"0px", the turtle is starting on the left-hand side of the screen. We are going to change this to
"200px" to help give the turtle a bit of a head start (200px head start to be exact).
Get started now