README.md

Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor.

Table of contents

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

Overview

Users is able to:

• Adjust calculator size based on user's browser size
• Perform simple math calculation such as addition, subtraction, division, and multiplication
• User is able to change color scheme
• App automatically detect browser's prefers-color-scheme

Screenshot

Links

• Solution URL: https://github.com/williamafil/fm-calculator-app
• Live Demo URL: https://calc-app-lime.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind CSS
• ReactJS
• Vite

What I learned

Theme Switcher

I got idea on achieving toggle between three themes from this website. I simply have preset color scheme in tailwind.config.js and setup custom properties in css file. In react App element I bind a custom class 'theme-one' which refers to the custom css properties.

<div id="App" class="theme-one">...</div>

/* DARK */
#App.theme-one {
  @apply bg-dark-mainBg h-screen text-dark-text;
}

#App.theme-one .switch-bg {
  @apply bg-dark-switchBg;
}

A Complete Guide to Dark Mode on the Web: Using Custom Properties - CSS Tricks

defaultValue vs value

In React, defaultValue is used with uncontrolled form components whereas value is used with controlled form components. ... They should not be used together in a form element.

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.

Continued development

• Key press detection. User is able to insert numbers and operators using keyboard
• Solve decimal problem

Useful resources

• A Complete Guide to Dark Mode on the Web - This helped me for dark/light mode.
• Detecting Dark Mode with Javascript - Nice article on detecting prefer-color-scheme using JavaScript

Author

• Website - William Kang
• Frontend Mentor - @williamafil