Wednesday, December 12, 2018

How to Make a Color Game Using HTML and JavaScript

color_game.html

<!doctype html>
<html>
<head>
<title>Color||Game</title>
<link rel="stylesheet" href="color_game.css" type="text/css">
</head>
<body>

<div id="container">
<div id="tools">
<button onclick="changeRed()">RED</button>
<button onclick="changeBlue()">BLUE</button>
<button onclick="changeYellow()">YELLOW</button>
<button onclick="changeGreen()">GREEN</button>
</div>
<div id="back"></div>
<div id="tools">
<button onclick="changePink()">PINK</button>
<button onclick="changeOrange()">ORANGE</button>
<button onclick="changeWhite()">WHITE</button>
<button onclick="changeBlack()">BLACK</button>
</div>
</div>



<script>
function changeRed(){
document.getElementById('back').style.backgroundColor="red";
}
function changeBlue(){
document.getElementById('back').style.backgroundColor="blue";
}
function changeYellow(){
document.getElementById('back').style.backgroundColor="yellow";
}
function changeGreen(){
document.getElementById('back').style.backgroundColor="green";
}
function changePink(){
document.getElementById('back').style.backgroundColor="pink";
}
function changeOrange(){
document.getElementById('back').style.backgroundColor="orange";
}
function changeWhite(){
document.getElementById('back').style.backgroundColor="white";
}
function changeBlack(){
document.getElementById('back').style.backgroundColor="black";
}
</script>

</body>
</html>



color_game.css

#container{
width:600px;
height:300px;
background-color:#cc00ff;
padding:70px;
margin:auto;
}
#tools{
width:150px;
height:300px;
float:left;
background-color:#ff6666;
padding:20px;
}
#back{
padding:20px;
width:150px;
height:300px;
float:left;
background-color:powderblue;
}

button{
width:150px;
height:50px;
margin: 12px;
}





0 comments:

Post a Comment