sheet.html

<meta charset=utf-8>
<style>
main {
	font-family: arial;
	text-align: center;
}
h1 {
	margin-top: 5em;
}
mark {
	background: #fe5;
	padding: 3px;
}
p {
	margin: 3px auto;
}
pre {
	font-family: courier;
	margin: auto;
	background: #def;
	padding: 15px;
	border-radius: 10px;
	white-space: pre-wrap;
	max-width: 780px;
}
#grid {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 0px;
	grid-auto-rows: minmax(2.8em, auto);
	margin-top: 3em;
	border: 2px solid #e0e0e0;
}
form {
	margin: 0;
	padding: 0;
	display: inline-grid;
}
input {
	font-size: 1.5em;
	min-width: 40px;
	border: 2px solid #e0e0e0;
}
footer {
	margin-top: 5em;
}
</style>

<main>

<h1>Sheet</h1>

<p><a href=//github.com/xem/sheet>inspired by this golfing</a></p>


<section>

	<p>Cells can contain text, numbers or formulas.</p>
	<p>Formulas start with =. Example: "=A1+8*B2".</p>

	<div id="grid"></div>

</section>

<script>
		const a = "ABCDE";
		const graph = {}; // id => {refs: setOfIds, deps: setOfIds, cell: currentCell, value: initalValue}

		// todo logs stuff
		const update = id => {
			const node = graph[id];
			const cellValue = node.cell.value.trim();

			node.value = undefined;

			// remove previous deps/refs
			node.refs.forEach(x => {
				graph[x].deps.delete(id);
			});
			node.refs = new Set();

			if (cellValue[0] === '='){
				node.value = cellValue;

				const refs = cellValue.match(/[A-Z]\d/g) || [];

				// update graph
				node.refs = new Set(refs);
				refs.forEach(x => {
					graph[x].deps.add(id);
				});

				if (node.refs.has(id)) {
					return node.cell.value = '#REF';
				}

				try {
					const evaling = cellValue.slice(1).replace(/[A-Z]\d/g, x => graph[x].cell.value || 0);
					const evaled = eval(evaling);
					node.cell.value = evaled;
				} catch(e){
					node.cell.value = NaN;
					console.error(e);
				}
			}
		};

		const calc = (id, visited = new Set()) => {
			const node = graph[id];
			if (visited.has(id)) {
				n.cell.value = '#REF';
				return console.info('loop detected', visited, '->', id);
			}
			visited.add(id);
			node.deps.forEach(x => {
				const n = graph[x];
				try {
					n.cell.value = eval(n.value.trim().slice(1).replace(/[A-Z]\d/g, x => graph[x].cell.value || 0));
				} catch(e) {
					n.cell.value = NaN;
				}
				calc(x, visited); // recurse down
			});
		};

		for (const j in a) {
			for (const i in a) {
				const id = a[j]+(+i+1);
				const input = document.createElement('input');
				input.placeholder = id;
				input.onfocus = e => { // show formula if any
					e.target.value = graph[id].value || e.target.value
				};
				input.onblur = e => {
					update(id);
					calc(id);// update deps
				};
				input.onkeydown = e => {
					if (e.key !== 'Enter') return;
					// focus next cell
					const next = input.nextElementSibling || grid.firstElementChild;
					next.focus();
				};
				grid.append(input);
				graph[id] = { refs: new Set(), deps: new Set(), cell: input };
			}
		}
</script>


</main>