Calculate It! Title
"Calculate It!" Project brings the basics of a calculator, such as addition, subtraction, multiplication, and division with integers and decimal numbers. You can also make use of this project with the mouse or with the keyboard support as well.
This project has been done to demonstrate the skills and knowledge obtained in The Odin Project's JavaScript Basics portfolio. Some fundamental topics such as the use of events, functions, DOM manipulation and more were applied here.
Also, I've applied my skills acquired outside the course, such as the creation of vectors or the use of fonts to be able to provide a better product for this project.
As mentioned before. The project has keyboard support instead of clicking buttons.
0 to 9: Enter its respective digit into the calculator memory..: Enter the decimal point into the calculator.+: Select addition operator.-: Select subtraction operator.*: Select multiplication operator./: Select division operator.Enter: Calculate entered operation.Backspace: Delete the last digit.Escape: Delete calculator memory.
All of these keys work on both the alphanumeric keypad and the numeric keypad as well.
That's right, this would not be a simple calculator like the rest. This one has something special! :)
I don't want to go into too much detail, but I just want you to know that if you divide any number by 0, something peculiar happens.
I could say that the calculator is "going to be mad at you". Try it and enjoy his anger! :D
- Font used:
- Nunito: Main text, buttons, and title
- Martian Mono: Calculator Screen
- Favicon and Main Title Logo: Made by me!
Creating vectors and illustrations is a new skill I'm learning at the moment, and I'm loving it! So I found the opportunity to apply my knowledge of vector graphics in this project!
- DOM Manipulation
- NodeList
- Button Click Events
- Keyboard Events
- CSS Grid Layout
- Transitions
The Odin Project's Assignment: Calculator Project.
More information: Click here