Frontend Mentor - Calculator app solution

Table of contents

• Overview
  • The challenge
  • Screenshots
• My process
  • Built with
  • Useful resources
• Functionality
  • Theme
  • Keyboard
  • Constraints
  • Errors

Overview

The challenge

Users should be able to:

• See the size of the elements adjust based on their device's screen size
• Perform mathmatical 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

Screenshots

Theme1	Theme 2	Theme 3

My process

Built with

• SolidJS - Simple and performant reactivity for building user interfaces
• big.js - A small, fast, easy-to-use library for arbitrary-precision decimal arithmetic
• Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity
• Cypress - Fast, easy and reliable testing for anything that runs in a browser

Useful resources

• Mozilla's Calculator Test Suite
• Sebastian Marucci's Overcoming Javascript numeric precision issues

Functionality

This calculator should behave similar to the macOS Calculator.

Theme

The theme can be changed by:

• mouse, clicking on the range input
• keyboard, tabbing into the range input and pressing the arrow keys

Keyboard

The keyboard can be used by:

• mouse, clicking on the calculator's keyboard buttons
• keyboard, pressing the equivalent keys on the physical keyboard
  • r for RESET
  • backspace or delete for DEL
• keyboard, tabbing into the calculator's keyboard buttons and pressing enter or space bar

Constraints

• upper limit: 999,999,999.9999
• lower limit: -999,999,999.9999
• decimal precision: 4

Errors

When an error occurs, an alert is shown and the display is cleared.

• [Error] Division by zero
• [Error] Out of bounds
• [Error] Internal error