Random Animal Generator Tutorial

CyberLink

Random Animals Generator Tutorial using HTML5, CSS, and JavaScript






     Today we will build an awesome beginner code to create a Random Animals Generator.

We start by telling the computer we are using HTML

<!DOCTYPE html>

Next we place our opening HTML tag

<html>

This is our head tag where we place the title

    <head>
   
This is our opening and closing title tags it will not be seen on the run screen like our Tags will not show up when ran

        <title>Random Animals</title>
       
This is our closing head tag

    </head>
   
This is our opening body tag this begins the portion that will be seen on the Run Screen
 
    <body>





This is our introduction we are using the H1 or largest header tag. The text placed between the opening <h1> and closing </h1> tags will be seen.
 
    <h1>Random Animals</h1>

 Next we will add our <div> tag including a "id"  for the JavaScript    

             <div id ="animal"</div>

Next we will add a button to change our animal. This button will have an "onclick" function to work with the JavaScript.

<button onclick="newAnimal()">New Animal</button>

*The text between the >< will appear on the button

Finally we close the body then the HTML
</body>
       </html>

Now we are ready for our CSS to add style to our elements.

body{
     background-color:yellow;
}

div{
     font-size:24px;
}

Now for our JavaScript this is what will give action to our program. First we will create a variable for our array.  

var animal=['dog','cat'];

Next we will add our function to create random numbers we will call it newAnimal

newAnimal(){
 randomNumber=Math.floor(Math.random()*(5));
document.getElementById('animal').innerHTML=animal[randomNumber];}



Random Animals

Random Animals






Source Code


HTML with CSS and JavaScript

<!DOCTYPE html>
<html>
    <head>
    <title>Random Animals</title>
    <style>
        body {
    background-color:yellow;
}
        div {
   font-size:24px;
}
    </style>
    </head>
    <body>

    <h1>Random Animals</h1>
 <button onclick="newAnimal()">New Animal</button></div>

<script>
           var animal= ['dog 🐕','cat 🐈','bird 🐦', 'horse 🐎','fish 🐠']

function newAnimal(){
var randomNumber=Math.floor(Math.random()*(5));
    document.getElementById('animal').innerHTML=animal[randomNumber];
}
       </script>
    </body>
</html>


Click here to see the code on Sololearn

That's it congratulations on creating a simple Random Animal Generator. This program can be adapted to create many fun random generators like funny names, jokes, lucky numbers....

More Free Code Examples:

Angular JS Click Counter




Comments

Popular posts from this blog