Random Animal Generator Tutorial
Random Animals Generator Tutorial using HTML5, CSS, and JavaScript
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
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>
<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....
Comments
Post a Comment