How much you could learn from just building a calculator in JavaScript

[bilalcg]

After researching for quite a while on tutorials teaching how to build a basic calculator in JavaScript, I've come to the conclusion that almost no one is doing this in the right way. The reader doesn't get to learn about designing/wireframing the calculator; good programming practices; the thinking process of solving problems in the calculator; the inevitable process of refactoring; and whatnot.

There is so much potential for a newbie in building just this single project that I can't tell you! Honestly, it's for real!! You could start off really really simple and then slowly and gradually, but eventually, turn the calculator into a highly complex, scientific beast. And that is a difficult feat to achieve in the process of which, you'll learn countless of invaluable skills.

To list a few concepts: you get to exercise your skills in designing, the HTML DOM API, events, accessibility, timers (for getting stuff added to the task queue to be executed on the next run), procedural programming (yes that's right; every other app doesn't have to be object-oriented), error-handling (using `try...catch`), string processing, and so on and so forth.

Time and time again, calculator building tutorials that I've seen have been mostly large 'dumps' of code, some even resorting back to <div>s, with little to no explanation of stuff. It's surely very difficult to create a project that involves the reader to the very last sentence and in detail each and every step in building the calculator, but it isn't impossible. At least we can try :)

And so I did. I tried creating a similar project in the given link. It's complete now and I've been working on it for quite some time. (https://www.codeguage.com/projects/calculator-in-js)

Do let me know of your thoughts on how useful do you think a calculator project can be in getting a newbie learner to exercise his/her knowledge of JavaScript? How useful was building a calculator for you?

[muzani]

I do a lot of beginner training, and most of the value of some tutorials is that they clear up the unknown unknowns.

How do I download JavaScript? Do I need linux? I called my file syyles.css.doc, why doesn't that work? What is the './'? I'm trying to Whatsapp my project to my wife, but she can't open localhost.

We usually cover things like OO and procedural programming after 40 hours or so. Maybe some DRY. Let them make the mistakes before explaining the theory.

Let them do Fizzbuzz or ticket prices first. Many have trouble grasping how to set a discount for people below 18 and above 55. What's the difference between <= and <? What's else for?

[worksonmymach]

Do I need to pay to see that? It is confusing.

Anyway yes calculator apps are a fantastic project:

1. Can be anything from just running a lisp repl and doing (+ 2 2) to a full blown calculation and programming environment like Jupyter!

2. Can explore parsers, ui, ux, interpreters, graphics (if adding charting features for example), stack data structure, floating point arithmetic (or alternative arithmetics like mathematica) and so on. Lots to explore!

3. It is not a money making idea really which is good. So you can focus on the tech and not get an "entrepenuerial seizure" aka "i got an idea it make meeellllliionnnss!"

[bruce511]

Yes I agree. When I was at uni the best assignments were the ones that could be done simply (should take around an hour) but which offered a path to something more elaborate. There would be weeks a group of us would go into overdrive each trying to outdo the others.

Not always a lot of fun for the markers (who I suspect quickly learned to just guess and move on.)

Of course, while a fantastic learning experience its a terrible work habit. We start to believe "more is better" where as any professional will tell you "less is more".

It's harder to remove cruft than it is to add it.

[bilalcg]

Yup, I believe a calculator can also be created as a state machine (which is a really nice CS topic to learn), and that's what I think, for example, Desmos, is built upon. There are loads and loads of concepts that we can learn in building a calculator.

People generally think that they should juggle between different projects and while that isn't false, it's important to realize that it's better to extend one single project than to start off a new one when learning new stuff. What do you say?

[mejutoco]

I wrote one on getcalculator.app and I agree it was more interesting than it looked at the beginning.

Now the ipad includes a calculator app, so it does not make as much sense as before.

[leros]

I paid for two premium calculator apps. One that has more features and one that does fractions.