Introduction to Coding HTML | CSS | JS
JavaScript is used to programme the behaviour of web pages
codepen.io
Animal Name Generator:
HTML
<body>
<h1 id="text">Animal Name Generator</h1>
<div id="generator">
<div id="placeholder"></div>
<input type="button" value="Generate name" onclick="generator()" />
</div>
</div>
</body>
CSS
#text {
text-align: center;
font-family: verdana;
}
#wrapper {
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
margin: 0 auto;
padding: 0 20px;
width: 700px
}
#generator {
background: pink;
border: 3px solid #cccccc;
margin: 30px 0;
font-size: 28px;
font-weight: bold;
padding: 50px 0 20px;
text-align: center;
}
#generator input {
font-size: 16px;
font-weight: normal;
margin-top: 30px;
}
JS
function generator() {
var first = ["Prickly", "Scaredy", "Curious", ];
var last = ["Porcupine", "Sheep", "Cat",]
var randomNumber1 = parseInt(Math.random() * first.length);
var randomNumber2 = parseInt(Math.random() * last.length);
var name = first[randomNumber1] + " " + last[randomNumber2];
if (document.getElementById("result")) {
document.getElementById("placeholder").removeChild(document.getElementById("result"));
}
var element = document.createElement("div");
element.setAttribute("id", "result");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholder").appendChild(element);
}