Sometimes Red, Sometimes Blue
In this project, we’ll be making our own version of the amazing Sometimes Red, Sometimes Blue site.
First, we’ll build it in Scratch and then convert it line by line into JavaScript. In this way, you’ll see how you can translate your Scratch know-how into JavaScript know-how. For example, you’ll learn how Scratch's if-statement is very similar to JavaScript’s if-statement, but with some extra syntax that you’ll have to memorize. |
In Scratch
In JS Bin 1. Go to jsbin.com & login or create an account through Github. 2. Add an appropriate <title> & <h1> heading. 3. Use CSS to make the background color of the <body> red. 4. Using Google, find the w3schools page on how to use console.log to output a number to the console. You should see something like this: |
5. Output any number you want to the console in jsbin. 6. Google a javascript method which creates random decimal number and add it to your project. Find the w3schools page - it should look like this: |
7. Figure out how to make your random number show up in the console on jsbin. Try the EXAMPLE on the w3schools page. When you look at the code, consider: |
8. Make your random number generator output either 1 or 2 randomly (HINT: try going back to EXAMPLES on the random number).
9. Check if your script works by making it write “keep red” in the console when your random number is 1, and “change to blue” when the number is 2. 10. Google a Method to change the body color. 11. Change your script so that, instead of outputting to the console, it changes the body color. 12. Tell your script to run when the page loads with a JS Method. 13. Add another color to the mix. 14.Continue working until you are happy with your project. 15. Publish your website and submit it below. |