Skip to content

The project developed a comprehensive calculator web app, The technologies which are used here are Html, React, JavaScript , Bootstrap@5.3.0 and Css.

License

Notifications You must be signed in to change notification settings

najibullahjafari/math-magicians

Repository files navigation


Math Magicians
# 📗 Table of Contents

📖 Math Magicians

Math Magicians is a web app to work like a calculator, I used React and JSX to build this web app. Screenshot 2023-07-19 131042

🛠 Built With

  • HTML,
  • CSS,
  • Java Script
  • GIT,
  • GITHUB
  • LINTERS
  • Webpack
  • React

Tech Stack

Client
Server

Key Features

  • Linters for code quality
  • Responsive design for different screen sizes
  • In this project best coding practices is used.

🚀 Live Demo

Check out the live demo of this project here.

💻 Getting Started

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

  1. Go to this URL link: https://github.com/najibullahjafari/math-magicians
  2. clone the repo and start working on it.

Prerequisites

In order to run this project you need:

Google Chrome or other browser

  https://www.google.com/chrome/?brand=JJTC&gclid=CjwKCAjw9J2iBhBPEiwAErwpeSDcMFWiIQWj2u5GY6owZ7OaOHw7dYYCHW7uTR4kvYosNJYd4wt4VxoCiywQAvD_BwE&gclsrc=aw.ds

Github Account:

  https://github.com/

Npm installed:

  https://nodejs.org/en/download

Git installed:

  https://git-scm.com/downloads/

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone https://github.com/najibullahjafari/math-magicians

Install

Please do the following steps in this order:

  1. Use npm run build to instal all dependencies.
  2. Then you can run project by npm start command

Linters: If you had any issues with linters for react you can install as bellow:

ESLint

  1. Run
    npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x  @babel/preset-react@7.x @babel/preset-react@7.x
    
    not sure how to use npm? Read this.
  2. Copy .eslintrc.json and .babelrc to the root directory of your project.
  3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
  4. Run npx eslint "**/*.{js,jsx}" on the root of your directory of your project.
  5. Fix linter errors.
  6. IMPORTANT NOTE: feel free to research auto-correct options for Eslint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Stylelint

  1. Run

    npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
    

    not sure how to use npm? Read this.

  2. Copy .stylelintrc.json to the root directory of your project.

  3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.

  4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.

  5. Fix linter errors.

  6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Usage

To run the project, execute the following command:

Open the index.html in your browser

Run tests

To run tests, run the following command:

to check for styling errors:

  npx stylelint "**/*.{css,scss}"

Deployment

You can deploy this project using:

Your working browser.

👥 Authors

👤 Najibullah Jafari

(back to top)

🔭 Future Features

  • [Responsive Version]

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Do you like this project? So don't wait to give one star!

(back to top)

🙏 Acknowledgments

I would like to express my deepest gratitude to Microverse for this project. The invaluable learning experience and support provided have been instrumental in my growth as a developer. My mentors and instructors deserve special thanks for their guidance and patience. The collaborative spirit of my fellow students has been a constant source of inspiration. I also extend my appreciation to the open-source community for their contributions. Lastly, my family and friends' unwavering support has been a driving force throughout this journey. Thank you, Microverse, for this incredible opportunity!

(back to top)

📝 License

This project is MIT licensed.

(back to top)

About

The project developed a comprehensive calculator web app, The technologies which are used here are Html, React, JavaScript , Bootstrap@5.3.0 and Css.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published