Random Background Color

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8">
        <title>Random Background Color</title>

        <style>
            html, body {
                min-width: 100vw;
                min-height: 100vh;
                margin: 0 auto;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .container {
                min-width: 90%;
                position: relative;
                text-align: center;
            }

            .colorInfo {
                font-size: 17pt;
            }
            .colorInfo .currentColor {
                font-size: 20pt;
                font-weight: bold;
            }

            .button {
                padding: 7px;
                border-radius: 5px;
                border: none;
                font-size: 13pt;

                background-color: #111;
                color: #fff;
            }
            .button:hover {cursor: pointer}
            .button:active {background: #000}

            @media (min-height: 800px) {
                .colorInfo {
                    font-size: 32pt;
                }

                .colorInfo .currentColor {
                    font-size: 35pt;
                }

                .button {
                    padding: 19px;
                    font-size: 25pt;
                }
            }
        </style>
    <head>
    <body>

        <main role="main">
            <div class="container">
                <p class="colorInfo">The background color is: <span id="currentColor" class="currentColor">#FFFFFF</span></p>

                <button id="btnChangeBackground" class="button">Change the background color</button>
            </div>
        </main>

        <script type="text/javascript">
            const button = document.querySelector('#btnChangeBackground')
            const currentColor = document.querySelector('#currentColor')
            const body = document.body
            const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']

            button.addEventListener('click', changeBackground)

            function changeBackground() {
                let hex = generateRandomHex()

                body.style.backgroundColor = hex
                currentColor.textContent = hex;
            }

            function generateRandomHex() {
                let random,
                    hex = '#';
                for (let i = 0, l = hexNumbers.length; i < 6; i++) {
                    random = Math.round(Math.random() * (l - 1))
                    hex += hexNumbers[random]
                }
                return hex
            }
        </script>
    </body>
</html>