/math-magicians

Primary LanguageJavaScript

Math Magicians

Calculator SPA

This project is a calculator app built as an SPA using React, as part of Microverse projects.

It allows users to make simple calculations and read a random math-related quote.

Things done so far:

1. Setup

  • Set up Git flow
  • Set up React
  • Set up linters
  • Configure deploy

2. Create components

  • Create components based on identified hierarchy
Calculator
- Display
- Keyboard
  - Key(s)
  • Use Grid to for structure styling
  • Implement conditional attributes

3. Implement event handlers

  • Use provided logic files for calculator functions
  • Implement event handler for Key
  • Lift state up to Calculator
  • Pass state as props to Display

4. Refactor with hooks

  • Convert class components to functional components
  • Implement state and memo hooks

5. Add multi-pages and implement routing

  • Implement routing with React Router
  • Create components for based on identified hierarchy for full website:
- Header
  - WebsiteTitle
  - NavigationBar
- Route: Home
  - PageHeading
  - TextBody
- Route: Calculator
  - Display
  - Keyboard
    - Key(s)
- Route: Quote
  - TextBody
  • Add styling with React basic styling

Built With

  • Major languages: JS, SCSS
  • Others: JSX
  • Libraries used: React

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running, follow the steps below in your terminal.

Prerequisites

  • Node.js
  • npm

For more information, view the section Installation in this guide about Node.js and npm.

Setup

Clone the project:

git clone https://github.com/AkashaRojee/math-magicians.git

Install

Install dependencies:

npm install

Usage

The assets are in the src directory.

The output is in the build directory.

Deployment

Note: The content of the default output directory of React (build) is copied to docs upon build to facilitate publishing from GitHub Pages.

To build the website:

npm run build

To serve the website directly:

npm run start

Author

👤 Akasha Rojee

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.