HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color flipper</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>color flipper</h1>
    <button class="green" onclick="setColor('green')">Green</button>
    <button class="red" onclick="setColor('red')">Red</button>
    <button class="blue" onclick="setColor('blue')">Blue</button>
    <button onclick= "randomColor()">Random</button>

    <script src="style.js"></script>
</body>
</html>


CSS file

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.green{
    background-color: green;
}
.blue{
    background-color: blue;
}
.red{
    background-color: red;
}

button{
    height: 40px;
    width: 100px;
    margin: 5px;
    border-radius: 5px;
}


JavaScript file

const body = document.getElementsByTagName("body") [0];

function setColor (name){
    body.style.backgroundColor = name;
}

function randomColor() {
    const red = Math.round(Math.random() * 255)
    const green = Math.round(Math.random() * 255)
    const blue = Math.round(Math.random() * 255)

    const color = `rgb(${red}, ${green}, ${blue})`
    body.style.backgroundColor = color;
}
randomColor()