grid.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<script>

document.addEventListener('DOMContentLoaded', function() {

    function generatePalette(amount) {

        var result = [];

        var hueStep = 360 / amount;

        for (var i = 0; i < amount; ++i)

            result.push('hsl(' + (hueStep * i) + ', 100%, 90%)');

        return result;

    var palette = generatePalette(100);

    for (var i = 0; i < 200; ++i) {

        var box = document.createElement('div');

        box.classList.add('box');

        box.style.setProperty('background-color', palette[i % palette.length]);

        var x = i;

        do {

            var digit = x % 10;

            x = (x / 10)|0;

            var img = document.createElement('img');

            img.src = `./digits/${digit}.png`;

            box.insertBefore(img, box.firstChild);

        } while (x);

        document.body.appendChild(box);

});

</script>

<style>

:root {

  scrollbar-width: none;

body {

    margin: 0;

    padding: 0;

.box {

    font-family: arial;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    width: 50px;

    height: 50px;

    box-sizing: border-box;

    border: 1px solid darkgray;