Everyday dot JS; Building a Scientific Calculator with Vanilla JS
Calculate… it’s all we seem to do all the time. From planning budgets and getaways to what’s left in our 401k account, it all involves a bit of calculation. It’s no different for software developers too; we calculate when we build stuff. Right now that “stuff” we’re going to build step by step, and patch piece by piece, is a scientific calculator.
Now this won’t involve APIs which makes it very concise and easy (or kind of tricky) for us. Skills you’ll need are a good command of HTML, CSS and JavaScript. Use your imagination, we’re going to be doing a lot of DOM manipulation here as well. It’s fair to say we’ve gotten off to a good start. Let’s do this!
( If you’d rather just copy and paste code, then figure out how it works over a cup of coffee, there’s a back door with a flight of stairs that’ll take you there )
Adding your buttons
We’re going to begin with our HTML here, creating buttons that will define how we’ll use our calculator. Every scientific calculator has it’s functionality grouped into four types; basic functions ( +, -, *, / …..), trigger keys (backspace, clear and enter), number keys (0–9 basically) and advanced functions (ln, cos, log, rad, x^ …..). For easier manipulation when assigning functions in JavaScript and styling in CSS, we’ll give each button a class of button as well as a class from one of these four; basic-stuff , numbers , triggers and complex-stuff :
Adding our Trigger functions
In our next step, we’ll have to create our three most important buttons; CLEAR , ENTER and BACKSPACE . With one or two functions and some good old JavaScript methods, we’ll be done with this part in no time:
Tackling syntax errors
Our calculator should be able to log syntax errors when a wrong calculation, say 7-*8 is inputted. We’ll have to create a function for this:
Defining our button functions
Here we’ll proceed to define each button’s function. This can easily be done via the JavaScript Math Object. We’ll be covering a whole lot. To get you fired up, here’s some excerpts from the code:
Integrating our functions with our buttons
The final piece of our puzzle? Giving our users something to click and seeing it actually works. Remember we gave every button a class of button earlier on? We’re about to put what we did to good use. We’ll create an array of every element with the class name button and loop through the array, calling each button and assigning it’s appropriate function. It’s some long code ( 10,000 lines yeah! :)) but as usual we’ll provide excerpts:
Conclusion
We’ve crossed the finish line, notice I didn’t say anything about CSS? This is because unlike HTML and JavaScript, you’re allowed to do your own “thing” in CSS; or so it seems. People seem to think CSS is easy, I’m taking sides with Otis Wright here.
You can review the calculator here, if you wish. Cheers!
If you liked this, kindly give an ovation with the applause button, thanks in advance!
