Front-End Practice: Javascript Calculator

Overview

This is a quick JavaScript-based project to help keep your front-end skills fresh. The goal should be to structure HTML will all the necessary components (digit buttons, control buttons & display), style the HTML to look as realistic as possible (think about lighting angles, shadows, etc.), and finally make it work with a little JavaScript.

This is a beginner to intermediate project so I recommend tackling it head on without looking at any examples. If you're not sure what to do, take it as far as you can and see if you can experiment your way to a solution.

With my first attempt, I used a picture of an old Casio calculator as my only reference since I didn't quite have the layout committed to memory. I was able to get to a working solution in an hour or two. The javascript logic took a little thought to work through in handling different cases, but it wasn't too bad. I think this is a fun project for a developer of any experience.

If you're comfortable diving in, scroll no further because I'll share next how I approached the project. Then, come back and compare your solution to mine. I'll also embed my Codepen at the bottom to demo the result. Leave a comment there with a link to your pen and let me know how I can improve this example!

My Solution

There's a lot of different ways you could approach this. The following is what made sense to me at the time. Like anything else, you look at it a couple of times and you see a million ways you could do things differently or improve. That said, the fun of practice like this is to just jump in and hack at it rather than put much thought into it.

HTML & CSS

For the structure of the project, I chose to limit the scope of functionality to keep the size and time commitment down. For controls, I decided my calculator would be able to add, subtract, multiple, divide, and raise to a power. From there, you'll need the obvious buttons for digits, decimal, equality, clear, and all clear. Last, you'll need a display to capture the result of your computation.

For each element, I used an input, provided the control type as its value, and grouped functionality and styling with CSS classes. For example, The "9" button would be an input element of type "button" with the value of "9." For the clear and all clear buttons I still use the input button approach but set the value attributes to "A" and "AC" respectively.

Then you need to figure out how to arrange the elements within the calculator body. I used flexbox to organize everything. To determine dimensions, I fixed the button, gap, and inset sizes and then calculated everything dynamically from there to achieve a desired width and buttons-per-row. 

How I didn't see this as a grid use case is beyond me. My approach was way more complicated than necessary (Edit: I also rebuilt it with grid). But, that's the fun of this like I mentioned before.

By the way, if you are using flexbox, I love this guide from CSS Tricks. But you're probably already aware of it since it's the number one search result for the keyword "flexbox" even ahead of MDN.

JavaScript

For the functionality side with JavaScript, I used a couple globals to track state through multi-stage operations: total, current, and control (add, subtract, etc.). For the current value, you could also just used the value stored in the display input instead of a separate variable.

I attached the an event listener to every button by looping through the objects. Then when the event fires, I conditionally route to helper functions. If the event includes a computation (as apposed to appending a value to the current value, resetting, or equating), I determine the appropriate operation using a switch statement.

Result

Here's the calculator I made!

See the Pen Javascript Calculator by Ian Waldron (@Ian-Waldron) on CodePen.

Last, I'd like to give credit to this Codepen for being the inspiration for this project. Browsing Codepen is a fun alternative to scrolling social media and you run across cool demos like this!