Hands on Tutorial

This will be a hands on tutorial where you will learn about HTML5 CSS and JavaScript while building your own project

Lets start first with adding the Project name to the top we will be using h1 tags placed below the opening body tag then just add your text between them.

Random Animals

Next we will add our div to make the words appear after we add them to the array and an id for the Javascript.

Next we will add a button to change our random animal. We will add the onclick function to activate it with the Javascript

Next we will add our CSS to style this.. lets pick a background color for our body how about yellow. To do this just add background-color:yellow; between these {} after the word body.

Next i want the animals in big letters so lets add a font size to our div add div below the end body tag } in the CSS add these again {} and in between them add font-size:24px;

Now we are ready for our JavaScript. We will start by creating a variable or var for our array or list of animals. We do this by writing var animal= ['dog','cat'] make sure to place each in ' ' and add a comma between each.

Now we add our function we will call it newAnimal it will need these () then { this. Next we do the random magic using this randomNumber=Math.floor(Math.random()*(5)); where you see the # this should match the number of animals in our array.

Finally we add this document.getElementById('animal').innerHTML=animal[randomNumber]; to write each animal randomly onclick to our screen. Dont forget the } closing tag.

And now you have a random machine you can change up the theme and styles as you like.

Here is a simple template you can copy and use to do this yourself. Random Animal Template

If you have any questions you can ask in comments on this code
Thanks i hope you enjoy and Happy Coding!!!🙂