The JavaScript Calculator

This is my calculator I designed using JavaScript and CSS grids. I used the CSS grids for a vanilla approach for styling the HTML skeleton instead of using bootstrap. CSS grids is a new technology but amazingly efficient and creating beautiful and modular web layouts, far superior to its predescessor, using floats and divs.

I initially planned to use the Shunting-yard algorithm invented by Edsger Dijkstra to conver the infix inpression to post-fix and then to evaluate, but JavaScript (convienantly) has an evaluate method that will evaluate a string expression so there is no need for postfix conversion. I was a little dissapointed because I had some of my old Java code for an infix to postfix converter that I wanted to implement, but maybe some other time ;)

The caculator is only slightly tedious as each button is essentially a div part of the CSS grid, that needs to be sized and styled. Then, using JavaScripts event listeners, each div must be given a unique ID so that each element can be targeted and a corresponding event listener to be assigned. In this case, we needed to listen to button "clicks", that is when a user clicks on each button, and send that data for the function. The function would then push the corresponding ID of the button "clicked" into an array called numbers. Then, when the equals button is clicked at end of user input, this would trigger the eval() method (see MDN for futher documentation) to evaluate the string inside the array.