/src/__mocks__/styleMock.js"
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Salimer/Math-magicians/fdbe626b980c27cc3fdf57e8c5dc273816a3fb18/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Math Magicians
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 |
36 | to {
37 | transform: rotate(360deg);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from 'react-router-dom';
2 |
3 | import Home from './routes/Home';
4 | import Quote from './routes/Quote';
5 | import Calculate from './routes/Calculate';
6 | import NotMatch from './routes/NotMatch';
7 | import Layout from './components/Layout';
8 |
9 | const App = () => (
10 |
11 |
18 | );
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/src/__tests__/Calculator.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, fireEvent } from '@testing-library/react';
3 | import '@testing-library/jest-dom/extend-expect'; // Import extend-expect
4 | import Calculator from '../components/Calculator';
5 |
6 | test('renders Calculator correctly', () => {
7 | const { container } = render(
9 | ,
11 | );
12 | expect(container).toMatchSnapshot();
13 | });
14 |
--------------------------------------------------------------------------------
/src/__tests__/Navbar.test.js:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import { MemoryRouter } from 'react-router-dom';
3 | import Navbar from '../components/Navbar';
4 |
5 | test('renders Navbar correctly', () => {
6 | const { container } = render(
7 |
8 | ,
10 | );
11 | expect(container).toMatchSnapshot();
12 | });
13 |
--------------------------------------------------------------------------------
/src/__tests__/NumbersBtns.test.js:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import NumbersBtns from '../components/NumbersBtns';
3 |
4 | test('renders numbers buttons correctly', () => {
5 | const handleButtonClick = jest.fn();
6 | const { container } = render(
7 |
5 |
8 |
11 | 0
12 |
13 |
16 |
20 | ÷
21 |
22 |
26 | x
27 |
28 |
32 | -
33 |
34 |
38 | +
39 |
40 |
44 | =
45 |
46 |
47 |
50 |
54 | AC
55 |
56 |
60 | +/-
61 |
62 |
66 | %
67 |
68 |
72 | 7
73 |
74 |
78 | 8
79 |
80 |
84 | 9
85 |
86 |
90 | 4
91 |
92 |
96 | 5
97 |
98 |
102 | 6
103 |
104 |
108 | 1
109 |
110 |
114 | 2
115 |
116 |
120 | 3
121 |
122 |
126 | 0
127 |
128 |
132 | .
133 |
134 |
135 |
136 |
5 |
8 |
11 |
12 | Math Magicians
13 |
14 |
43 |
44 |
45 |
5 |
8 |
9 | Math Magicians
10 |
11 |
40 |
41 |
5 |
8 |
12 | AC
13 |
14 |
18 | +/-
19 |
20 |
24 | %
25 |
26 |
30 | 7
31 |
32 |
36 | 8
37 |
38 |
42 | 9
43 |
44 |
48 | 4
49 |
50 |
54 | 5
55 |
56 |
60 | 6
61 |
62 |
66 | 1
67 |
68 |
72 | 2
73 |
74 |
78 | 3
79 |
80 |
84 | 0
85 |
86 |
90 | .
91 |
92 |
93 |
5 |
8 |
12 | ÷
13 |
14 |
18 | x
19 |
20 |
24 | -
25 |
26 |
30 | +
31 |
32 |
36 | =
37 |
38 |
39 |
22 | { next || operation || total || 0 }
23 |
26 | );
27 | }
28 |
29 | export default Calculator;
30 |
--------------------------------------------------------------------------------
/src/components/FetchQuote.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | const FetchQuote = () => {
4 | const [data, setData] = useState([]);
5 | const [loading, setLoading] = useState(false);
6 | const [error, setError] = useState(false);
7 |
8 | useEffect(() => {
9 | const fetchData = async () => {
10 | try {
11 | setLoading(true);
12 | const response = await fetch('https://api.api-ninjas.com/v1/quotes?category=alone', {
13 | headers: {
14 | 'X-Api-Key': 'vZdI6eGz2cS+jTb71dvouA==X8Xd3lMbKviCRmqW',
15 | },
16 | });
17 | if (!response.ok) {
18 | throw new Error('Request failed');
19 | }
20 | const fetchedData = await response.json();
21 | setData(fetchedData);
22 | setLoading(false);
23 | } catch (error) {
24 | setError(true);
25 | setLoading(false);
26 | }
27 | };
28 |
29 | fetchData();
30 | }, []);
31 |
32 | if (error) return Something went wrong!
;
33 |
34 | if (loading) return Loading...
;
35 |
36 | return (
37 |
38 | {data.map((item) => (
39 |
40 | {item.quote}
41 | {' '}
42 |
47 | ))}
48 |
49 | );
50 | };
51 |
52 | export default FetchQuote;
53 |
--------------------------------------------------------------------------------
/src/components/Layout.js:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router-dom';
2 | import Navbar from './Navbar';
3 |
4 | const Layout = () => (
5 |
6 |
9 | );
10 | export default Layout;
11 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import { NavLink } from 'react-router-dom';
2 |
3 | const links = [
4 | { path: '/', text: 'Home' },
5 | { path: '/calculate', text: 'Calculate' },
6 | { path: '/quote', text: 'Quote' },
7 | ];
8 | const Navbar = () => (
9 |
10 | Math Magicians
11 |
12 | {links.map((link) => (
13 |
14 | {link.text}
15 |
16 | ))}
17 |
18 |
19 | );
20 | export default Navbar;
21 |
--------------------------------------------------------------------------------
/src/components/NumbersBtns.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | function NumbersBtns({ handleButtonClick }) {
4 | return (
5 |
6 | AC
7 | +/-
8 | %
9 | 7
10 | 8
11 | 9
12 | 4
13 | 5
14 | 6
15 | 1
16 | 2
17 | 3
18 | 0
19 | .
20 |
21 | );
22 | }
23 |
24 | NumbersBtns.propTypes = { handleButtonClick: PropTypes.func.isRequired };
25 |
26 | export default NumbersBtns;
27 |
--------------------------------------------------------------------------------
/src/components/OperatorBtns.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | function OperatorBtns({ handleButtonClick }) {
4 | return (
5 |
6 | ÷
7 | x
8 | -
9 | +
10 | =
11 |
12 | );
13 | }
14 |
15 | OperatorBtns.propTypes = { handleButtonClick: PropTypes.func.isRequired };
16 |
17 | export default OperatorBtns;
18 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family:
4 | -apple-system,
5 | BlinkMacSystemFont,
6 | 'Segoe UI',
7 | 'Roboto',
8 | 'Oxygen',
9 | 'Ubuntu',
10 | 'Cantarell',
11 | 'Fira Sans',
12 | 'Droid Sans',
13 | 'Helvetica Neue',
14 | sans-serif;
15 | -webkit-font-smoothing: antialiased;
16 | -moz-osx-font-smoothing: grayscale;
17 | }
18 |
19 | code {
20 | font-family:
21 | source-code-pro,
22 | Menlo,
23 | Monaco,
24 | Consolas,
25 | 'Courier New',
26 | monospace;
27 | }
28 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import './index.css';
5 | import App from './App';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
13 | ,
14 | );
15 |
16 | // If you want to start measuring performance in your app, pass a function
17 | // to log results (for example: reportWebVitals(console.log))
18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19 |
--------------------------------------------------------------------------------
/src/logic/calculate.js:
--------------------------------------------------------------------------------
1 | import operate from './operate';
2 |
3 | function isNumber(item) {
4 | return !!item.match(/[0-9]+/);
5 | }
6 |
7 | /**
8 | * Given a button name and a calculator data object, return an updated
9 | * calculator data object.
10 | *
11 | * Calculator data object contains:
12 | * total:s the running total
13 | * next:String the next number to be operated on with the total
14 | * operation:String +, -, etc.
15 | */
16 | export default function calculate(obj, buttonName) {
17 | if (buttonName === 'AC') {
18 | return {
19 | total: null,
20 | next: null,
21 | operation: null,
22 | };
23 | }
24 |
25 | if (isNumber(buttonName)) {
26 | if (buttonName === '0' && obj.next === '0') {
27 | return {};
28 | }
29 | // If there is an operation, update next
30 | if (obj.operation) {
31 | if (obj.next && obj.next !== '0') {
32 | return { ...obj, next: obj.next + buttonName };
33 | }
34 | return { ...obj, next: buttonName };
35 | }
36 | // If there is no operation, update next and clear the value
37 | if (obj.next && obj.next !== '0') {
38 | return {
39 | next: obj.next + buttonName,
40 | total: null,
41 | };
42 | }
43 | return {
44 | next: buttonName,
45 | total: null,
46 | };
47 | }
48 |
49 | if (buttonName === '.') {
50 | if (obj.next) {
51 | if (obj.next.includes('.')) {
52 | return { ...obj };
53 | }
54 | return { ...obj, next: `${obj.next}.` };
55 | }
56 | if (obj.operation) {
57 | return { ...obj, next: '0.' };
58 | }
59 | if (obj.total) {
60 | if (obj.total.includes('.')) {
61 | return {};
62 | }
63 | return { ...obj, next: `${obj.total}.` };
64 | }
65 | return { ...obj, next: '0.' };
66 | }
67 |
68 | if (buttonName === '=') {
69 | if (obj.next && obj.operation) {
70 | return {
71 | total: operate(obj.total, obj.next, obj.operation),
72 | next: null,
73 | operation: null,
74 | };
75 | }
76 | // '=' with no operation, nothing to do
77 | return {};
78 | }
79 |
80 | if (buttonName === '+/-') {
81 | if (obj.next) {
82 | return { ...obj, next: (-1 * parseFloat(obj.next)).toString() };
83 | }
84 | if (obj.total) {
85 | return { ...obj, total: (-1 * parseFloat(obj.total)).toString() };
86 | }
87 | return {};
88 | }
89 |
90 | // Button must be an operation
91 |
92 | // When the user presses an operation button without having entered
93 | // a number first, do nothing.
94 | // if (!obj.next && !obj.total) {
95 | // return {};
96 | // }
97 |
98 | // User pressed an operation after pressing '='
99 | if (!obj.next && obj.total && !obj.operation) {
100 | return { ...obj, operation: buttonName };
101 | }
102 |
103 | // User pressed an operation button and there is an existing operation
104 | if (obj.operation) {
105 | if (obj.total && !obj.next) {
106 | return { ...obj, operation: buttonName };
107 | }
108 |
109 | if (!obj.total) {
110 | return { total: 0, operation: buttonName };
111 | }
112 |
113 | return {
114 | total: operate(obj.total, obj.next, obj.operation),
115 | next: null,
116 | operation: buttonName,
117 | };
118 | }
119 |
120 | // no operation yet, but the user typed one
121 |
122 | // The user hasn't typed a number yet, just save the operation
123 | if (!obj.next) {
124 | return { operation: buttonName };
125 | }
126 |
127 | // save the operation and shift 'next' into 'total'
128 | return {
129 | total: obj.next,
130 | next: null,
131 | operation: buttonName,
132 | };
133 | }
134 |
--------------------------------------------------------------------------------
/src/logic/operate.js:
--------------------------------------------------------------------------------
1 | import Big from 'big.js';
2 |
3 | export default function operate(numberOne, numberTwo, operation) {
4 | const one = Big(numberOne);
5 | const two = Big(numberTwo);
6 | if (operation === '+') {
7 | return one.plus(two).toString();
8 | }
9 | if (operation === '-') {
10 | return one.minus(two).toString();
11 | }
12 | if (operation === 'x') {
13 | return one.times(two).toString();
14 | }
15 | if (operation === '÷') {
16 | try {
17 | return one.div(two).toString();
18 | } catch (err) {
19 | return "Can't divide by 0.";
20 | }
21 | }
22 | if (operation === '%') {
23 | try {
24 | return one.mod(two).toString();
25 | } catch (err) {
26 | return "Can't find modulo as can't divide by 0.";
27 | }
28 | }
29 | throw Error(`Unknown operation '${operation}'`);
30 | }
31 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
7 |
Let us do some math!
8 |
5 |
Welcome to our page!
6 |
7 | lorem ipsum dolor sit amet, consectetur adipiscing elit,
8 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
9 | lorem ipsum dolor sit amet, consectetur adipiscing elit,
10 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
11 | lorem ipsum dolor sit amet, consectetur adipiscing elit,
12 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
13 |
14 |
5 |
7 | );
8 | export default Quote;
9 |
--------------------------------------------------------------------------------
/src/styles/style.scss:
--------------------------------------------------------------------------------
1 |
2 | ul {
3 | list-style: none;
4 | margin: 0;
5 | padding: 0;
6 |
7 | li {
8 | margin-bottom: 0;
9 | }
10 | }
11 |
12 | a {
13 | color: #fff;
14 | text-decoration: none;
15 | }
16 |
17 | .navbar {
18 | display: flex;
19 | justify-content: space-between;
20 | align-items: center;
21 | padding: 1rem;
22 | background-color: #f4913e;
23 | color: #fff;
24 |
25 | .navigation {
26 | display: flex;
27 | justify-content: space-between;
28 | align-items: center;
29 |
30 | li {
31 | padding: 0 0.5rem;
32 | }
33 |
34 | li + li {
35 | border-left: 1px solid #fff;
36 | }
37 | }
38 | }
39 |
40 | .calculate-page {
41 | display: flex;
42 | justify-content: center;
43 | align-items: flex-start;
44 | gap: 2rem;
45 | height: 100vh;
46 | background-color: #f5f5f5;
47 | padding: 1rem;
48 |
49 | a {
50 | color: #333;
51 | text-decoration: none;
52 | }
53 |
54 | /* Active route */
55 | .active {
56 | color: #005bb3;
57 | }
58 |
59 | .calculator-container {
60 | display: grid;
61 | grid-template-areas:
62 | "screen screen screen screen"
63 | "numbers numbers numbers operator"
64 | "numbers numbers numbers operator"
65 | "numbers numbers numbers operator"
66 | "numbers numbers numbers operator"
67 | "numbers numbers numbers operator";
68 |
69 | .screen {
70 | grid-area: screen;
71 | color: #fff;
72 | font-size: 2rem;
73 | text-align: right;
74 | padding: 1rem 0.5rem;
75 | background-color: #858693;
76 | }
77 |
78 | .numbers {
79 | grid-area: numbers;
80 | display: grid;
81 | grid-template-columns: repeat(3, 1fr);
82 | background-color: #e0e0e0;
83 |
84 | button:nth-child(13) {
85 | grid-column: span 2;
86 | }
87 |
88 | .button {
89 | text-align: center;
90 | border: 1px solid #bababa;
91 | padding: 1rem;
92 | }
93 | }
94 |
95 | .operator {
96 | grid-area: operator;
97 | display: grid;
98 | grid-template-columns: repeat(1, 1fr);
99 |
100 | .button {
101 | text-align: center;
102 | border: 1px solid #bababa;
103 | padding: 1rem;
104 | background-color: #f4913e;
105 | }
106 | }
107 | }
108 |
109 | .quote {
110 | font-size: 1.5rem;
111 | text-align: center;
112 | margin-top: 1rem;
113 | color: #858693;
114 | max-width: 20rem;
115 |
116 | .li {
117 | list-style: none;
118 | margin-bottom: 1rem;
119 | }
120 | }
121 | }
122 |
123 | .home-page {
124 | padding: 10%;
125 | }
126 |
127 | .quote-page {
128 | padding: 10%;
129 | }
130 |
--------------------------------------------------------------------------------
5 |