Calculator

Live Site

https://daniel-naranjo-calculator.netlify.app/

Trello Board

• An accessible, youth-friendly, and responsive component-based Calculator app written with JavaScript  &  React.

• The calculator utilizes JavaScript libraries to implement the fastest build-in methods to solve Math.

• This app is accessible, passing the Lighthouse audits and resolving potential security vulnerabilities.  Performance : 99%

Calculator Acceptance criteria & UI Design

• I can see a number keypad on the calculator with the numbers 0-9
• I can see keys for the plus, subtract, multiply and divide operators.
• I can see an equals = key.
• I can see a +/- key.
• I can see an all clear key AC.
• I can see a "screen" which shows a default value of 0.

Functionality

I can enter readable +/- integers

• I can click a number key and see the number on the screen.
• I can enter multi-digit numbers on the keyboard and see them on the screen.
• When I enter a number of 1,000 or more, I see commas appear in the right place to format the number.
• I can make a positive number negative (or vice versa) with the +/- key.

I can add, subtract, multiply and divide

• I can enter a number, +. another number, then = and see the correct addition result.
• I can enter a number, -. another number, then = and see the correct subtraction result.
• I can enter a number, x. another number, then = and see the correct multiplication result.

ScreenShots

• Operations

  
  

  ---

• Scientific notation

  
  

  ---

• Preserve State

  
  

Libraries

1. math.js

• npm install mathjs
  

  import { create, all } from 'mathjs'
  
  const config = { }
  const math = create(all, config)

2. css-doodle

• npm install css-doodle
  

  import 'css-dodle'

3. React-Toastify

• npm install --save react-toastify

  import { ToastContainer, toast } from 'react-toastify'
  
  import 'react-toastify/dist/ReactToastify.css'
  
  import { Slide, Zoom, Flip, Bounce } from 'react-toastify'

FrontEnd

             

BackEnd

   

made by  _{Daniel Naranjo  2021}