Javascript small projects -1

Background Color random changes :

Run this code:-

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
button{
background:
linear-gradient(45deg,rgb(76,0,255),transparent);
position: absolute;
top:40%;
left: 40%;
padding: 22px 50px;
border-radius: 50px;
font-size: 16px;
font-family: cursive;
box-shadow: 0px 0px 6px;
}
*:focus{
outline: none;
}
</style>
    </head>
<body>
<div id="container">
<button id="btn">Click me</button>
</div>
<script>
var btn = document.querySelector("button");
var body = document.querySelector('body')
var colors  = ['red', 'green', 'blue','yellow','orange','carmine','maroon','black','white'];
body.style.backgroundColor = 'violet';
btn.addEventListener('click', changeBackground)
function changeBackground() {
var colorIndex = parseInt(Math.random() * colors.length)
body.style.backgroundColor = colors[colorIndex];
}
</script>
</body>
</html>

output:


                              
                                                          ********************

Comments

Popular Posts