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;
}
<!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