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.

Table of contents

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

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

Links

• Solution URL: Click Here
• Live Site URL: Click Here

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

• Website - dulranga.ml
• Frontend Mentor - @dulranga
• Twitter - @dulrangaD