html/colors/index.html

<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Generate random colors">
    <meta name="keywords" content="HTML, CSS, JavaScript, Colors">
    <meta name="author" content="Jee Vang, Ph.D.">
    <meta name="organization" content="One-Off Coder">
    <title>Colors</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        * {
            font-family: monospace;
        }

        body {
        }

        .center {
            text-align: center;
        }

        .color-table {
            margin: auto;
            width: calc(100vw - 17px);
        }

        .color-cell {
            width: calc((100vw / 25) - 9px);
            height: calc((100vw / 25) - 9px);
            border-radius: 9%;
            padding: 3px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 4px;
            transform: scale(1, 1);
            transition-duration: .3s;
        }
        .color-cell:hover {
            transform: scale(1.15, 1.15);
        }
    </style>
</head>

<body onload="init()">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Colors!</h1>
            <p class="lead">
                Color generator
            </p>
            <hr class="my-4">
            <p>
                Hit scramble to generate new colors
            </p>
            <p>
                <a href="https://github.com/oneoffcoder/lightning-projects/tree/master/html/colors" target="_blank">
                    Source Code
                </a>
            </p>
            <button type="button" class="btn btn-primary" onclick="scramble()">Scramble!</button>
        </div>
    </div>
    <table id="grid" class="color-table">
    </table>

    <audio id="finished">
        <source src="audio/fairy.mp3" type="audio/mp3">
    </audio>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js" crossorigin="anonymous"></script>
    <script>
        const nRows = 25;
        const nCols = 25;
        const cells = [];
        let isPlayingSound = false;

        function init() {
            const table = document.getElementById('grid');
            for (let r = 0; r < nRows; r++) {
                const tr = table.insertRow(r);
                for (let c = 0; c < nCols; c++) {
                    const td = tr.insertCell(c);
                    const node = document.createElement('div');
                    node.id = `${r}-${c}`;
                    node.classList.add('color-cell');
                    node.style.background = getRandomColor();
                    td.appendChild(node);
                    cells.push(node);
                }
            }

            const sound = document.getElementById('finished');
            sound.addEventListener('ended', () => {
                sound.currentTime = 0;
                isPlayingSound = false;
            });

            updateColors();
        }

        function updateColors() {
            cells.forEach((e, i) => {
                e.style.background = getRandomColor();
            });
        }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function playSound() {
            const sound = document.getElementById('finished');
            sound.play();
        }

        function scramble() {
            if (isPlayingSound) {
                return;
            }

            isPlayingSound = true;
            playSound();
            updateColors();
        }
    </script>
</body>

</html>