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.
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
- Solution URL: Solution hub
- Live Site URL: live
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.
- Semantic HTML5 markup
- CSS custom properties
- vanilla JavaScript
- Flexbox
- CSS Grid
- Mobile-first workflow
- :has() and radio input for theme switcher
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.
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.
- 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.
- Website - Add your name here
- Frontend Mentor - @WitchDevelops
- Twitter - @yourusername