Make Color Game Application
<!DOCTYPE html>
<html>
<head>
<Style>
#tool{
height:600px;
width:20%;
float:left;
background-color:white;
}
#back{
height:600px;
width:80%;
float:left;
background-color:blue;
}
#ball{
height:100px;
width:100px;
float:left;
background-color:chocolate;
border-radius:50%;
}
button{
height:55px;
width:70px;
font-size:15px;
background-color:green;
}
</style>
</head>
<body>
<div id="tool">
<button id='red' onclick="red()">red</button>
<button id='blue' onclick="blue()">blue</button>
<button id='black' onclick="black()">black</button>
<button id='yellow' onclick="yellow()">yellow</button>
</div>
<div id="back">
<marquee direction="left" behavior="alternate">
<marquee direction="up" behavior="alternate" height="400px">
<div id="ball"></div>
</marquee></marquee>
</div>
<script>
function red(){
document.getElementById('back').style.backgroundColor="red";
document.getElementById('red').style.backgroundColor="red";
document.getElementById('blue').style.backgroundColor="pink";
document.getElementById('black').style.backgroundColor="pink";
document.getElementById('yellow').style.backgroundColor="pink";
document.getElementById('red').innerHTML="Hi! Red";
}
function blue(){
document.getElementById('back').style.backgroundColor="blue";
document.getElementById('blue').style.backgroundColor="blue";
document.getElementById('red').style.backgroundColor="yellow";
document.getElementById('black').style.backgroundColor="yellow";
document.getElementById('yellow').style.backgroundColor="yellow";
document.getElementById('blue').innerHTML="Hi! Blue";
}
function black(){
document.getElementById('back').style.backgroundColor="black";
document.getElementById('black').style.backgroundColor="black";
document.getElementById('red').style.backgroundColor="yellow";
document.getElementById('yellow').style.backgroundColor="yellow";
document.getElementById('blue').style.backgroundColor="yellow";
}
function yellow(){
document.getElementById('back').style.backgroundColor="yellow ";
document.getElementById('white').style.backgroundColor="white";
document.getElementById('black').style.backgroundColor="green";
document.getElementById('blue').style.backgroundColor="green";
document.getElementById('red').style.backgroundColor="green";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<Style>
#tool{
height:600px;
width:20%;
float:left;
background-color:white;
}
#back{
height:600px;
width:80%;
float:left;
background-color:blue;
}
#ball{
height:100px;
width:100px;
float:left;
background-color:chocolate;
border-radius:50%;
}
button{
height:55px;
width:70px;
font-size:15px;
background-color:green;
}
</style>
</head>
<body>
<div id="tool">
<button id='red' onclick="red()">red</button>
<button id='blue' onclick="blue()">blue</button>
<button id='black' onclick="black()">black</button>
<button id='yellow' onclick="yellow()">yellow</button>
</div>
<div id="back">
<marquee direction="left" behavior="alternate">
<marquee direction="up" behavior="alternate" height="400px">
<div id="ball"></div>
</marquee></marquee>
</div>
<script>
function red(){
document.getElementById('back').style.backgroundColor="red";
document.getElementById('red').style.backgroundColor="red";
document.getElementById('blue').style.backgroundColor="pink";
document.getElementById('black').style.backgroundColor="pink";
document.getElementById('yellow').style.backgroundColor="pink";
document.getElementById('red').innerHTML="Hi! Red";
}
function blue(){
document.getElementById('back').style.backgroundColor="blue";
document.getElementById('blue').style.backgroundColor="blue";
document.getElementById('red').style.backgroundColor="yellow";
document.getElementById('black').style.backgroundColor="yellow";
document.getElementById('yellow').style.backgroundColor="yellow";
document.getElementById('blue').innerHTML="Hi! Blue";
}
function black(){
document.getElementById('back').style.backgroundColor="black";
document.getElementById('black').style.backgroundColor="black";
document.getElementById('red').style.backgroundColor="yellow";
document.getElementById('yellow').style.backgroundColor="yellow";
document.getElementById('blue').style.backgroundColor="yellow";
}
function yellow(){
document.getElementById('back').style.backgroundColor="yellow ";
document.getElementById('white').style.backgroundColor="white";
document.getElementById('black').style.backgroundColor="green";
document.getElementById('blue').style.backgroundColor="green";
document.getElementById('red').style.backgroundColor="green";
}
</script>
</body>
</html>
1 Comments
interesting colour game application
ReplyDelete