10 ms·
NoJS – Creating a calculator with only HTML and CSS
- sisjohn 5y agoIt would be interesting to create complex mathematical computations and finding a solution without the proper help of JS.
- postalrat 5y agoIt would be a good way to build an appreciation how javascript makes things simple.
- alsalegend 5y ago
- tannhaeuser 5y agoAre we Turing yet with CSS?
- OJFord 5y agoNice write-up, shame there's not a demo embedded (but understandable, bet that would be a hassle to work out on our blog too; too much for a one-off). Also quite entertaining to click through to ScottLogic's home page after that, where the strapline for what they do is: > Pragmatic solutions to complex software challenges
- tgv 5y agoThere's a link to the calculator in the first paragraph.
- Israduscias 5y agosadly, it has rounding errors if you multiply by 0.xxx
- Garora 5y agoHi, Please could you give me the exact input, wrong answer and also browser? Thank you:)
- nomel 5y agoIn Safari 15.2, everything is rounded down. 1/2 = 0, 8/9 = 0. Also, it's not possible to type decimal numbers and have them displayed, although it appears they are actually being used internally. Initially, the "." button is disabled. If you press 0, then the "." button is enabled, disappears when clicked (good up to here), but then clicking any of the numbers don't change the display. So, typing "0.9 + 0.9" will look like "0 + 0" and will equal 1 (which is 1.8, rounded down). Also, if you click enough numbers, the numbers are disabled (as usual). So, the displayed state isn't matching the internal state, it appears.
- Garora 5y agoAh yes, safari. I should be able to fix the rounding errors. I should disable the decimals completely in safari as my method of getting decimals isnt supported yet. (@property). Thank you so much for the feedback
- s_gourichon 5y ago? It doesn’t even allow non-integer numbers.
- 5y ago
- o_m 5y agoNow make it accessible
- nathell 5y agoDo yourself a favor and try dividing by zero!
- sockpuppet69 5y ago
- illegalmemory 5y ago99999 * 9999 also yields wrong result
- Garora 5y agoHi, What browser and device are you on? And what result does it show
- 5350-uiop-1130 5y agoI feel like this thread is my job in microcosm :D
- hbirler 5y agoFor 99999 x 9999: Firefox 96 displays 999889984 Edge 97 displays 999890001 The answer should be 999890001, so Edge is right and Firefox is wrong
- joelbondurant1 5y ago
- geoffeg 5y agoYou can even do this with pure HTML, no CSS or JavaScript! Server-side processing sometimes seems underutilized and forgotten.
- antihero 5y agoBut then you need an active server.
- soperj 5y agohow else do you serve an html page?
- jaywalk 5y agoMaybe "active server" wasn't the best term, but he's obviously talking about a server that does more than just serve static files off a disk.
- astrobe_ 5y agoCreate an html page with notepad, click on it, maybe tel Windows to open it with a browser (same or similar with most Linux desktops). It does execute in-page JS scripts too, at the very least.
- antihero 5y agoFrom a CDN. By "active" I meant like, a server that does stuff other than serve content, that processes pages.
- Minor49er 5y agoUnfortunately, it does not seem to work on Firefox for Android. Pressing any digit will always produce a 0 value
- joelbondurant1 5y ago
- chrismorgan 5y agoI’m disappointed with the reset button: it uses a dangling label inside a link, which reloads the page: <a href="./calc.html"> <label for="reset">C</label> </a> Rather than just using the formerly-ubiquitous but now rare beast (I think I saw exactly one last year), a reset button: <input type="reset" value="C"> To keep the CSS simple (!), you could even keep using the label (though ditch the <a> wrapping) and just chuck an invisible <input type=reset id=reset> in with the radio buttons, if you really want. Then the label would dangle no more.
- Garora 5y agoHi, Thanks for this. I did have this earlier in the development but it didnt properly work. I'll go back to this and try again
- deleted 5y ago[deleted]
- adamredwoods 5y agoI thought this would be implemented by recreating a calculator logic gates using nothing but css selectors. https://github.com/SLaks/Silon https://github.com/SLaks/Silon
- raxor53 5y ago> Why make this? > Why not? Yes, please
- dexwiz 5y agoHow long before all these CSS tricks come together to make a easily abusable injection mechanism? I know the `url()` mechanism is already abusable, but what about a small VM executed via `var` and `calc`?
- danielovichdk 5y agoWhy?
- DaveSchmindel 5y ago> Well, everytime you divide by zero, a puppy dies. Welp, I was a pretty heartless bastard back in the days of getting my first scientific calculator.