https://github.com/najibullahjafari/math-magicians
The project developed a comprehensive calculator web app, The technologies which are used here are Html, React, JavaScript , Bootstrap@5.3.0 and Css.
https://github.com/najibullahjafari/math-magicians
calculator calculator-application calculator-with-react css github html javascript linters magician math react
Last synced: about 1 month ago
JSON representation
The project developed a comprehensive calculator web app, The technologies which are used here are Html, React, JavaScript , Bootstrap@5.3.0 and Css.
- Host: GitHub
- URL: https://github.com/najibullahjafari/math-magicians
- Owner: najibullahjafari
- License: mit
- Created: 2023-07-11T02:58:58.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2023-08-04T23:49:48.000Z (about 2 years ago)
- Last Synced: 2024-12-28T21:26:17.623Z (10 months ago)
- Topics: calculator, calculator-application, calculator-with-react, css, github, html, javascript, linters, magician, math, react
- Language: JavaScript
- Homepage:
- Size: 1.18 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Math Magicians
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
Math Magicians is a web app to work like a calculator, I used React and JSX to build this web app.
- HTML,
- CSS,
- Java Script
- GIT,
- GITHUB
- LINTERS
- Webpack
- React
Client
Server
- Linters for code quality
- Responsive design for different screen sizes
- In this project best coding practices is used.
Check out the live demo of this project [here](https://mathnajib.netlify.app/).
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
```sh
https://www.google.com/chrome/?brand=JJTC&gclid=CjwKCAjw9J2iBhBPEiwAErwpeSDcMFWiIQWj2u5GY6owZ7OaOHw7dYYCHW7uTR4kvYosNJYd4wt4VxoCiywQAvD_BwE&gclsrc=aw.ds
```
Github Account:
```sh
https://github.com/
```
Npm installed:
```sh
https://nodejs.org/en/download
```
Git installed:
```sh
https://git-scm.com/downloads/
```
### Setup
Clone this repository to your desired folder:
```sh
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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._
2. Copy [.eslintrc.json](./.eslintrc.json) and [.babelrc](./.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](https://eslint.org/docs/latest/user-guide/command-line-interface#fixing-problems) 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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._
2. Copy [.stylelintrc.json](./.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](https://stylelint.io/user-guide/usage/options) 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:
```sh
npx stylelint "**/*.{css,scss}"
```
### Deployment
You can deploy this project using:
Your working browser.
👤 **Najibullah Jafari**
- GitHub: [Najibullah_jafari](https://github.com/najibullahjafari)
- Twitter: [Najibullah_jafari](https://twitter.com/Najib_Jafari_)
- LinkedIn: [Najibullah_jafari](https://www.linkedin.com/in/najibulla-jafari-609852263/)
- **[Responsive Version]**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/najibullahjafari/math-magicians/issues).
Do you like this project? So don't wait to give one star!
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!
This project is [MIT](./LICENSE) licensed.