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.


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




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(() => { = "auto"; = displayRef.current.scrollHeight + "px";
}, [expression]);

Continued development

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



View Github