react-multi-apps

This is a collection of multiple smaller applications using React JS, a JavaScript library to make awesome UI by Facebook.

This application uses component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

Babel is used to transpile all JSX code to vanilla JavaScript. For UI creation HTML5 and CSS3 are used.

This is a responsive web application for viewing in both Mobile and Desktop.

For calculation of all the expressions math.js is used.

Features

• Code is rewritten with latest version of React JS.
• Latest features of JavaScript i.e. ESNext is used.
• React code splitting with Suspense feature is added.
• React router is added to maintain it as Single Page Application (SPA).

Calculator

• Enter an expression using the keypad layout shown in the application.
• To get the result of the calculation / expression click the = button.
• It supports all the integer as well as floating point calculations.
• Error messages would be shown if an symbol entered first.
• As the web application is not backed by database / storage no history of the calculation is kept.

Todo List

• Type an item in the input box and press ENTER key to add it in the todo list.
• Deletion of an item is done by clicking the X icon.
• As the application is not backed by any database / storage all the items created or deleted is not persistant.

Clock

• Start clock button is there to start the clock.
• To stop the clock click Stop button.

TicTacToe

• A simple Tictactoe application.
• User moves are denoted by X while Computer moves are shown by O.

Installation

Clone the repository:

$ git clone https://github.com/anijitsao/react-app-simple-calculator.git

Navigate inside the directory and install all dependencies:

$ cd react-app-simple-calculator/dist

# install all dependencies
$ npm install

Run the Application

$ npm start

Open localhost:8080/ page in a web browser and enjoy

tested with latest version of Google Chrome and Mozilla Firefox

Screenshots

Some screens of the application is given below for better understanding.

Desktop as well as Mobile version of the screenshots are given side by side

Initial screen

Entering an expression

Result of the expression

Error screen