Source Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg color changer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<button>Whoosh!</button>
</section>
<script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
button{
border: 5px groove lightcoral;
outline: none;
background-color: rgb(110, 59, 168);
font-size: 26px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
cursor: pointer;
padding: 24px;
border-radius: 35px;
background: linear-gradient(145deg, #6b2494, #3d1070);
}
Code language: CSS (css)
app.js
const button = document.querySelector('button');
const bge = document.querySelector('section');
button.addEventListener('click',() => {
let col = "#";
col+=Math.random().toString(16).slice(2,8);
bge.style.backgroundColor = col;
})
Code language: JavaScript (javascript)