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

CodeTextPro.com Provides - Web design, Technology gyan, Digital marketing, Online earnings, Seo, Adsense, Technology news, Motivation and inspiration, Latest Technology Affairs, Gadgets, Blogging

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: