I'd been looking forward to working on this project for days, and I'm very happy with how quickly I completed the markup and CSS. The screen responsiveness works GREAT🙌🏻🙌🏻 Even the Javascript didn't take a huge amount of time. I think I completed about 90% of the thing in a workday. The other 10% was me leaving no stone unturned, planning for every possible scenario when writing input (e.g.: making sure it's not possible to write two operands together like "++", "/*", making sure you can't write something like "00000" or "0.03.2.0") and some things that were a little more difficult to fully figure out; as anyone who's programmed a calculator will tell you (this is my second time), the function for the Period tends to be the most annoying, head-scratching one🥴
Extra mile
- Played a little with the box shadows on the buttons to make them look a little more - 3D and make them look like they're being pressed down.
- Added a custom scrollbar to the calculator's screen in case the input gets too long.
- Used eventListeners to make sure you can also use it with your keyboard, though this is a fairly standard "idea".
- I did not use
prefers-color-schemebut I did use localStorage to make sure the user's preferred color scheme is saved.
Issues I wasted a lot of time in the end trying to get the buttons to work on mobile, but I couldn't for-the-life-of-me get it to work, at least not on my Moto G7 Play (since I had to delete and re-deploy on Github everytime I made changes, I only tried to make the Number buttons responsive on mobile, but I couldn't do it). Any advice here will be highly appreciated. I tried using touchstart, touchend, onclick, and even changing the element for the calculator's screen from a <textarea> to an <input> element, but to no avail😤😤
Here's a relevant snippet of my code. numbers is a node list of <button> elements. Clicking works, tapping doesn't:
// EACH BUTTON HAS A value ATTRIBUTE SET TO ITS NUMBER
numbers.forEach(num => num.addEventListener("click",()=>{
numberFunc(num.value)
}))
numbers.forEach(num => num.addEventListener("touchstart",(e)=>{
e.preventDefault();
numberFunc(num.value)
}))
