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 mathmatical operations like addition, subtraction, multiplication, and division
- Adjust the color theme based on their preference
- Bonus: Have their initial theme preference checked using
prefers-color-scheme
and have any additional changes saved in the browser
- Solution URL: https://github.com/NDOY3M4N/calculator-app
- Live Site URL: https://ndoy3m4n.github.io/calculator-app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
I learned how to detect the user's color preference scheme in JavaScript with window.matchMedia
.
const lightTheme = window.matchMedia('(prefers-color-scheme: light)').matches
This will return true
if light mode is enabled.
- How to detect dark mode using JavaScript - This article explains how to use
matchMedia
to detect dark/light mode