NoJS – Creating a calculator with only HTML and CSS(blog.scottlogic.com)
blog.scottlogic.com
NoJS – Creating a calculator with only HTML and CSS
https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html
47 comments
Nice 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
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
There's a link to the calculator in the first paragraph.
sadly, it has rounding errors if you multiply by 0.xxx
Hi,
Please could you give me the exact input, wrong answer and also browser?
Thank you:)
Please could you give me the exact input, wrong answer and also browser?
Thank you:)
In 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.
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.
Ah 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
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
? It doesn’t even allow non-integer numbers.
It does not work in Firefox: https://github.com/QuarkNerd/noJS. It's not clear why though.
Firefox doesnt support @property
Which is what I'm using to round down and calculate the decimals
It does, but you have to enter a digit first (0 is fine) in order to see the decimal point button.
Ah so there is, thanks! I suppose at the time I wasn't so interested (I have a calculator) but by the end of the post I wanted to see it all come together, and unless I missed that too there isn't a link there.
Do yourself a favor and try dividing by zero!
99999 * 9999 also yields wrong result
Hi,
What browser and device are you on? And what result does it show
What browser and device are you on? And what result does it show
I feel like this thread is my job in microcosm :D
For 99999 x 9999:
Firefox 96 displays 999889984
Edge 97 displays 999890001
The answer should be 999890001, so Edge is right and Firefox is wrong
Firefox 96 displays 999889984
Edge 97 displays 999890001
The answer should be 999890001, so Edge is right and Firefox is wrong
Multiplying the 32bit floats 99999.0f and 9999.0f results in 999889984 (Firefox's result). So I guess this hints at what Firefox might be doing :)
Float multiplication's result: https://godbolt.org/z/q857f51GP
Float multiplication's result: https://godbolt.org/z/q857f51GP
Thanks,
> 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.
Welp, I was a pretty heartless bastard back in the days of getting my first scientific calculator.
I’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>
<input type="reset" value="C">
Hi,
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
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]
How 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`?
Unfortunately, it does not seem to work on Firefox for Android. Pressing any digit will always produce a 0 value
> Why make this?
> Why not?
Yes, please
Yes, please
Now make it accessible
Are we Turing yet with CSS?
Why?
You can even do this with pure HTML, no CSS or JavaScript! Server-side processing sometimes seems underutilized and forgotten.
But then you need an active server.
how else do you serve an html page?
Create 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.
Maybe "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.
From a CDN. By "active" I meant like, a server that does stuff other than serve content, that processes pages.
https://github.com/SLaks/Silon