How to Make Color Game Application Using JavaScript? - CodeTextPro | Free Web Tutorial

Codetextpro Provides free Web tutorial, HTML, CSS, C, C++, Java, JavaScript, PHP, MySql, Python, Program, Programming Notes, Programming Questions and more.

Programming

Saturday, December 15, 2018

How to Make Color Game Application Using JavaScript?

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>

1 comment: