React Calculator Standard

A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions.

Go here for live demo.

The application is composed of the following components:

• Header - A heading that displays application title

• Calculator - The primary (root) component for managing all Calculator and underlying component state.

• Display - Displays the calculator input, expression, and history

• History - Displays a list of previously run operations

• ControlPanel - Used to manage calculator interactions that don't relate to calculation operations. For example, it provides functionality to toggle history open and closed

• Keypad - Used to input operands as well as execute various operations against those operands

Component Diagram

The application makes use of the following domain services:

• CalculatorEngine - A domain service that encapsulates calculator logic

Domain Service Diagram

Features:

• Add
• Subtract
• Multiply
• Divide
• Toggle Sign
• Expression Builder
• History
  • Show complete history of entered expressions
  • Clear history
• Clear current value and expression
• Clear everything. Like 'Clear', but clears history as well

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration

Screenshots:

...	...

Developed With

• Visual Studio Code - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• Surge - Static web publishing for Front-End Developers

Related Projects

• react-starter

  A basic template that consists of the essential elements that are required to start building a React application

• react-clicker

  A basic React app that allows one to increase, decrease, or reset a counter

• react-clock-basic

  A basic clock that displays the current date and time

• react-timer-basic

  A basic timer that will start a countdown based on an input of time in seconds

• react-timer-advanced

  A countdown timer that offers an advanced UI experience

• react-masterminds

  A basic game of guessing a number with varying degrees of difficulty

• react-movie-cards

  A basic application that displays a list of movies as a list of cards

• react-bitcoin-monitor

  An app that monitors changes in the Bitcoin Price Index (BPI)

• react-weather-standard

  A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-calculator-standard' repository from GitHub

  git clone https://github.com/drminnaar/react-calculator-standard.git
  

  OR USING SSH

  git clone [email protected]:drminnaar/react-calculator-standard.git
  

• Install node modules

  cd react-calculator-standard
  npm install
  

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build
  

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch
  

Run ESlint

• Lint project using ESLint

  npm run lint
  

• Lint project using ESLint, and autofix

  npm run lint:fix
  

Run

• Run start

  This will run the 'serve' npm task

  npm start
  

• Run webpack dev server

  npm run serve:dev
  

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve
  

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Douglas Minnaar - Initial work - drminnaar