Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote.

Last update: Feb 26, 2022

Related tags

Overview

Math Magicians

Math Magicians is the first React Project I'm building. The main objective of this is to understand React features with a project-based learning approach. This is using them directly

Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote.

Built With

HTML/CSS and JavaScript
React Framework
Visual Studio Code

Live Demo

Heroku Live Demo Link
Netlify Live Demo Link

Getting Started

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

Clone this repository with git clonehttps://github.com/JohnFTitor/math_magicians.git using your terminal or command line.
Change to the project directory by entering :
cd math_magicians in the terminal

Prerequisites

You need to make sure to have installed the latest version of Node.js and npm on your computer.

Setup

You can clone this repository or simply download the files as a .zip If you want to set up a personal repository based on this one, you can as well fork it.

Install

After clone it and before working on it, you have to run npm install so that all the dependencies of the project get downloaded in your pc locally. Such dependencies include React app and linters checks, for which you have to install the files following the wget commands inside linters.yml file.

Usage

You're free to use this project however you like it for educational purposes. Just keep in mind the acknowledgment described below

To work on the project, run npm start in your terminal to deploy a live version of the development. This works in watch mode so it automatically reloads any need change you make to the files.

Run linters checks

Linter Checks are automatically run with Github actions when there's a pull request. If you want to run them locally, remember to have the config file in the root of the local project.

Deployment

The deployment can be found in through any of the links provided above

Authors

👤 Andrés Felipe Arroyave Naranjo

GitHub: @JohnFTitor
Twitter: @johnftitor
LinkedIn: Andres

Acknowledgments

Here's a link to the API GitHub Repo from which I got the data for the quotes. Special thanks to the author!

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments

Math Magicians V1.0.3
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Now into the project...

Changes implemented in "dev" branch

✅ Fix reloading error.

✅ Add links to README.md

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
bug enhancement
opened by JohnFTitor 0
Documentation
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Now into the project...

Changes implemented in "list-structure" branch

✅ Add Links to live version in both Cloud Application Platforms.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
opened by JohnFTitor 0
Math Magicians 1.0.2
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Now into the project...

Changes implemented in "dev" branch

✅ Add Netlify Deployment

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
opened by JohnFTitor 0
Add netlify deployment
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Now into the project...

Changes implemented in "netlify" branch

✅ Add Netlify files

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Math Magicians V1.0.1
Hi there 👋🏻

Thanks for taking the time to review the project

Now into the project...

Last Changes implemented in "dev" branch

✅ Fix deployment issues as mentioned in #7.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
opened by JohnFTitor 0
Heroku deploy
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Now into the project...

Changes implemented in "heroku-deploy" branch

✅ Fix issues with deploying by adding node version, updating dependencies and removing eslintConfig

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
bug
opened by JohnFTitor 0
Math Magicians V1
Hi there 👋🏻

Thanks for taking the time to review the project

Now into the project...

Changes implemented in "calculator-layout" branch

✅ My code follows the style guidelines of this project.

✅ Created Calculator component inside components folder.

✅ Calculator component is class-based.

✅ Create additional components for buttons.

✅ Separate Styles in a different folder. Create styles files for different components.

Changes implemented in "events" branch

✅ Add provided files (calculate.js and operate.js) to a logic folder.

✅ Add an event handler to the calculator buttons using lift state up to share the same calculator object info.

✅ Create Display component to handle the data and display it in the calculator.

✅ Fix dot bug.

✅ Add a span that shows direct feedback of the operation being done and the total saved.

Changes implemented in "refactor-hooks" branch

✅ Change all components of the Calculator app from class-based to functional-based.

✅ Use hooks to handle states in functional components.

✅ Use ES6 syntax for function declaration.

✅ Use lifting state up to update the Calculator object.

Changes implemented in "navigation" branch

✅ Created page components to hold different pages.

✅ Used React Router to navigate between different pages following the SPA model.

✅ Add styles through different CSS files.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Navigation
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Quotes API

In order to display Mathematician quotes, the project retrieves data from an external API. Info about it can be found in the acknowledgment section of the README.md file

Now into the project...

Changes implemented in "navigation" branch

✅ Created page components to hold different pages.

✅ Used React Router to navigate between different pages following the SPA model.

✅ Add styles through different CSS files.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Refactor hooks
Hi there 👋🏻

Thanks for taking the time to review the project.

Now into the project...

Changes implemented in "refactor-hooks" branch

✅ Change all components of the Calculator app from class-based to functional-based.

✅ Use hooks to handle states in functional components.

✅ Use ES6 syntax for function declaration.

✅ Use lifting state up to update the Calculator object.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Events
Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Bug Fixing

I manipulated the calculate.js file to fix a bug. When the dot button was pressed without any number or after an operation button, the decimal was not being added because of the logic implemented in the return statements. You can refer here for a more detailed description of the issue:

https://github.com/microverseinc/curriculum-react-redux/issues/87

Now into the project...

Changes implemented in "events" branch

✅ Add provided files (calculate.js and operate.js) to a logic folder.

✅ Add an event handler to the calculator buttons using lift state up to share the same calculator object info.

✅ Create Display component to handle the data and display it in the calculator.

✅ Fix dot bug.

✅ Add a span that shows direct feedback of the operation being done and the total saved.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0
Calculator layout
Hi there 👋🏻

Thanks for taking the time to review the project

Now into it...

Changes implemented in "calculator-layout" branch

✅ My code follows the style guidelines of this project.

✅ Created Calculator component inside components folder.

✅ Calculator component is class-based.

✅ Create additional components for buttons.

✅ Separate Styles in a different folder. Create styles files for different components.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.
enhancement
opened by JohnFTitor 0