"Math magicians" is a website for all fans of mathematics

Related tags

React react javascript reactjs css-grid
Overview

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.
    • Read a random math-related quote.

Screenshots:

  • mobile version

screenshot

  • Desktop version

screenshot

Built With

- Major languages:

  • HTML
  • CSS
  • JavaScript
  • React

- Technologies used:

  • npm
  • Webpack

Learning objectives

  • Set up a React app.
  • Use React documentation.
  • Use React components.
  • Use React props.
  • Use React state.
  • Handle events in a React app.
  • Use React life cycle methods.
  • Understand the mechanism of lifting state up.

Live Demo

Math magicians Live Demo Link

Getting Started

  • In order to see the portfolio in your browser you must click on the link "Live Demo"

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

Prerequisites

  • Node
  • npm

Setup

  • Clone the repository with the command:

$ git clone https://github.com/andres-condezo/math-magicians.git

$ cd math-magicians

  • To install the dependencies run:
$ npm Install

Available Scripts

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.\

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!

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.

Authors

πŸ‘€ AndrΓ©s Condezo Monge

🀝 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
  • Math-magicians Milestone 5: Full website

    Math-magicians Milestone 5: Full website

    Math-magicians Milestone 5: Full website

    Hi there :wave:

    Thanks for taking the time to review my project.

    Changes

    In this milestone:

    • I Created 3 pages: Home, Calculator, and Quote with their own styles importing CSS files.
    • For every page, I created a route

    Get Started

    Visit live demo : β€’ Math Magician Live Demo Link

    or:

    Clone the repository : β€’ $ git clone https://github.com/andres-condezo/math-magicians.git β€’ $ cd math-magicians β€’ $ git checkout full-website β€’ $ npm install β€’ $ npm start

    Any comment or suggestion will be thankfully received.

    opened by andres-condezo 0
  • Math-magicians Milestone 4: Refactor with hooks

    Math-magicians Milestone 4: Refactor with hooks

    Math-magicians Milestone 4: Refactor with hooks

    Hi there :wave:

    Thanks for taking the time to review my project.

    Changes

    In this milestone:

    • I refactored the Calculator component from a class-based component to a functional component with hooks.

    Get Started

    Visit live demo : β€’ Math Magician Live Demo Link

    or:

    Clone the repository : β€’ $ git clone https://github.com/andres-condezo/math-magicians.git β€’ $ cd math-magicians β€’ $ git checkout components β€’ $ npm install β€’ $ npm start

    Any comment or suggestion will be thankfully received.

    opened by andres-condezo 0
  • Math-magicians Milestone 3: Add events

    Math-magicians Milestone 3: Add events

    Math-magicians Milestone 3: Add events

    Hi there :wave:

    Thanks for taking the time to review my project.

    Changes

    In this milestone:

    • I copy the files calculate.js and operate.js into an src/component/logic/ directory.
    • Implemented an event handler to use the math logic from calculate.js and operate.js in my calculator component.

    Get Started

    Visit live demo : β€’ Math Magician Live Demo Link

    or:

    Clone the repository : β€’ $ git clone https://github.com/andres-condezo/math-magicians.git β€’ $ cd math-magicians β€’ $ git checkout components β€’ $ npm install β€’ $ npm start

    Any comment or suggestion will be thankfully received.

    opened by andres-condezo 0
  • Math-magicians Milestone 2: Components

    Math-magicians Milestone 2: Components

    Math-magicians Milestone 2: Components

    Hi there :wave:

    Thanks for taking the time to review my project.

    Get Started

    Visit live demo : β€’ Math Magician Live Demo Link

    or:

    Clone the repository : β€’ $ git clone https://github.com/andres-condezo/math-magicians.git β€’ $ cd math-magicians β€’ $ git checkout components β€’ $ npm install β€’ $ npm start

    Changes

    In this milestone:

    • I deleted all the boilerplate from CRA.
    • I created a directory called components and created a new Calculator.js file.
    • In Calculator.js, I created a React component that matches the original design using class-based components.
    • I developed the calculator UI.

    Any comment or suggestion will be thankfully received.

    opened by andres-condezo 0
  • Math-magicians Milestone 1: Setup

    Math-magicians Milestone 1: Setup

    Math-magicians Milestone 1: Setup

    Hi there :wave:

    Thanks for taking the time to review my project.

    Get Started

    Visit live demo : β€’ Math Magician Live Demo Link

    or:

    Clone the repository : β€’ $ git clone https://github.com/andres-condezo/math-magicians.git β€’ $ git checkout setup β€’ $ npm install β€’ $ npm start

    Changes

    In this milestone I:

    • Set up a React app.

    Any comment or suggestion will be thankfully received.

    opened by andres-condezo 0
Owner
Roberto Andres Condezo Monge
Full-Stack developer / graphic designer, studying at Microverse. JavaScript enthusiast, bedroom guitarist. Stack: React, Python, C. Open to new opportunities
Roberto Andres Condezo Monge
GitHub https://andres-condezo.github.io/math-magicians
"Math magicians" is a website for all fans of mathematics. You can Make simple calculations and Read a random math-related quote.

Math-Magicians This project was bootstrapped with Create React App. "Math magicians" is a website for all fans of mathematics. You can Make simple cal

Sentayhu berhanu 8 Jun 23, 2022
"Math magicians" is a website for all fans of mathematics

Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: - Make simple calculations. - Read a random math-related quote. Built with React and pure CSS

Roberto Andres Condezo Monge 9 Mar 31, 2022
"Math magician is a website for all fans of mathematics. It is a Single Page Application(SPA) that allows users to make simple math calculations and read some math related quotes."

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

Michael_Tamirie 3 Mar 29, 2022
Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

Ranjeet Singh 12 Oct 20, 2022
This website was designed to allow viewers complete access to all movie and tv series trailers. It was created using React + MUI

Trailer - Time ?? Demo https://trailer-time.netlify.app/ ?? about This project is a simplified front end clone of some movie webside (like Netflix/Hul

null 9 Aug 24, 2022
ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Saurav Dhakal 1 Jan 1, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

Bookstore The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that al

Anuar Shaidenov 6 Jun 12, 2022
Terminal Styled Portfolio Website Λ‹( Β° ▽、° ) , a terminal style/styled portfolio website made with <3 using react.

AshTerm A Terminal Styled Portfolio Website. ??‍?? Made Using- βš› Framework ReactJS ?? Terminal react-console-emulator ?? Deployed using CloudFlare Run

ashish 67 Nov 22, 2022
The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live ?? Getting Started Open dev branch Open VSCod

Tadesse Alemayehu 5 May 3, 2022
To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them πŸš€

Slinkity ?? This project is heavily under construction! ?? As excited as you may be, we don't recommend this early alpha for production use. Still, gi

Benjamin Holmes 398 Dec 27, 2022
Get all the Hackathons in one place!

Find Hacks An easy way to find hackathons Technologies Used React.js Flask Heroku Firebase This is an open source project, feel free to contribute. Fo

Parth Arora 21 Sep 8, 2021
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Get an array of all React Spectrum modules, useful for integrating with Next.js

get-react-spectrum-modules This package exports a function that returns an array of all React Spectrum modules that it finds in the node_modules direc

Marc Abramowitz 1 Mar 8, 2022
A React-fullstack platform to track all cryptocurrency in one place.

A React-fullstack platform to track all cryptocurrency in one place. Create your account and add your favorite coins.

Siddharth Singh Bhadoriya 14 Oct 10, 2022
A URL shortener that has zero limits for all your needs

?? GunRecoil A URL shortener that has zero limits for all your needs Demo Link GunRecoil Screenshots Features FREE Unlimited url shortening Roadmap De

null 9 Oct 1, 2022
Auto-claim all games from an itch.io bundle, adding them to your library

itchio-bundle-claimer Auto-claim all games from an itch.io bundle, adding them to your library. For example, "Bundle for Ukraine." How to Use Prerequi

null 14 Jan 2, 2023
Webpack is an open-source JavaScript module bundler. This includes basic setup files to help me not redo all the setups for webpack when starting a new project.

Webpack Setup Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as

Nemwel Boniface 14 Jun 23, 2022
Setup all the linters you like for your react app in 1 minute πŸš€

Create React Linters ?? Setup all the linters you like and don't let ?? slip into your code base! Eslint | Stylelint | Commitlint | Prettier | EditorC

Mo'men Sherif 19 Nov 18, 2022
GitHub action that compares basehead commits and provides all changed files in a pull request or push.

Get PR/push Files Get all added/modified/removed/renamed files in a pull request or push's commits. You can choose to get all files, only added files,

Ruslan Dulina 3 May 21, 2022