Mad Lab part 1

Challenge: Create a text that updates a number in a sentence with another random number as you refresh the browser. Every time you refresh the browser, you will see the same sentence, but that number would have been replaced with another random one.

Things you'll practice: targeting and manipulating HTML elements from JS, String concatenation, JS libraries like Math, GIT branches.

Example:

I am 8 years old.

(refresh browser)

I am 156 years old.

(refresh browser)

I am 23 years old.

etc.

Step by step instructions:

HTML

Use whatever HTML element of your choice to display the sentence, a div, a p, etc.

CSS

You are free to style and layout things as you please.

JS

Write your JS in a separate file, just as you have a separate file for CSS. How do you include a JS file in your HTML code? What is the best place in the HTML code to include your JS files? (Google it!)
Use getElementById() to target the HTML element by id and save it into a variable. Read the documentation here.
Use the Math library to generate a random number and save it into a variable. Read the documentation here.
Use string interpolation to build the output sentence and save it into another variable.
Then use the method innerHTML to add the output sentence inside of the HTML element of your choice. Read the documentation here.

GIT

Work on a branch for this challenge.

First, create an initial commit on master and push it to your upstream repository on GitHub, as you've been doing until now.
Then branch from master with "git checkout -b YOUR_BRANCH_NAME". The checkout command is usually for switching branches, but if you add the "-b" flag, it will create a new branch and switch to it. You can see your newly created branch with "git branch". It should have an asterisk too, meaning you are now working in that branch.
When you are ready you can push this branch to GitHub with "git push origin YOUR_BRANCH_NAME". You will be able to see it in the branches tab.
Let me know when you've done this and I'll show you how to create a Pull Request on GitHub.

DEBUGGING

Use right click –> "inspect element" to display your browser's developer tools and check the generated HTML and CSS.
Click on the Console tab of your browser's developer tools to debug JavaScript. You can type JavaScript there!

EXTRA

Do this if you want to, but it's not needed for the challenge:

At the end of your JS file, print the output sentence to the console using console.log(). Then, in your browser, load the developer tools and click on the console tab. What do you see in the console tab when you refresh the browser?