Calculators are Useful

This weekend we were tasked with creating a functioning calculator from scratch using what is commonly referred to as “vanilla javascript”. Basically all that means is not loading in a library such as jQuery, which makes selecting elements, both of the HTML and CSS variety, extremely straightforward. As much as I wish we were using jQuery I feel I ultimately will be very happy that I learned it the long and somewhat more difficult way. From what I understand, jQuery is on its way out due to some browser support issues so learning this vanilla will serve extremely beneficial to understanding libraries to come (or maybe even one day building one).

That was a sidestep, but back to the calculator! I wrote it a couple different ways. Thursday night I played around with the HTML skeleton for what would be the better part of an evening. I originally went with a div table created by some table creator, then realized upon styling that the display: table attributes were really screwing with my idea of how the project would go. I couldn’t get the “display” cell to widen and also be in line (height-wise) with its neighboring cells.  I ended up spending some extra time reorganizing and it took me about 2.5 minutes to get the layout perfect using just flex properties and width %’s. I was very happy I chose to go that route at the end of the day but I wish I had done that from the beginning.

Friday during lab I was able to get two different JavaScript versions of the calculator running. The first one was long and required splitting the input and performing one calculation at a time. It also required the order of operations to be done somewhat manually using conditional statements. Here’s a look at that code:

Screen Shot 2017-06-11 at 5.26.13 PM.png
tedious, but it works

While I was writing that beastly conditional, I came across a built-in called eval which does exactly that: evaluates a string as a mathematical function. The problem was this: the way I had to organize my input to get it to split left and right of the mathematical operator made it impossible to run eval on.

Which is where I decided to rewrite the function! With (only a little) help from Bubba I had this bad boy up and running in no time:

Screen Shot 2017-06-11 at 5.25.44 PM.png

Not only does it work more effectively, it is a beautiful piece of code. The hard mode for this project was to add in a square root and modulo button, which as you can see has been done. Eval works for modulo but not for square root, as the nature of square root is a little different. I threw in a quick conditional case for that button and was done! I finished all parts of this project by Friday evening, which I was extremely proud of after how intense this past week had been. I can only hope the rest of the course treats me as kindly as the first three weeks! I’ve spent the last couple days taking care of personal things and spending a few hours a day working on supplemental exercises which I am grateful for as I feel they are solidifying the knowledge of the past weeks.

We also had a review Friday. It was brief and basic. I was told I was not a concern for the instructor since my pace was on par with the expectation and asked if I had any questions. I was hoping to get something a little more in depth than that, but for now I’ll take it. I’m meeting with the campus director tomorrow so I’ll be able to express any lingering concerns then.

Let’s see what this week has in store!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s