4 ms·
I like superkuh’s suggestion to serve the spreadsheeets directly, so you don’t need to worry about converting the “calculators” to another language. If you do
by divbzero 4y ago
I like superkuh’s suggestion to serve the spreadsheeets directly, so you don’t need to worry about converting the “calculators” to another language.
If you do want to go through the trouble of converting to another language, JavaScript would be the natural choice because it can run directly in the browser with just “a few static assets to host”. A template like the following would probably work fine as something simple and functional. (This should be a working example if you save the files to a directory and load foo.html in the browser.)
foo.js:
function foo(a, b, c) {
// do calculations and return output
return a + b + c;
}
foo.html:
<!doctype html>
<meta charset=utf-8>
<title>Foo Calculator</title>
<link rel=stylesheet href=https://cdn.simplecss.org/simple.css>
<main>
<h1>Foo Calculator</h1>
<label for=a>A</label>
<input type=number id=a>
<label for=b>B</label>
<input type=number id=b>
<label for=c>C</label>
<input type=number id=c>
<label for=z>Z</label>
<output id=z></output>
</main>
<script src=foo.js></script>
<script>
// calculate output when any input changes
a.oninput = b.oninput = c.oninput = function () {
z.value = foo(
Number(a.value),
Number(b.value),
Number(c.value),
);
};
</script>
a, b, c, z, and foo will be global variables in foo.html so make sure they have unique names.
simple.css could also be replaced with other classless CSS frameworks.
- LostRick 4y agoVery nice. I'm curious how far it could go. <table contenteditable> a1.innertext = eval(a2.innerText)
- jrururufuf666 4y agoTHIS is a helpful straightforward answer!!! simple, to the point. the rest on here shows how the wheel gets reinvented over and over and everyone wants to use ever-bigger frameworks to shot flamethrowers on a fly.
- divbzero 4y agoI think ”persist the input in the URL query string” could also be doable with static assets alone. The last <script> block in foo.html would need to be replaced with something like: <script> // calculate output and update query string when any input changes a.oninput = b.oninput = c.oninput = function () { z.value = foo( Number(a.value), Number(b.value), Number(c.value), ); var params = new URLSearchParams(); if (a.value) params.set('a', a.value); if (b.value) params.set('b', b.value); if (c.value) params.set('c', c.value); history.replaceState(null, '', '?' + params); }; // fill in input from query string when page is loaded var params = new URLSearchParams(location.search); a.value = params.get('a'); b.value = params.get('b'); c.value = params.get('c'); a.oninput(); </script>
- night_ship 4y agoa.oninput = b.oninput = c.oninput = function () { That is one slick anonymous event handler... would never have thought of that having first learned listeners in the days of Java AWT/Swing addActionListener(new ActionListener()
- solardev 4y agoThis is great! SimpleCSS makes it look good, and the straightforward code means it's fast, easy to understand, and super quick to load.