So, this project was inspired by the tutorial here at Free Code Camp. I took the advice at the top and dove into the project without looking back. The CodePen linked below is the result.
It is functionally similar to the calculator that comes with Windows 7. I just reverse engineered it. The project took me a couple weeks, because I have numerous distractions/responsibilities that get in the way. (Some people call them children.) But I’m sure I could have done it much faster with a more professional focus/environment.
Anyway, I’d very much enjoy any feedback or recommendations you might have. I don’t have a degree, but none of this is entirely new. I dream of making money writing code someday, but I know I’m still a long way from that. Thanks in advance.
This is a very nice calculator! Only suggestion I have is to make it so that you can type the numbers on your keyboard and it will show on the caulator. I like the simple design. Keep up the good work!
@Jtryon, your calculator looks good but there are functions that do not work correctly.
The ‘clear’ button seems to only clear the screen and nothing else.
For instance, enter “2 * 8 =” and it gives the correct answer. Press the ‘clear’ button and then enter “5 - 3 =” and an incorrect answer is displayed.
I can enter multiple decimals such as 2.2.2 That should be handled.
There’s no keyboard accessibility. User’s cannot tab through
Thank you! I guess this is why we have other people test things for us, right? lol
I believe I’ve fixed the problems:
Clear was using the wrong variables (changed after the function was written, and I missed it)
Multiple decimals was a matter of adding a boolean to check. I also made sure to handle it in the backspace function to make sure new decimals could be removed/replaced
I used JS to add hotkeys for each of the buttons, so it works like the windows calculator. The user still can't "tab through" because the "buttons" are actually divs (made the styling easier)
You don’t want to do this. You should always use the best semantic element for the job. In this case those are buttons, so you should use the button element. Choosing an element just because you think it might be easier to style is not a good practice, especially for accessibility.
I should give an example of why this is not ideal. Screen readers have a ton of single key shortcuts that the user can use to navigate around the page. One of those is using a single number to navigate through all of the headings on the page at that level. For example, when using a screen reader, pressing the number 2 will tell the screen reader to look for the next h2 on the page and go to it. So basically, the screen reader hijacks the key press and uses it for its own purpose and thus screen reader users won’t be able to press 2 and have it added to your calculator. But if you use buttons then screen reader users can tab to the number they want and use the Enter/Spacebar to add the number to your calculator.
I can understand that. Accessibility is important. I’m really not sure why the padding didn’t want to stick when I changed it to buttons. Everything got shorter and spread out lol. I think codepen just updated at a weird spot, because now I’ve changed a couple things, gone back and changed them again, and ended up with something that looks a lot like where I started, but everything seems to be fine.
Anyway, the buttons are tab-friendly now. And, thanks for the example, it makes sense.
