Calculator app - Both Keyboard & Mouse click events included.

Solution retrospective
I have only implemented 2 themes though, sorry for that. I wasn't aware of traditional grid system so I had to use bootstrap grid system in order to layout the calc buttons. Anyways, please do check how I made the transition from Light <-> Dark (from calc.js line: 215) and suggest me if there's a rather easier or concise way to implement the same.
PS: I'm still in the learning stage, will be learning ReactJS soon.
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
I'm pretty sure there's a lot of ways of implementing the theme switching, and your way works very well.
The calculator is perfectly functional, and adding keyboard inputs is a plus. I just have a few suggestions;
How about you give the same functionality to the enter key as the equals button, 'cause the backspace works, but the enter key doesn't, it just returns the last number you clicked on.
- @PraneetDixit
Hi!
Your theme switching implementation looks quite good.
Another way of theme switching is using custom properties and toggling a single class to change the properties.
Here is an example -
/*CSS*/ body{ --text-color: #000; --background-color: #fff; } body.dark{ --text-color: #fff; --background-color: #000; } .someElement{ color: var(--text-color); background-color : var(---background-color); }
//JS themeSwitchContainer.onclick = function() { document.body.classList.toggle('dark'); }
You can play around with this to include more themes.
Your calculator is pretty functional.
+1 for keyboard inputs.
- P@palgramming
I like your icons in your theme slider
I can enter 6+6 on the keyboard but when I hit the enter key on the keyboard it just shows 6 the enter key on the numpad then shows 0
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord