02_background_es6.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Color Change</title>
</head>

<body>
    <button id="btnColorChange">Click Me!</button>
</body>
<script>
    const btnChangeColor = document.querySelector('#btnColorChange');
    const body = document.querySelector('body');

    const bgColors = [
        'red',
        'blue',
        'green',
        'yellow',
        'purple',
    ];

    // Get a random number between 1 and 20
    let randomNumber = (max) => Math.floor(Math.random() * Math.floor(max));

    // Change the background color
    let changeColor = () => {
        body.style.backgroundColor = bgColors[randomNumber(bgColors.length)];
    }

    btnChangeColor.addEventListener('click', changeColor, false);
    
</script>

</html>