This is an on-screen calculator, with four basic math operators plus a decimal point button. If users make a mistake, they can delete any digit or simply start fresh, which will erase all the memory. Users can turn on/off the calculator as they wish. They provide the input by clicking on the buttons or from their favorite keyboard.
CLICK HERE TO VIEW THE PROJECT
-
► 11.1%
-
► 23.3%
-
► 65.6%
This one was a cornerstone project because it was the final project of the Odin's Project Foundations course. It meant I had to utilize all the web development knowledge that I'd learned over the last four months to get it done.
And yes, it was quite hard, especially the Javascript portion of it. The problem with building a calculator is that there are a variery of scenarios of how a user might input their numbers. For example, a user can input a number, then they decide to delete a few digits and add a decimal point somewhere in the mix. I had to think through these scenarios and made my program work for each. Another difficulty was to add keyboard support to the calculator. The keyboard eventListener had to match the mouse eventListener which took me a while to figure out and connect the two of them.
Apart from the JS side of things, HTML & CSS were easier. I did have some hiccups here and there with CSS for when I tried to create an up & down animation for my buttons. But overall, I had fun making my calculator look good. I really loved the colorway and I even named it the TP-2022.
- You have to fork this repo first. Github has a their own step-by-step guide with pictures to follow along.
- Note: You have the option of changing the name of your forked repo.
- And to have all the files locally on your computer, open Terminal -> change the current directory to the directory you want to put this forked repo. Then, enter the command line below:
git clone https://github.com/[your-username]/calculator.git
- Note: If you change the name of your forked repo, replace 'calculator.git' with '[your-forked-repo-name].git'. Github will automatically do this for you when you copy the link.
- Finally, change to your new forked repo directory.
cd calculator
or
cd [your-forked-repo-name]
Please feel free to reach out if you need any help with this repo. 👉🏼 [email protected]