NoJS – Creating a calculator with only HTML and CSS | Hacker News Reader

NoJS – Creating a calculator with only HTML and CSS

blog.scottlogic.com

138 pointsColinEberhardt42 comments

I thought this would be implemented by recreating a calculator logic gates using nothing but css selectors.

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

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:)

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.

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

? 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

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

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

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.

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>

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.

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

It would be interesting to create complex mathematical computations and finding a solution without the proper help of JS.

It would be a good way to build an appreciation how javascript makes things simple.

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

I'll take a look at this. Firefox will not get all functionally. But I should be able to get stuff without decimals working.

works for me (But I use Fennec from F-Droid)

I haven't heard of Fennec before. What do you like about it over vanilla Firefox?

> Why make this? > Why not?

Yes, please

Now make it accessible

Are we Turing yet with CSS?

Yes, if combined with html and if you "move" the tape by clicking elements

Technically even constant mouse movement could suffice.

Yes. CSS is Turing complete.

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.

Reply on news.ycombinator.com