Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matrix669/quadratic-function-calculator
https://github.com/matrix669/quadratic-function-calculator
cssmodules framer-motion react reactjs reactrouter routing sass scss
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/matrix669/quadratic-function-calculator
- Owner: Matrix669
- Created: 2024-05-26T16:59:51.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-07T18:36:43.000Z (3 months ago)
- Last Synced: 2024-10-15T17:35:42.874Z (about 1 month ago)
- Topics: cssmodules, framer-motion, react, reactjs, reactrouter, routing, sass, scss
- Language: JavaScript
- Homepage: https://quadratic-function-calculator.netlify.app/
- Size: 309 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## How to run
`npm i` / `npm install`
`npm run dev`
# Demo
[quadratic-function-calculator](https://quadratic-function-calculator.netlify.app/)
# ToDos:
| x | - handle errors - inputs can't be empty
| | - add some animations between routing (optional)
| x | - add a graph
| x | - make RWD
| x | - apply some cool styling
### What app do?
This app calculates the zero spots, delta, whether delta is > 0, = 0, or < 0, and the coordinates of the vertex 'W' based on the selected form of the function and also shows chart
### I have learned:
- simple use of using react routing
- used chart.js a bit### Problem:
- with transitions between routing: first component (this component in which you can choose form function) goes up and exits to the left because the second component is already in the DOM tree but not on the screen due to the initial animation (which moves it from right to left and stops it in the middle).
- in calculations because I forgot that values from inputs are strings and I simply needed to convert them to numbers [resolved ✔]### Screenshots
![quadratic-function-calculator](./public/main-page.png)
![quadratic-function-calculator](./public/next-slide.png)