← Back to All Projects
calculator.png

JavaScript Calculator

FreeCodeCamp.org - Front End Development Libraries Project

This is a solution to the Build a JavaScript Calculator project.

Table of contents

Overview

The challenge

Users should be able to:

  • At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of display.
  • In any order, users should be able to add, subtract, multiply and divide a chain of numbers of any length, and when they hit =, the correct result should be shown in the element with the id of display.
  • Users should be able to perform any operation (+, -, *, /) on numbers containing decimal points.
  • When the decimal element is clicked, a . should append to the currently displayed value; two . in one number should not be accepted.
  • If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign). For example, if 5 + * 7 = is entered, the result should be 35 (i.e. 5 * 7); if 5 * - 5 = is entered, the result should be -25 (i.e. 5 * (-5)).
  • Pressing an operator immediately following = should start a new calculation that operates on the result of the previous evaluation.

Additional things I did:

  • The calculator is designed to resemble a keyboard keypad.
  • Users can enter numbers using their keyboard keypad.

My process

Built with

  • Semantic HTML
  • React.js
  • Scss

What I learned

Programming a calculator is hard!

Also, gradients are cool:

.display-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background: linear-gradient(#2396bf, #0d5b77 40%, #004961 3%, #004961);
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin-bottom: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  box-shadow: inset 0px 0px 0px 4px rgba(229, 229, 229, 0.09);
  border-radius: fnc.rem(5);
}

Handling Negative numbers / the Minus sign is particularly tricky:

const handleOperator = (ops) => {
  if (ops === "-" && operand2 === INIT) {
    getOperand(ops);
    return;
  }
  if (ops !== "-" && operand2 === "-") {
    setOperand2(INIT);
  }
  if (operator !== undefined) {
    setOperator(ops);
  }
  if (operand2 === INIT || operand2 === "-") return;
  if (operand1 !== INIT) {
    calculate();
  }
  setOperator(ops);
  if (total.current === 0) {
    setOperand1(operand2);
  } else {
    setOperand1(total.current);
  }
  setOperand2(INIT);
};

Continued development

The calculator does not correctly display numbers that are too long.

I probably need to adjust the getDisplayNumber function from the Web Dev Simplified's code.

Useful resources

Author

Acknowledgments

Thanks to Ms. Jessica Chan (Coder Coder) and all the other YouTube creators making their knowledge available!

← Back to All Projects