Frontend Mentor - Calculator App Solution

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

Overview

The Challenge

Users should be able to:

• Perform basic mathematical operations (addition, subtraction, multiplication, division)
• See the size of elements adjust based on their device's screen size
• Switch between three different color themes
• Have their initial theme preference detected using prefers-color-scheme
• Have theme preferences saved in the browser for future visits

Features

• Responsive Design: Works on mobile, tablet, and desktop devices
• Theme Switching: Three distinct color themes to choose from
• Memory Function: Remembers your theme preference
• Keyboard Support: Use your keyboard for calculations
• Error Handling: Prevents division by zero and handles other errors

Screenshots

Theme 1 (Default/Dark):

Theme 2 (Light):

Theme 3 (Purple):

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox and CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• Local Storage API

What I Learned

This project helped me strengthen my understanding of:

• CSS custom properties for theme switching
• JavaScript calculator logic
• Responsive design principles
• User preference detection with prefers-color-scheme
• Local storage for saving user preferences

Some code highlights:

/* Theme switching with CSS variables */
:root {
  /* Theme variables defined here */
}

.theme-1 {
  background-color: var(--main-bg-1);
  color: var(--text-light-1);
}

// Theme preference detection
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const storedTheme = localStorage.getItem('calculator-theme');

if (storedTheme) {
  body.className = storedTheme;
} else if (prefersDarkScheme.matches) {
  body.className = 'theme-1';
} else {
  body.className = 'theme-2';
}

Continued Development

In future projects, I'd like to focus on:

• Adding more advanced calculator functions
• Implementing keyboard shortcuts
• Improving accessibility features
• Adding animation effects for better user experience

How To Use

1. Basic Calculations:

   • Click the number buttons to input values
   • Use operation buttons (+, -, ×, /) to perform calculations
   • Press "=" to see the result
   • "RESET" clears all values
   • "DEL" removes the last digit

2. Theme Switching:

   • Click the toggle switch at the top to cycle through themes
   • Your preference will be saved for future visits

3. Keyboard Support:

   • Use number keys (0-9) for input
   • Operations: +, -, *, /
   • Enter key for equals
   • Backspace for delete
   • Escape key for reset

Author

• Frontend Mentor - @Ayokanmi-Adejola

Acknowledgments

Thanks to Frontend Mentor for providing this challenge and to the FM community for their feedback and support.

Special thanks to League Spartan for the beautiful font used in this project.