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

by ColinEberhardt • 5 years ago

138 42 5 years ago

blog.scottlogic.com

tannhaeuser• 5 years ago

Are we Turing yet with CSS?

nso95• 5 years ago

Yes. CSS is Turing complete.

SahAssar• 5 years ago

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

myfonj• 5 years ago

Technically even constant mouse movement could suffice.

sisjohn• 5 years ago

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

postalrat• 5 years ago

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

OJFord2• 5 years ago

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

tgv• 5 years ago

There's a link to the calculator in the first paragraph.

Israduscias• 5 years ago

sadly, it has rounding errors if you multiply by 0.xxx

OJFord2• 5 years ago

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.

o_m• 5 years ago

Now make it accessible

nathell• 5 years ago

Do yourself a favor and try dividing by zero!

illegalmemory• 5 years ago

99999 * 9999 also yields wrong result

Garora7• 5 years ago

Hi,

What browser and device are you on? And what result does it show

geoffeg• 5 years ago

You can even do this with pure HTML, no CSS or JavaScript! Server-side processing sometimes seems underutilized and forgotten.

antihero2• 5 years ago

But then you need an active server.

soperj• 5 years ago

how else do you serve an html page?

chrismorgan• 5 years ago

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.

Garora7• 5 years ago

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

Minor49er2• 5 years ago

Unfortunately, it does not seem to work on Firefox for Android. Pressing any digit will always produce a 0 value

Garora7• 5 years ago

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

chayleaf• 5 years ago

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

Minor49er2• 5 years ago

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

adamredwoods• 5 years ago

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

https://github.com/SLaks/Silon

raxor53• 5 years ago

Why make this? Why not?

Yes, please

dexwiz• 5 years ago

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`?

danielovichdk• 5 years ago

Why?

DaveSchmindel• 5 years 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.

NoJS – Creating a calculator with only HTML and CSS

Related Stories