I really liked this challenge. I learned a fair bit on how calculators work. I didn’t know how to use the memory buttons but now I know!! ^^
HTML&CSS
I started with the idea of using the design of the card size calculator that I saw a lot in the 90s in France. I used position:relative; a lot to position elements and CSS grid to breakdown the frame in different areas.
JS
Variables declared globally.
Four functions:
handleclick: each input button has a value that is passed to the function via {this.value}. I use a switch statement to give the expected behavior, updating the variables.
display: accepts an argument that is displayed in the display element.
performCalc: performs the calculation from the values of the variables
resetVar: reset two of the variables as I used to reset them together in a few cases.
Unlike some other calculators which operates on two numbers at a time, I’ve made my app to solve a complete expression with multiple operators and operands. Please have a look and suggest things on which improvements can be made.
I was hoping to implement input from keyboard too but it would require making some fundamental changes to the whole design. Problem was that once a button on the calculator is clicked it remains in focus unless I press some other button, so on hitting the Enter key (which I had decided would show the result) or the space bar the behaviour of previously clicked (and currently in focus) key is executed. I could have very much just replaced buttons with divs in place of them and make them clickable but then I would have required to redo and alter a lot of things.
Wow, this was burly, but a GREAT project! I spent about 55 hours on it. I tried to set up a MVC pattern in the JavaScript so the code would be more easy to read. If anyone has feedback, that would be great, especially regarding how to implement better code patterns make the code easier to read and write.
One to-do on my list is to figure out how to round the answers to <9 characters including the decimal for large floating point numbers. Right now it displays a “Digit limit met” error instead of truncating the answer to fit the display. It becomes pretty apparent how that is a problem when dividing small numbers like 89/6, for example.
Hi Puneet. I like the design, it’s cool how you have the animated transitions in the display. I noticed you don’t have a clear button though, you’d probably want that in there to reset the calculator rather than hitting back button multiple times.
That is so awesome! Way to knock it out of the park! I love the solid design and concept. That is a lot of fun to play with. Nice easter eggs too. Definitely curious to check out your code!
Looks great! And all the things you listed there work perfectly well. Nice job!
It’s unfortunate that it can’t handle very large calculations, though. Implementing scientific notation display might be nice for the sake of completeness, but maybe outside of the scope of what you want to achieve with this project.
There’s no CE, instead there’s a backspace because I don’t like the way CE usually works on a calculator I like to remove digit by digit and not the whole thing at once.
So far I had used jQuery on pretty much all my fcc projects, but decided to try doing this one with just vanilla JS and honestly I think I made the right choice. I hate that damn $.
Pretty Nice! Like the 8-bit vibe. Reminds me of videogames from the 1980s.
One thing I noticed was if you finish a calculation by pressing equals and then press a number it doesn’t start a new calculation.
The design looks great! I was waiting to hear it speak like BMO…
I did find something by pressing multiply or divide first e.g. * 9 * 9 * 9 * 9 or / 8 / 8 / 8 / 8 / 8
and then pressing equals. Nothing happens.
