witchdevelops / calculator-js

Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• See the size of the elements adjust based on their device's screen size
• Perform mathematical operations like addition, subtraction, multiplication, and division
• Also on decimal numbers
• Use either screen or keyboard
• Adjust the color theme based on their preference
• Have their initial theme preference checked using prefers-color-scheme and have any additional changes saved in the browser

Screenshot

Links

• Solution URL: Solution hub
• Live Site URL: live

My process

I consult MDN docs and W3Schools docs a lot and I also use chatGPT to help with debugging. It's really good at detecting typos and double checking variable and function names.

Built with

• Semantic HTML5 markup
• CSS custom properties
• vanilla JavaScript
• Flexbox
• CSS Grid
• Mobile-first workflow
• :has() and radio input for theme switcher

What I learned

I learned how to implement a theme switcher. It is surprisingly easy! All you need to do is have all your colours defined as variables, then by the power of :has() combined with radio buttons you can easily toggle between various colour presents. For example:

:root:has(#theme2:checked) {
  --variable_name: #color;
}

As :has() isn't currently supported in Mozilla Firefox, I added a fallback with a class assigned with JavaScript.

Continued development

One drawback of implementing a theme switcher combined with a radio input is that I couldn't make it work using SASS. This is probably because SASS declares variables without using the :root selector. Using @at-root didn't compile. I have yet to figure out a solution to implementing a theme switcher while having styles written in SASS. Similarly, detecting user preference regarding color scheme and assigning a class with JavaScript for the theme switcher clashes, so in Mozilla the switcher doesn't work with manual input. I have yet to figure it out.

Useful resources

• CSS theme switcher using :has - This video was super helpful to understand both how :has selector works and how to use it to change the variables declared on the :root element to create a theme switcher with CSS.
• Frontend Masters project by Brian Holt - This is a great course overall, so highly recommend, and this lesson in particular was very helpful to consult with whenever I felt stuck with JS logic.
• Animated switch for radio buttons - This codepen shows how to achieve smooth animation for theme toggler.
• Take input from keyboard - This codepen helped me to implement keyboard input functionality.
• Regex 101 - This resource is very handy when working with regexes. It allows test a string against regex and debug it. It also comes with an inbuild quick reference for a refresher.

Author

• Website - Add your name here
• Frontend Mentor - @WitchDevelops
• Twitter - @yourusername

calculator-js's Issues

refactor the code

• change divs to buttons for accessibility
• refactor functions to be arrow functions
• add "prefers color scheme" light, dark, high contrast (CSS?)
• add JS fallback for theme switcher for browsers that don't support :has()

add decimals

add a function to handle decimals

clicking between the buttons gives odd behavior

anywhere on the calculator body, between the buttons causes priting of all symbols on the buttons to the screen

theme switcher doesn't work in Firefox no matter what I do witj JS :sadpepe:

added a fallback that sets classes but it seems that it clashes with @media (prefers-color-scheme), which needs to have variables declared at :root. So, I'm stuck.

bug! no max-width

calculator gets stretched out infinitely when the display shows a long number, longer than display's width. Fix this!

add keyboard input

currently it handles only button clicks

* and Enter don't work

* is probably bad regex, Enter thoug... no clue.
Numpad works.