A calculator made with HTML, CSS, and JavaScript.
Here's a live demo: https://jackbayly.github.io/calculator/
- CSS grid
- IDs vs classes in HTML/JS
- Event Listeners
- Working with input fields
- Data types, especially when to use strings vs numbers
- Box shadows
- Would like to add functionality, for example, keyboard support and dot button
- Possible color changes
This project was pretty challenging for me. Getting all the different operators to work was difficult, as was getting the clear and equal buttons to work. I'm proud of the JS work I did on this. The calculator does in fact calculate. Although, as stated above, eventually I'd like to add more functionality to it. It was also good to get practice making a UI, especially using the grid layout in CSS. I like the end result. It's clean and nice to look at. The devil is definitely in the details with CSS. I put a lot of thought into almost every design choice, like the box shadows, box-radius, and colors. I wasn't 100% sure about what colors to use so I ended up (somewhat) basing them off an image of a calculator I found online, pictured below. I'd definitely like to get better at the design aspect of web development. Overall though, I'm happy with the end result.
