skhavari/fax.html

## fax.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Fax Image Maker</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css" />
        <style>
            html,
            body {
                width: 100vw;
                height: 100vh;
                margin: 0;
                padding: 0;
            }

            body {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(128, 128, 128, 0.1);
            }

            #grid {
                display: grid;
                gap: 5px;
            }

            #grid input[type='text'] {
                align-self: center;
                margin-left: 30px;
            }

            .cell {
                border: 1px solid gainsboro;
                background-color: white;
                border: none;
                border-radius: 5px;
                width: 30px;
                height: 30px;
                transition: background-color 150ms linear;
            }
        </style>
    </head>
    <body>
        <div class="modal is-active">
            <div class="modal-content">
                <div class="field">
                    <label for="widthInput" class="label">Width</label>
                    <div class="control">
                        <input autofocus class="input" type="number" id="widthInput" value="5" />
                    </div>
                </div>
                <div class="field">
                    <label for="heightInput" class="label">Height</label>
                    <div class="control"><input class="input" type="number" id="heightInput" value="5" /></div>
                </div>
                <div class="control">
                    <button class="button is-link" id="submit">Submit</button>
                </div>
            </div>
        </div>
        <div id="grid"></div>
    </body>
    <script>
        const colors = ['white', 'black'];
        const nullEl = document.createElement('null');
        let gridEl = document.getElementById('grid');
        let modalEl = document.body.querySelector('div.modal');
        let submitEl = document.getElementById('submit');
        let widthInputEl = document.getElementById('widthInput');
        let heightInputEl = document.getElementById('heightInput');

        const updateRow = (text, elements) => {
            let vals = text
                .split(',')
                .map((x) => x.trim())
                .filter((x) => x.length > 0)
                .map((x) => Math.floor(Number(x)))
                .filter((x) => isFinite(x));

            vals.forEach((runLength, idx) => {
                for (var j = 0; j < runLength; j++) {
                    let el = elements.shift() || nullEl;
                    el.style.backgroundColor = colors[idx % 2];
                }
            });

            elements.forEach((el) => (el.style.background = 'white'));
        };

        const makeGrid = (width, height) => {
            const makeCellEl = () => {
                let cell = document.createElement('div');
                cell.classList.add('cell');
                return cell;
            };

            const makeInputEl = (rowElements) => {
                let input = document.createElement('input');
                input.type = 'text';
                input.classList.add('input', 'is-normal', 'is-small');
                input.addEventListener('input', () => updateRow(input.value, [...rowElements]));
                return input;
            };

            let frag = document.createDocumentFragment();

            for (var h = 0; h < height; h++) {
                let rowElements = [];
                for (var w = 0; w < width; w++) {
                    let cell = makeCellEl();
                    rowElements.push(cell);
                    frag.appendChild(cell);
                    if (w === width - 1) {
                        frag.appendChild(makeInputEl(rowElements));
                    }
                }
            }

            gridEl.innerHTML = '';
            gridEl.style.gridTemplateRows = `repeat(${height}, auto)`;
            gridEl.style.gridTemplateColumns = `repeat(${width}, auto) auto`;
            gridEl.appendChild(frag);
        };

        submitEl.addEventListener('click', () => {
            modalEl.classList.remove('is-active');
            makeGrid(widthInputEl.valueAsNumber, heightInputEl.valueAsNumber);
        });
    </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Fax Image Maker</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css" />
	<style>
	html,
	body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	}

	body {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(128, 128, 128, 0.1);
	}

	#grid {
	display: grid;
	gap: 5px;
	}

	#grid input[type='text'] {
	align-self: center;
	margin-left: 30px;
	}

	.cell {
	border: 1px solid gainsboro;
	background-color: white;
	border: none;
	border-radius: 5px;
	width: 30px;
	height: 30px;
	transition: background-color 150ms linear;
	}
	</style>
	</head>
	<body>
	<div class="modal is-active">
	<div class="modal-content">
	<div class="field">
	<label for="widthInput" class="label">Width</label>
	<div class="control">
	<input autofocus class="input" type="number" id="widthInput" value="5" />
	</div>
	</div>
	<div class="field">
	<label for="heightInput" class="label">Height</label>
	<div class="control"><input class="input" type="number" id="heightInput" value="5" /></div>
	</div>
	<div class="control">
	<button class="button is-link" id="submit">Submit</button>
	</div>
	</div>
	</div>
	<div id="grid"></div>
	</body>
	<script>
	const colors = ['white', 'black'];
	const nullEl = document.createElement('null');
	let gridEl = document.getElementById('grid');
	let modalEl = document.body.querySelector('div.modal');
	let submitEl = document.getElementById('submit');
	let widthInputEl = document.getElementById('widthInput');
	let heightInputEl = document.getElementById('heightInput');

	const updateRow = (text, elements) => {
	let vals = text
	.split(',')
	.map((x) => x.trim())
	.filter((x) => x.length > 0)
	.map((x) => Math.floor(Number(x)))
	.filter((x) => isFinite(x));

	vals.forEach((runLength, idx) => {
	for (var j = 0; j < runLength; j++) {
	let el = elements.shift() \|\| nullEl;
	el.style.backgroundColor = colors[idx % 2];
	}
	});

	elements.forEach((el) => (el.style.background = 'white'));
	};

	const makeGrid = (width, height) => {
	const makeCellEl = () => {
	let cell = document.createElement('div');
	cell.classList.add('cell');
	return cell;
	};

	const makeInputEl = (rowElements) => {
	let input = document.createElement('input');
	input.type = 'text';
	input.classList.add('input', 'is-normal', 'is-small');
	input.addEventListener('input', () => updateRow(input.value, [...rowElements]));
	return input;
	};

	let frag = document.createDocumentFragment();

	for (var h = 0; h < height; h++) {
	let rowElements = [];
	for (var w = 0; w < width; w++) {
	let cell = makeCellEl();
	rowElements.push(cell);
	frag.appendChild(cell);
	if (w === width - 1) {
	frag.appendChild(makeInputEl(rowElements));
	}
	}
	}

	gridEl.innerHTML = '';
	gridEl.style.gridTemplateRows = `repeat(${height}, auto)`;
	gridEl.style.gridTemplateColumns = `repeat(${width}, auto) auto`;
	gridEl.appendChild(frag);
	};

	submitEl.addEventListener('click', () => {
	modalEl.classList.remove('is-active');
	makeGrid(widthInputEl.valueAsNumber, heightInputEl.valueAsNumber);
	});
	</script>
	</html>