5 ms·
I get a little frustrated, because the web is AMAZING for this. Type this in anywhere. Anywhere! <input id=foo></input> <input id=bar></input> <button on
by jkaptur 4y ago
I get a little frustrated, because the web is AMAZING for this. Type this in anywhere. Anywhere!
<input id=foo></input>
<input id=bar></input>
<button onclick="sum()">sum</button>
<div id=result></div>
<script>
function sum() {
result.innerText = parseFloat(foo.value) + parseFloat(bar.value);
}
</script>
That's full of "bad practices" but for the use case you're talking about, who cares?
- arghwhat 4y agoUnfortunately, nobody codes web apps like that. If they did they web probably wouldn't be that bad. Instead they whip out React and because native browser elements apparently are the devil they add tailwind/material design/bootstrap/whatever on top. Once you do it that way, the web approach honestly ends up as complex or worse than many of the alternatives...
- hasperdi 4y agoThat way doesn't scale well. Things become very messy and unmaintainable really quickly. This is how people code in the past, and there are good reasons why people moved on.
- arghwhat 4y agoCode becomes unmaintainable when it was organized poorly and grows or if discipline was not maintained during growth. React projects are just as susceptible to that, and "modern" web development is quite frankly a larger maintainability headache due to the dependency hell they bring.
- SCLeo 4y agoActually I do. Whenever I need a small tool like a calculator for a video game or a simple GUI program for processing images, I always go for a barebones single html file web application. For example, this is a simple visualizer for different numerical integrators that I wrote in a day or two for a college course: https://scleox.github.io/integrator-visualizer/index.html https://scleox.github.io/integrator-visualizer/index.html. The the source code is just one single html file: https://github.com/SCLeoX/integrator-visualizer/blob/master/index.html https://github.com/SCLeoX/integrator-visualizer/blob/master/...
- robin_reala 4y agoSide note, but can I introduce you to the <output> element? You can just set its value instead of its innerText. It’s perfect for calculators. https://html.spec.whatwg.org/multipage/form-elements.html#the-output-element https://html.spec.whatwg.org/multipage/form-elements.html#th...
- jkaptur 4y agoTIL - thanks!
- gavinray 4y agoWhat?! TIL, thanks.
- robocat 4y agoInteresting. MDN link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ou...
- noSyncCloud 4y agoNot supported by IE so we can't use it :( /s
- hasperdi 4y agoIE is outdated and unsupported by the maker. Time to let it die.
- radiojasper 4y agoPlease learn what /s means :)
- hasperdi 4y ago/shutup?
- SCLeo 4y agoJust one more quick tip, you should probably use the unary operator "+" to convert strings to float. `parseFloat('2,000')` gives 2, which is probably not expected, while `+'2,000'` gives NaN indicating the input format is not recognized.