Frontend Mentor – Calculator app solution

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.

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

Screenshot

calculator

Links

My Process

Built with

  • Flexbox
  • CSS variables
  • CSS Grid
  • React – JS library
  • Next.js – React framework

What I learned

  • Splitting number with comma 122,212,654

"124539493".replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  • Resize the display panel when expression get long

useLayoutEffect(() => {
  displayRef.current.style.height = "auto";
  displayRef.current.style.height = displayRef.current.scrollHeight + "px";
}, [expression]);

Continued development

  1. Add keyboard listeners
  2. Keyboard shortcuts to toggle theme
  3. More Arithmetic Operations

Author

GitHub

View Github