[DAY 72-74] I built a calculator using React

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

On days 72-74, after completing 3 out of 5 projects in the front end course (random quote machine, markdown previewer, and drum set app), I successfully built a JavaScript calculator and deployed the app to GitHub Pages.

In my last blog, I mentioned not finishing the calculator yet because there were still some bugs, such as the operators being clickable consecutively, improper handling of float numbers, and decimals not functioning properly.

For a quick recap, I wrote the HTML of the calculator by making container divs for the display and buttons. After that, I designed the app using CSS by styling the number buttons, clear button, operator buttons, and the equal button. I also added functions in React to handle clicks for each button group.

Here's how I fixed the bugs from the last blog:

In my first code, all my buttons called the same function, and I just used if-else statements to differentiate each button group. I realized this was wrong. The code was unorganized and counterintuitive, making it harder to read. So, I refactored my whole component to create separate functions for each button group. This made my code easier to read, and I was able to fix the consecutive operator problem.

The next issue I solved was handling decimals. There should only be one decimal per number. I made an array of numbers by splitting the string using operators. Once I had an array of numbers, I stored the last value inserted into the array in a variable, lastInput. I used this variable to check if there hadn't been any decimal entered yet. If there wasn't, insert one. Else, insert none. With this solution, the lastInput variable is updated dynamically whenever the user enters a number, and the function repeats.

Now, I can say that I finally fixed the bugs and finished the app.

I also started to build a clock timer app by writing its HTML and CSS to design the app, and later on, I will add its functionalities using React. The clock timer app is the last project needed to complete the front end certificate from freeCodeCamp.

First, I wrote the HTML of the app by creating div containers for the clock itself. Next, I designed the app using CSS by adding glow animations when the clock is ticking, changing the color to red when the timer is below 1 minute, and creating a glassy effect for the timer to look like a digital clock.

I am looking forward to adding the functionalities of this app next week.

Alright, that’s all for now. More updates in my next blog! See you there!