Math magicians is a website made using React for all maths fanatics.

Overview

Math Magicians

This Webpage is for a calculator app called Math Magicians and it was built using React!

screenshot

Built With

  • HTML / CSS / JavaScript / React

Getting Started

To launch the project locally:

Step 1:

Step 2:

In the project directory, you can run:

npm start

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

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

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

npm run 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.

npm run 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.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Authors

👤 Zeeshan Haider

🤝 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!

Acknowledgments

📝 License

This project is MIT licensed.

Comments
  • Deployments

    Deployments

    The following changes were implemented in this PR :rice_cracker:

    • Added deployments in Readme

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone 6: Testing

    Milestone 6: Testing

    The following changes were implemented in this Milestone :rice_cracker:

    • Set up React Testing Library.
    • Wrote unit tests for the files operate.js and calculate.js using Jest.
    • Created unit tests for all React components:
    • Used Jest snapshots to test the components.
    • Used React Testing Library to simulate user interaction.

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone 5 : Full Website

    Milestone 5 : Full Website

    The following changes were implemented in this Milestone :fireworks:

    • Added React components for Home, Quotes, and Header.
    • Updated Calculator component to follow the wireframe
    • Updated App.js to include routing
    • Added header such that it displays on each page
    • Added styling to each component using React Basic Styling
    • Added API to get random math quotes

    Thanks for taking out the time to review this project 🧨

    It's really appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone 4

    Milestone 4

    The following changes were implemented in this Milestone

    • Imported useState hook
    • Turned calculator from a Class React component to a functional React Component

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone 3 : Events

    Milestone 3 : Events

    The following changes were implemented in this Milestone

    • Copied the files calculate.js and operate.js into a logic/ directory in the project.
    • Imported the files in the Calculator component.
    • Implement the event handlers.
    • Tested working calculator app in browser

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone 2

    Milestone 2

    The following changes were implemented in this Milestone

    • Deleted all the boilerplate from CRA (text, images, styles).
    • Created a directory called components.
    • Inside components, created a new Calculator.js file.
    • In Calculator.js, created a React component that matches the given design

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Milestone # 1

    Milestone # 1

    The following changes were implemented in this Milestone

    • added linter files
    • used correct Gitflow
    • added documentation
    • created a React application using Create React App

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
Owner
Zeeshan Haider
Electrical Engineer | Front-end developer BS EE from NUST CEME | JavaScript | C++ | Python | Chess & Football enthusiast | Open to new opportunities
Zeeshan Haider
A website made to display poems as a sharing website and resource for students in Singapore American School

7C Poems This is a website made to display poems as a sharing website and resource for students in Singapore American School. It’s made using React, T

null 1 May 20, 2022
Steven Petryk 2k Jan 6, 2023
✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

ashish 10 Sep 6, 2022
Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

Vivek 2.7k Jan 9, 2023
A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

The Sword Breaker 315 Dec 30, 2022
Inject toasts, modals, and more on the fly - all in React

description Inject toasts, modals, and more on the fly - all in React! react-node-inject Installation npm install react-node-inject pnpm install react

Ryan 5 Oct 22, 2022
KeyKey - A typing practice tool writing in react.All ui is reference to keykey

A typing practice tool writing in react.All ui is reference to keykey DEMO Features Keyboard and event listening text generator and input check

Zheng Mao 4 Oct 10, 2022
An all in one preset for writing Preact apps with the vite bundler.

@preact/preset-vite An all in one preset for writing Preact apps with the vite bundler. Features: Sets up Hot Module Replacement via prefresh Enables

Preact 180 Dec 29, 2022
A javascript microframework to shorten daily use CSS class manipulator methods by adding them all into a single method

CSS Class Builder A small typescript package built to work with ReactJS to short

Ankit Mishra 2 Jan 7, 2022
Repository responsible for all code developed during the JavaScript Beginners Series

Série de Vídeos para Iniciantes em JavaScript Uma série de vídeos ensinando conc

Glaucia Lemos 622 Dec 20, 2022
💥 The best all-in-one toolbox. Bazinga!

?? The best all-in-one toolbox. Bazinga!

Zihua Li 101 Nov 24, 2022
Hypersearch enhances all major search engines (Google, DuckDuckGo, Amazon, etc.) with results from trusted sources in the sidebar and removing results from blocked sources

Hypersearch Coming soon for Firefox and Opera. Microsoft Edge users can install from the Chrome store. Hypersearch enhances all major search engines (

Abhinav Sharma 62 Dec 28, 2022
A real estate website built using React and Redux for State Management

Rea Estate Website This is a website build using react and redux for state management. I used the compound component pattern of react. This website in

Kevin Caster 36 Jan 7, 2023
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Leonardo Falcoski 3 Mar 9, 2022
💡 Quiz app made using React & Open Trivia DB.

React-Quiz App Introduction Responsive Quiz App made with React, Open Trivia DB and styled-components. Live Demo Check out the demo here Installation

Aykut Saraç 35 Nov 25, 2022
Is a trivia challenge. Made using React with styled-components.

Trivia - Frontend Test This repository contemplates the requested requirements of Rather Lab. Installation Install the necessary modules: npm install

Federico G. Lopez 1 Dec 24, 2021
WIP: Website for the Lunch Dev / React Podcast community

lunch.dev Welcome to Remix! Remix Docs Customer Dashboard Development From your terminal: npm run dev This starts your app in development mode, rebuil

Lunch.dev Community 8 Sep 18, 2022
Unofficial Devtoberfest leaderboard Website Built With React

Unofficial Devtoberfest leaderboard This is a Next.js project bootstrapped with create-next-app.

nimble 4 May 10, 2022
Pinterest website clone with React and Redux only for learning purposes

Pinterest website clone with React and Redux only for learning purposes. Pinterest is an image sharing and social media service designed to enable saving and discovery of information on the internet using images, and on a smaller scale, animated GIFs and videos, in the form of pinboards.

Sarvesh Mishra 3 Apr 6, 2022