/calculator-fem

Calculator app | Frontend mentor challenge.

Primary LanguageJavaScriptMIT LicenseMIT

Frontend Mentor - Calculator app solution

Hi there 👋

Welcome to my solution to the Calculator app challenge on Frontend Mentor. This was a fun project that helped me learned new concepts and reinforce other ones. All feedback is appreciated 😀🙏

Table of contents

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
  • 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

Screenshot

Calculator Screenshot

Links

My process

Built with

  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library

What I learned

This was my first time using:

  • CSS custom properties.
  • CSS grid.
  • Color scheme media query
  • BEM

I had not implemented a FSM(finite state machine) since university. I had fun remembering about this concept. I also found out about abstractions to implement FSMs easily like XState. I'll probably use XState in the future when I need to use a FSM.

Working with this project helped me solidify concepts regarding React hooks, which I use at my job, but not always since a lot of legacy code is still implemented using class based components.

Continued development

I want to continue familiarizing with CSS grid, I feel I learned enough to use it for this implementation, but there is a lot more to know.

Useful resources

  • CSS custom properties(MDN) - This helped me to learn and use CSS custom properties for the first time. I used custom properties to easily change between different themes.
  • Custom checkboxes/Radios (tutsplus) - This helped me remember how to build custom radio buttons from scratch. I had done this before, but lately I've been using a components library at my job, this is why I needed the refresher.
  • Format numbers to be separated by commas - Since solving this problem was not my focus with this challenge, I took this solution. Also, I learned that some Regex features are not yet supported by all browsers.
  • Dark mode (Josh Comeau blog) - This was my first time implementing dark mode or custom themes in a web app, and Josh Comeau's article was very helpful.
  • 3D button (Josh Comeau blog) - I remembered reading this article and wanting to use a 3D button in some project. Even though I didn't use the exact same implementation as the article, it helped me have a good idea of what I should do.
  • CSS Grid for the number pad - First time using CSS grid. This website was very useful.
  • Module bundling with Parcel(Brian Holt) - I wante to give Parcel a try. It turned out to be really easy to use.

Author