Math magicians is a single page app for all mathematics lovers. Math Magicians allow users to perform simple calculations and It generates mathematics quotes.

Related tags

CSS css reactjs
Overview

Math Magicians

Math Magician is a single Page App that have three interfaces. It allows users to perform simple math calculations, user can read the mathematics background history and random mathematics quotes.

App Screenshoot

Built with

  • React.js
  • CSS

Live Demo

Visit live demo here

installation

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

  • clone the repository by running https://github.com/levy002/Math-Magician.git
  • navigate to the folder cd <DIRECTORY>
  • Install packages npm i
  • Run the app npm start

Author

Ukwishaka Levy

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Math magicians app Web site created using create-react-app

Comments
  • Calculator-Logic

    Calculator-Logic

    Description

    In this PR, we implemented the calculator logic.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] copied calculate.js and operate.js files into a logic/ directory.
    • [x] addes big.js as dependency.
    • [x] implemented the event handlers .

    Live Demo

    Visit live demo here

    Happy reviewing πŸ˜ƒ

    opened by levy002 1
  • Calculator-components

    Calculator-components

    Description

    In this PR, we created the Calculator components.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] deleted all the boilerplate from CRA (text, images, styles).
    • [x] created a directory called components.
    • [x] create a new calculator.js file inside components .
    • [x] developed the UI of the calculator.
    • [x] used class based components.
    • [x] imported it and used it in our main component App.js.

    Happy reviewing πŸ˜ƒ

    opened by levy002 1
  • Project initiation

    Project initiation

    Description

    In this PR, we initiated a Math magicians project.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] created React application by using create-react-app.

    Happy reviewing πŸ˜ƒ

    opened by levy002 1
  • Testing components

    Testing components

    Description

    In this PR, we wrote unit tests for all components.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] wrote unit tests for the files operate.js and calculate.js using Jest.
    • [x] created unit tests for all components.
    • [x] ran full tests suite using Jest. All tests passed.

    Live Demo

    Visit live demo here

    Happy reviewing πŸ˜ƒ

    opened by levy002 0
  • App UI

    App UI

    Description

    In this PR, we created three(3) app pages and a route for each page.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] created a website consisting of 3 pages: Home, Calculator, and Quote.
    • [x] styled the pages.
    • [x] created a route for every page.
    • [x] displayed navigation links for all 3 routes on each page.
    • [x] used React Router to make the routes work.

    Live Demo

    Visit live demo here

    Happy reviewing πŸ˜ƒ

    opened by levy002 0
  • Refactor components with using hooks

    Refactor components with using hooks

    Description

    In this PR, we refactored the Calculator components from a class-based component to a functional component with hooks.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    Milestone requirements, We:

    • [x] refactored the Calculator components from a class-based component to a functional component.
    • [x] used react hooks to change the state.

    Live Demo

    Visit live demo here

    Happy reviewing πŸ˜ƒ

    opened by levy002 0
Owner
levy_ukwishaka
Full-stack software developer with a love for javascript. I am currently looking for new opportunities. Tech stack: Javascript | React
levy_ukwishaka
GitHub https://math-magician-202.netlify.app/
Automatic GatsbyJS App Landing Page - Automatically generate iOS app landing page using GatsbyJS

Automatic GatsbyJS App Landing Page Create and deploy an iOS app landing page on GitHub Pages and Netlify in a couple of minutes ?? Fork this repo ??

Imed Adel 173 Jan 1, 2023
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.

Jonny Chen 15 Dec 29, 2022
A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Start Bootstrap 996 Dec 26, 2022
A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Start Bootstrap 327 Dec 18, 2022
πŸ–Ό A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
FREE Bootstrap Landing Page Template for Developers and Startups

Theme Details & Demo Details: https://themes.3rdwavemedia.com/bootstrap-templates/startup/appkit-landing-free-bootstrap-theme-for-developers-and-start

Xiaoying Riley 158 Nov 30, 2022
A Unique Food order landing page web application called 'HOMELY' where you can select available meals and add them to cart then order them.

End Result Click the link : https://foodapp-by-eniola.netlify.com Getting Started with Create React App This project was bootstrapped with Create Reac

Eniola Odunmbaku 26 Dec 31, 2022
A responsive, Bootstrap landing page template created by Start Bootstrap

Start Bootstrap - Landing Page Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap. Preview View Live Previe

Start Bootstrap 1.4k Jan 3, 2023
Minimal landing page for developers

Dev Landing Page Minimal landing page for developers. Developers don't talk much. Their code does all the talking. So here's a minimal landing page fo

Dinesh Pandiyan 1.2k Jan 4, 2023
Increase your landing page conversion rates.

Ouibounce Originally created by Carl Sednaoui from MailCharts. Maintained and improved by generous contributors. Ouibounce: A small library enabling y

Carl Sednaoui 2.3k Dec 9, 2022
Esri GitHub landing page

esri.github.io Landing page for Esri open source projects. Both the project categories and search suggestions in http://esri.github.io are powered by

Esri 470 Dec 31, 2022
Tailwind CSS Starter Template - Landing Page

Tailwind Toolbox - Landing Page Template Landing Page is an open source, generic landing page template for Tailwind CSS created by Tailwind Toolbox. G

Tailwind Toolbox 908 Jan 8, 2023
Landing page starter

?? Fresh Fresh is a free landing page starter built by cssninjaStudio. ✌️ preview Check out the live demo by clicking here. Fresh is built with Bulma

cssninja 486 Dec 23, 2022
Startup Landing Page Components for React.js

neal-react neal-react is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't

Denny Britz 1.4k Nov 30, 2022
Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo Read the blog post Checkout the demo Developing By default, the content on the site is based off our public Notion page.

Vercel 389 Dec 21, 2022
πŸŒ† Here I've aggregated some of the most commonly used web-page templates made using Bootstrap4 πŸ›’

Web-page component templates using bootstrap4 Here are some of the most common web-page templates made using bootstrap4 Login page Create-Account or S

Akash Giri 89 Dec 30, 2022
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 587 Jan 2, 2023
Free responsive one page portfolio template

Portfolio one page template - ARCHIVED Flat and responsive website template, designed and coded by Maxim Orlov. Demo: http://website-templates.github.

Website templates 164 Jan 2, 2023
Micua home page

Micua Home（a webapp templateοΌ‰ Features Please see our gulpfile for up to date information on what we support. CSS Autoprefixing Built-in preview serve

Micua 73 Jan 26, 2022