A Math Magicians Calculator built with React.

Overview

Math Magicians Calculator

This is a Calculator I built with React employing hooks and best practices, such as lift state, destructuring, and passing props to child components. It was bootstrapped with Create React App.

About

Math Magicians can compute all basic math operations. I used hooks to handle state. Invalid operation errors are successfully handled through useEffect.

Features:

  • Perform basic arithmetic operations
  • View operations in display
  • Perform chain operations

Live Demo

See demo here https://starsheriff2.github.io/Math-Magicians-Calculator/

Built With

  • HTML, CSS, JS
  • NPM 7.18.1
  • big.js 5.2.2
  • prop-types 15.7.2
  • react 17.0.2
  • Jest-dom 5.11.4
  • gh-pages 3.2.3
  • Linters: ESLint, Stylint
  • VS Code

Getting Started

To get a local copy up and running, follow these simple example steps.

Prerequisites

  • A browser to open the main file
  • Node.js
  • NPM
  • Yarn

Setup

  1. Open your terminal or command prompt.
  2. If you do not have git installed in your system, skip this step and go to step 3; otherwise, go to the directory where you want to copy the project files and clone it by copying this text into your command prompt/terminal: [email protected]:StarSheriff2/Math-Magicians-Calculator.git.
    Now go to the "Install Dependencies" section
  3. Download the program files by clicking on the green button that says “Code” on the upper right side of the project frame.
  4. You will see a dropdown menu. Click on “Download ZIP.”
  5. Go to the directory where you downloaded the ZIP file and open it. Extract its contents to any directory you want in your system.

Install Dependencies

  1. Go to the root directory of the project
  2. In your command line, while in the root dir, type npm install. It will install all necessary dependencies in your project files
  3. Now type yarn start. It will load the project in your default browser.

    Note:
    This command will not stop on its own. If you change something in your project files, it will recompile and reload the page in your browser. To exit, hit "ctrl + c"

Development

Bundle project

  • yarn build

Testing

To test, run

  • yarn test

Linters

To run the linters included in this repository, go to the root directory of your repository and copy/paste the following commands into your terminal: (Note: Make sure you run npm install before you do this)

  • for ESlint, npx eslint.
  • for Stylelint, npx stylelint "**/*.{css,scss}"

All Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint warnings in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Usage

  • You will need a mouse to be to use for the moment

Author

👤 Arturo Alvarez

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

🤝 Acknowledgements

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • Full website

    Full website

    Hi Code Reviewer,

    In this feature branch, I added 2 new pages to the Calculator app.

    I did the following on these pages:

    • used React Router to build this SPA.
    • created one route for each page
    • used CSS basic styling to style each page
    opened by StarSheriff2 1
  • M3 events

    M3 events

    Hello Code Reviewer 😸 ,

    In this feature branch I wired all the logic to the DOM:

    • Display values in the display
    • Show total in the display when appropriate
    • Use lift state, passing of props to child components, and destructuring in React components
    • Keep code DRY
    opened by StarSheriff2 1
  • Refactored Calculator.js by implementing hooks

    Refactored Calculator.js by implementing hooks

    Hi Code Reviewer 😃 ,

    In this feature branch I did the following:

    • Refactored all components from class based components to functional components with hooks
    • Used try/catch to handle error in Calculator.js
    • Use useEffect to handle errors
    opened by StarSheriff2 0
  • M2 components

    M2 components

    Hi Code Reviewer 😸,

    In this feature branch I did the following:

    • Create a directory called components.
    • Inside components, I create a new Calculator.js file.
    • In Calculator.js, I create a React component that matches the provided design.
    • Used class-based components.
    • Imported it and use it in the main component (App.js).
    • Created a grid-based design.
    • Separated each distinguishable part of the calculator into a separate component:
      • Display
      • Other operations
      • Digits
      • Operators
      • Equals sign
    opened by StarSheriff2 0
  • create initial README file

    create initial README file

    In this Pull request, I'm creating the README file.

    I created the app in the development branch already. I am aware that I should have done this in a feature branch, but I usually set up all dependencies in the development branch when I start a new project.

    opened by StarSheriff2 0
Owner
Arturo Alvarez
Full-stack Web Developer | student at Microverse.com | CSS, HTML, Ruby, Rails, and JavaScript | Open to new opportunities
Arturo Alvarez
A Math Magicians Calculator built with React.

Math Magicians Calculator This is a Calculator I built with React employing hooks and best practices, such as lift state, destructuring, and passing p

Arturo Alvarez 3 Aug 23, 2021
"Math magicians" is a website for all fans of mathematics built using React and Bootstrap.

Math Magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations

Dico Diaz Dussan 6 Dec 6, 2021
Math-magicians - Leadboard App Built With React.Js

LEADBOARD APP "Math magicians" is a website for all fans of mathematics. It is a

Aime Malaika 3 Feb 25, 2022
Math magicians - A website for all fans of mathematics Built with React and pure CSS

Math magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations

Roberto Andres Condezo Monge 9 Mar 31, 2022
Math magicians is a website for all fans of mathematics which you can make simple calculations. Built with React.

Math Magicians is a website for all fans of mathematics which you can make simple calculations. Built with React.

Leonardo Goss 3 Mar 24, 2022
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Awais Amjed 12 Jul 28, 2022
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

SarvarKhalimov 8 Jun 22, 2022
"Math Magician" is an application created in React designed for math lovers

Math Magicians "Math Magicians" is an app for mathlovers. It was created using React! Hope you like it. Built With React, SASS Visual Studio Code. Liv

Carlos HerverSolano 7 Mar 23, 2022
Calculator-with-React - A Simple Calculator Made with React

Simple Calculator - Made with React This project is a calculator based on the Ip

Gabriel Pessoni 18 Nov 23, 2022
Calculator - a modern style app which provides a standard calculator functionality written in ReactJS

Calculator ReactJs/Hooks/Typescript/Jest This Calculator is a modern style app which provides a standard calculator functionality, it is written in Re

Jose 1 Apr 3, 2022
⚡️Clone of macOS calculator built with react.

Clone of macOS calculator built with react Purpose of this project to learn basic React. Checkout the demo ⚡️ PWA ready with offline support. How to r

Chamoda Pandithage 42 Dec 18, 2022
A simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar with legacy code.

Simple Calculator This is a simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar w

Emanuel Okello 7 Aug 8, 2021
A calculator app to be built using the React Library for JavaScript

React Calculator A calculator app to be built using the React Library for JavaScript Built With React JS Library HTML CSS Getting Started To set up a

Akshay 4 Jul 22, 2021
Calculator app challenge built with react.js

Frontend Mentor - Calculator app solution This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you i

Dulranga Dhawanitha 10 Apr 25, 2022
Tip calculator app built using react.js

Tip calculator app Live verzia Tip calculator app Ďalšie projekty: GitHub Popis funkcii: function checkInput() funkcia kontroluje či je vyplenený inpu

null 1 Feb 12, 2022
Math Magician App - A web app developed using React

Math Magician App A web app developed using React. It's a simple calcualtor application. It also has a small router for about pages. Other than calcul

Ritobroto Mukherjee 7 Sep 8, 2022
Mathemagician is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.

"Mathemagician" is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.

Alexander Oguzie-Ibeh 11 Apr 22, 2022
A Single Page App (SPA) that allows users to make simple calculations and read a random math-related quotes.

This is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote. The aim of this project is to learn how to use React.

Favour Ezeugwa 10 Dec 7, 2022
Worlde but Math

NERDLE Worlde but Math ?? Features Mobile Friendly Remote configuration Tested for + - ^ % / operators Typesafe (Typescript) Virtual Keyboard / Mobile

Ayush Paharia 4 Jul 25, 2022