[HN Gopher] NoJS - Creating a calculator with only HTML and CSS
___________________________________________________________________
NoJS - Creating a calculator with only HTML and CSS
Author : ColinEberhardt
Score : 119 points
Date : 2022-01-21 09:14 UTC (13 hours ago)
(HTM) web link (blog.scottlogic.com)
(TXT) w3m dump (blog.scottlogic.com)
| danielovichdk wrote:
| Why?
| chrismorgan wrote:
| 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.
| Garora wrote:
| 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
| [deleted]
| joelbondurant1 wrote:
| dexwiz wrote:
| 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`?
| sisjohn wrote:
| It would be interesting to create complex mathematical
| computations and finding a solution without the proper help of
| JS.
| postalrat wrote:
| It would be a good way to build an appreciation how javascript
| makes things simple.
| adamredwoods wrote:
| I thought this would be implemented by recreating a calculator
| logic gates using nothing but css selectors.
|
| https://github.com/SLaks/Silon
| tannhaeuser wrote:
| Are we Turing yet with CSS?
| nso95 wrote:
| Yes. CSS is Turing complete.
| SahAssar wrote:
| Yes, if combined with html and if you "move" the tape by
| clicking elements
| myfonj wrote:
| Technically even constant mouse movement could suffice.
| OJFord wrote:
| 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 wrote:
| There's a link to the calculator in the first paragraph.
| Israduscias wrote:
| sadly, it has rounding errors if you multiply by 0.xxx
| s_gourichon wrote:
| ? It doesn't even allow non-integer numbers.
| cldellow wrote:
| It does, but you have to enter a digit first (0 is fine)
| in order to see the decimal point button.
| btdmaster wrote:
| It does not work in Firefox:
| https://github.com/QuarkNerd/noJS. It's not clear why
| though.
| Garora wrote:
| Firefox doesnt support @property Which is what I'm using
| to round down and calculate the decimals
| Garora wrote:
| Hi,
|
| Please could you give me the exact input, wrong answer and
| also browser?
|
| Thank you:)
| nomel wrote:
| 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.
| Garora wrote:
| 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
| OJFord wrote:
| 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.
| nathell wrote:
| Do yourself a favor and try dividing by zero!
| sockpuppet69 wrote:
| joelbondurant1 wrote:
| illegalmemory wrote:
| 99999 * 9999 also yields wrong result
| Garora wrote:
| Hi,
|
| What browser and device are you on? And what result does it
| show
| mouzogu wrote:
| I feel like this thread is my job in microcosm :D
| geoffeg wrote:
| You can even do this with pure HTML, no CSS or JavaScript!
| Server-side processing sometimes seems underutilized and
| forgotten.
| antihero wrote:
| But then you need an active server.
| soperj wrote:
| how else do you serve an html page?
| astrobe_ wrote:
| 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.
| jaywalk wrote:
| 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.
| antihero wrote:
| From a CDN. By "active" I meant like, a server that does
| stuff other than serve content, that processes pages.
| DaveSchmindel wrote:
| > 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.
| raxor53 wrote:
| > Why make this? > Why not?
|
| Yes, please
| o_m wrote:
| Now make it accessible
| Minor49er wrote:
| Unfortunately, it does not seem to work on Firefox for Android.
| Pressing any digit will always produce a 0 value
| Garora wrote:
| I'll take a look at this. Firefox will not get all
| functionally. But I should be able to get stuff without
| decimals working.
___________________________________________________________________
(page generated 2022-01-21 23:01 UTC)