Javascript Calculator

Role

UI/ UX Designer

Front-end Developer

Stack

HTML5

CSS3

ES6

Service workers

PWA

Time

Jun 28 -

Jul 1, 2020


Summery

The majority of existing digital calculators do not display the calculation process. When a user performs a long calculation, it brings a lot of troubles since it is easy to forget or mistype a digit. Thus, the user has no choice but to start over. The project built by javascript aims to solve this problem by displaying both the process of calculating and the end result.

The project, which is deployed on Netlify, is a progressive web application(PWA) so offline mode is supported. Beside, this project utilizes immediate execution logic and fixes the js numeric precision issue by applying a third-party library, Decimal light.js.

Live Demo


Design Goal

  • Display each calculation step until the calculation is done
  • Clear visual hierarchy between calculating digits and the end result
  • Smooth pressing interaction with salient user feedback
  • Responsive web design(RWD) across mobile devices(e.g. mobile phone, tablet)

User Interface Design

The user interface of the calculator was designed based on the core of Neumorphism, which became a popular visual design trend that blends techniques from skeuomorphism, realism, and flat design in late 2019. One of the advantages of neumorphic button is the salient user feedback while the button is active or inactive.

Design system of user interface
Design system of user interface
Contextual rendering of cross-platform design
Contextual rendering of cross-platform design

Web Development

The project was developed in javascript while the animation was created with CSS. Besides, Service Workers was utilized to turn this project into a progressive web application(PWA) and make it work offline. At the end, the project was deployed on Netlify.

In javascript, there are numeric precision issues, which would be problematic for a calculation project. Therefore, Decimal light.js is used to not only fix the problem but also perform the operation instead of eval(), which is a dangerous function and exposes users to high security risks according to MDN.

Future Development

Currently, the calculator offers only the basic arithmetic. It is possible to upgrade the existing calculator to a scientific one by adding more advanced arithmetic like the factorial function, trigonometric functions and so on.