FCC Speedrun — Project #1: JavaScript Calculator

My first project of the new speed run! Since I did the intermediate front-end projects last time, I thought I’d start with the advanced front-end this time and work my way back. I suspect that once I finish the advanced and intermediate front-end projects, I’ll be out of time, but we’ll see how it goes.

I’m just using plain old vanilla HTML/CSS and JavaScript for all of my projects. For this project, I broke it down into steps:

1. I created the skeleton of the page in HTML and CSS. This actually took me the entire first evening, because I wanted the buttons to line up exactly right. It was a long process, but I eventually got it. I used the CSS Flex properties to get things lined up and centered how I wanted.
2. The next step was making sure that when I clicked my buttons, the inputs showed up where I wanted them to go. This was pretty quick, and after a little fiddling around with a forEach loop, I had the numbers appearing in my calculator screen. Hurray!
3. The third step was really the meat of the project for me. I had to find a way to store my inputs, and to turn them into numbers rather than just individual button value strings. I chose to hold each button press in an array, then use the operator button as a signal to push the individual strings into a new array as a whole number. I also created a little function to perform the operation if there was more than one number in the entry array, so that I had a running total.
4. The last step was probably the most irritating (but very satisfying to get right), and that was getting everything to look right. At this point, the math worked out great, but there were commas and apostrophes all over my display. It took a while to get all of my values coerced to the right type so that they looked right in the screen.

All in all, I’m very pleased with this. At the outset, it looked like it was going to be a very complicated project, but it was not as bad as I’d feared. I’m very excited to get rolling on the next one!

The code for this project can be found in this repository.

A live version of the calculator can be found here.

Notes:

• I need to get in the habit of writing things out to help get it organized. A lot of the stuff I struggled with could have been more easily solved if I’d just written a little diagram of what I needed to do.
• In the future, I’ll probably try to do a little more of the HTML/CSS before I dive into the JavaScript, because I did end up doing a decent amount of reformatting after finishing the JS.

Next up, the Pomodoro Clock!