[DAY 69-71] I started building a calculator using React and I failed
Tags: buildinpublic, react, javascript, webdev
Published: 2024-07-03 16:00:00

Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 69-71, after deploying 2 react apps which are the random quote machine and markdown previewer to github pages. As well as started the build of the 3rd project in the front end course which is a drum machine...

I continued finalizing the design of the program as well as its functions in React.

I wanted to make the design look visually appealing so I started by looking up good color palettes on coolors.co and once I found one, I slightly changed the shade of the generated colors to match my preference. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi9l6mg998m91g9xd0k7.PNG)

Next, I also wanted to make the app look futuristic and modern. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxjoteysokmcv5bc56pl.PNG)

I know, I tried my best. 

Next, I deployed the app to github pages.

After that, I moved on to start building the 4th project in the front end course which is a basic javascript calculator.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tohh5eki76xjyuo0xmck.PNG)

What I did first is to write the HTML of the calculator by making container divs for the display and buttons. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmwd47s60aa968mw1h8b.PNG)

Next is designing the calculator using CSS. I made certain designs for the number buttons, clear button, operator buttons, and the equal button. After that, I added functions to handle clicks for certain buttons. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27dw1xnkdmlhtez3a0qs.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5euh3t6kt7882sh7qy3.PNG)

For the number and operator buttons, it will basically display what you click on the calculator. This part is not finished yet since there are still some bugs encountered like the operators can be clicked consecutively, improper handling of float numbers, and decimals not functioning properly, which we do not want.

I also designed the container divs for the display part of the calculator so that the user will be able to see the current input of the program.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63zp2km7co7ukdd1qt4s.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oixmdil1o08vxz7mwgxh.PNG)

The reason why I failed is because I did not reach the deadline that I set for myself. I was supposed to finish this program by this week but I did not expect it would take me longer to program the app. I’m currently 3/4ths of the way there and I plan to continue this project by next week. It’s okay. Things happen and even if I didn’t finish the app yet, I still learned so much by just starting to build it and for me, that’s what matters the most.

Anyways, that’s all for now, more updates in my next blog! See you there!