For this project, I aimed to create a fully functioning calculator by combining all the skills I have learnt so far in HTML, SCSS/CSS and JavaScript. The calculator supports the following operations: [+, -, /, *, =, ^] as well as Pi, negative numbers and decimals.
Before building my calculator, I drafted the below implementation outline:
- Create the base HTML elements, including the main output container, buttons and the general layout.
- Use SCSS styling to add colour, button styling, element sizing and calculator layout using flexbox/grid.
- Create a JavaScript file to handle the general flow of the calculator.
- Add DOM manipulation to output calculations to the screen.
- Utilise event listeners to add functionality and track each button press.
- Implement functions for some operations such as equals and clear.
- If time allows, additional operators can be added after completing the MVP.
- Number keys 0-9
- Operator keys (+, -, ÷, ×, =)
- Decimals support
- Display rendering the current calculation
- Does not use the eval() function
- Supports negative numbers
- Output also logs the previous calculation at the top
- Power operator ^
- Pi button π
If I had more time to develop this program, I would like to implement support for order of operations as well as add bracket keys for further complex functionality.
Ideally, I would have also added more responsiveness to each button in the form of visual feedback to the user. Currently the calculator does not handle scientific notation correctly and I would likely need to overhaul my evaluation function to support this.
Overall, I am happy with the state of my JS web calculator given the one week timeframe we were allotted to complete it. It supports a decent number of operations, negatives and has also checks to prevent incorrect inputs by the user.