0&&"0"==n.charAt(--l););for(e.e=t-r-1,e.c=[],t=0;r<=l;)e.c[t++]=+n.charAt(r++)}}(r,t)}r.constructor=n}return n.prototype=b,n.DP=20,n.RM=1,n.NE=-7,n.PE=21,n.strict=false,n.roundDown=0,n.roundHalfUp=1,n.roundHalfEven=2,n.roundUp=3,n}(),C=E;function _(e,n,t){var r=C(e),l=C(n);if("+"===t)return r.plus(l).toString();if("-"===t)return r.minus(l).toString();if("x"===t)return r.times(l).toString();if("\xf7"===t)try{return r.div(l).toString()}catch(a){return"Can't divide by 0."}if("%"===t)try{return r.mod(l).toString()}catch(a){return"Can't find modulo as can't divide by 0."}throw Error("Unknown operation '".concat(t,"'"))}function N(e,n){return"AC"===n?{total:null,next:null,operation:null}:n.match(/[0-9]+/)?"0"===n&&"0"===e.next?{}:e.operation?e.next&&"0"!==e.next?d(d({},e),{},{next:e.next+n}):d(d({},e),{},{next:n}):e.next&&"0"!==e.next?{next:e.next+n,total:null}:{next:n,total:null}:"."===n?e.next?e.next.includes(".")?d({},e):d(d({},e),{},{next:"".concat(e.next,".")}):e.operation?d(d({},e),{},{next:"0."}):e.total?e.total.includes(".")?{}:d(d({},e),{},{next:"".concat(e.total,".")}):d(d({},e),{},{next:"0."}):"="===n?e.next&&e.operation?{total:_(e.total,e.next,e.operation),next:null,operation:null}:{}:"+/-"===n?e.next?d(d({},e),{},{next:(-1*parseFloat(e.next)).toString()}):e.total?d(d({},e),{},{total:(-1*parseFloat(e.total)).toString()}):{}:e.next||!e.total||e.operation?e.operation?e.total&&!e.next?d(d({},e),{},{operation:n}):e.total?{total:_(e.total,e.next,e.operation),next:null,operation:n}:{total:0,operation:n}:e.next?{total:e.next,next:null,operation:n}:{operation:n}:d(d({},e),{},{operation:n})}var P=function(){var n=a((0,e.useState)({obj:{total:null,next:null,operation:null}}),2),t=n[0],r=n[1],l=function(e){var n=t.obj;r({obj:N(n,e.target.textContent)})},c=t.obj,f=c.total,d=c.next,p=c.operation;return(0,o.jsxs)("div",{className:"calc-container",children:[(0,o.jsx)(u,{next:d,total:f,operation:p}),(0,o.jsx)(s,{handleClick:l}),(0,o.jsx)(i,{handleClick:l})]})},z=function(){return(0,o.jsx)("div",{className:"calculator-container",children:(0,o.jsx)(P,{})})};n.createRoot(document.getElementById("root")).render((0,o.jsx)(e.StrictMode,{children:(0,o.jsx)("div",{children:(0,o.jsx)(z,{})})})),r()}()}();
3 | //# sourceMappingURL=main.ee9d1ec6.js.map
--------------------------------------------------------------------------------
/build/static/js/main.ee9d1ec6.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /**
2 | * @license React
3 | * react-dom.production.min.js
4 | *
5 | * Copyright (c) Facebook, Inc. and its affiliates.
6 | *
7 | * This source code is licensed under the MIT license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | /**
12 | * @license React
13 | * react-jsx-runtime.production.min.js
14 | *
15 | * Copyright (c) Facebook, Inc. and its affiliates.
16 | *
17 | * This source code is licensed under the MIT license found in the
18 | * LICENSE file in the root directory of this source tree.
19 | */
20 |
21 | /**
22 | * @license React
23 | * react.production.min.js
24 | *
25 | * Copyright (c) Facebook, Inc. and its affiliates.
26 | *
27 | * This source code is licensed under the MIT license found in the
28 | * LICENSE file in the root directory of this source tree.
29 | */
30 |
31 | /**
32 | * @license React
33 | * scheduler.production.min.js
34 | *
35 | * Copyright (c) Facebook, Inc. and its affiliates.
36 | *
37 | * This source code is licensed under the MIT license found in the
38 | * LICENSE file in the root directory of this source tree.
39 | */
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "math-magicians",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/user-event": "^13.5.0",
8 | "big.js": "^6.2.1",
9 | "bootstrap": "^5.2.0",
10 | "react": "^18.2.0",
11 | "react-bootstrap": "^2.5.0",
12 | "react-dom": "^18.2.0",
13 | "react-router-dom": "^6.4.0",
14 | "react-scripts": "5.0.1",
15 | "react-test-renderer": "^18.2.0",
16 | "web-vitals": "^2.1.4"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject",
23 | "deploy": "gh-pages -d build/"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | },
43 | "devDependencies": {
44 | "@babel/core": "^7.19.0",
45 | "@babel/eslint-parser": "^7.18.9",
46 | "@babel/plugin-syntax-jsx": "^7.18.6",
47 | "@babel/preset-env": "^7.19.0",
48 | "@babel/preset-react": "^7.18.6",
49 | "@testing-library/react": "^13.4.0",
50 | "eslint": "^7.32.0",
51 | "eslint-config-airbnb": "^18.2.1",
52 | "eslint-plugin-import": "^2.26.0",
53 | "eslint-plugin-jsx-a11y": "^6.6.1",
54 | "eslint-plugin-react": "^7.31.7",
55 | "eslint-plugin-react-hooks": "^4.6.0",
56 | "gh-pages": "^4.0.0",
57 | "jest": "^27.5.1",
58 | "react-test-renderer": "^18.2.0",
59 | "stylelint": "^13.13.1",
60 | "stylelint-config-standard": "^21.0.0",
61 | "stylelint-csstree-validator": "^1.9.0",
62 | "stylelint-scss": "^3.21.0"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/Pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const HomeStyle = {
4 | width: '70%',
5 | margin: 'auto',
6 | transform: 'translateY(120px)',
7 | textAlign: 'justify',
8 | };
9 |
10 | const HeaderStyle = {
11 | textAlign: 'center',
12 | margin: '20px',
13 | color: '#f5913e',
14 | };
15 |
16 | const Home = () => (
17 | <>
18 |
19 |
20 | Welcome to Our Page
21 |
22 |
23 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
24 | Vitae consectetur amet beatae. Porro, dignissimos,
25 | facere consequatur commodi autem laborum quibusdam aliquid
26 | officia consectetur nemo voluptates illo, pariatur necessitatibus
27 | veniam illum sapiente. Quibusdam velit cupiditate sit molestias,
28 | aliquid doloribus tenetur beatae, dicta a animi praesentium impedit
29 | excepturi aliquam? Dolor adipisci perspiciatis nobis voluptas
30 | praesentium magni rem nulla ipsa accusantium omnis velit illum
31 | nam qui reiciendis possimus, cupiditate officia illo vero! Provident.
32 |
33 |
34 |
35 | );
36 | export default Home;
37 |
--------------------------------------------------------------------------------
/src/Pages/NavBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | const HeaderStyle = {
5 | color: 'bisque',
6 | };
7 |
8 | const NavBar = () => (
9 | <>
10 |
21 |
22 | );
23 |
24 | export default NavBar;
25 |
--------------------------------------------------------------------------------
/src/Pages/Quotes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const quoteStyle = {
4 | width: '70%',
5 | margin: 'auto',
6 | transform: 'translateY(120px)',
7 | textAlign: 'justify',
8 | };
9 |
10 | const Quote = () => (
11 | <>
12 |
13 |
14 | Mathematics are the result of mysterious powers
15 | which no one understands, and which the unconscious
16 | recognition of beauty must play an important part.
17 | Out of an infinity of designs a mathematician chooses
18 | one pattern for beauty’s sake and pulls it down to earth.
19 |
20 |
21 | — Marston Morse,
22 | American mathematician
23 |
24 |
25 |
26 |
27 | );
28 | export default Quote;
29 |
--------------------------------------------------------------------------------
/src/__test__/DisplayScreen.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import DisplayScreen from '../components/displayScreen';
4 |
5 | it('renders DisplayScreen correctly', () => {
6 | const tree = renderer.create();
7 | expect(tree).toMatchSnapshot();
8 | });
9 |
--------------------------------------------------------------------------------
/src/__test__/__snapshots__/DisplayScreen.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders DisplayScreen correctly 1`] = `
4 |
7 |
10 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/__test__/__snapshots__/calculator.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders Calculator correctly 1`] = `
4 |
7 |
10 |
13 |
14 |
21 |
28 |
35 |
42 |
49 |
56 |
63 |
70 |
73 |
81 |
89 |
97 |
105 |
113 |
121 |
129 |
137 |
145 |
153 |
161 |
162 |
7 |
14 |
21 |
28 |
35 |
42 |
49 |
56 |
63 |
70 |
77 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/src/__test__/__snapshots__/operatorKeys.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders NumericKeys correctly 1`] = `
4 | Array [
5 | ,
11 | ,
17 | ,
23 | ,
29 | ,
35 | ,
41 | ,
47 | ,
53 | ]
54 | `;
55 |
--------------------------------------------------------------------------------
/src/__test__/button.test.js:
--------------------------------------------------------------------------------
1 | import { screen, fireEvent, render } from '@testing-library/react';
2 | import NumberKeys from '../components/numericKeys';
3 |
4 | test('Testing onClick events', () => {
5 | render();
6 | const fireOne = screen.getByTestId('one');
7 | fireEvent.click(fireOne);
8 | expect(screen.getByTestId('one')).toHaveTextContent(1);
9 | });
10 | test('Testing onClick events', () => {
11 | render();
12 | const fireFullStop = screen.getByTestId('full-stop');
13 | fireEvent.click(fireFullStop);
14 | expect(screen.getByTestId('full-stop')).toHaveTextContent('.');
15 | });
16 |
17 | test('Testing onClick events', () => {
18 | render();
19 | const fireFullStop = screen.getByTestId('five');
20 | fireEvent.click(fireFullStop);
21 | expect(screen.getByTestId('five')).toHaveTextContent('5');
22 | });
23 | test('Testing onClick events', () => {
24 | render();
25 | const fireFullStop = screen.getByTestId('four');
26 | fireEvent.click(fireFullStop);
27 | expect(screen.getByTestId('four')).toHaveTextContent(4);
28 | });
29 | test('Testing onClick events', () => {
30 | render();
31 | const fireFullStop = screen.getByTestId('three');
32 | fireEvent.click(fireFullStop);
33 | expect(screen.getByTestId('three')).toHaveTextContent('3');
34 | });
35 |
--------------------------------------------------------------------------------
/src/__test__/calculator.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import Calculator from '../components/calculator';
4 |
5 | it('renders Calculator correctly', () => {
6 | const tree = renderer.create();
7 | expect(tree).toMatchSnapshot();
8 | });
9 |
--------------------------------------------------------------------------------
/src/__test__/numericKeys.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import NumberKeys from '../components/numericKeys';
4 |
5 | it('renders NumericKeys correctly', () => {
6 | const tree = renderer.create();
7 | expect(tree).toMatchSnapshot();
8 | });
9 |
--------------------------------------------------------------------------------
/src/__test__/operatorKeys.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import OperatorKeys from '../components/operatorkeys';
4 |
5 | it('renders NumericKeys correctly', () => {
6 | const tree = renderer.create();
7 | expect(tree).toMatchSnapshot();
8 | });
9 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Routes } from 'react-router-dom';
3 | import Calculator from './components/calculator';
4 | import Home from './Pages/Home';
5 | import Quote from './Pages/Quotes';
6 | import NavBar from './Pages/NavBar';
7 |
8 | const App = () => (
9 | <>
10 |
11 |
12 | } />
13 | } />
14 | } />
15 |
16 |
17 | );
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/src/components/calculator.js:
--------------------------------------------------------------------------------
1 | // import { render } from '@testing-library/react';
2 | import React, { useState } from 'react';
3 | import DisplayScreen from './displayScreen';
4 | import NumericKeys from './numericKeys';
5 | import OperatorKeys from './operatorkeys';
6 | import calculate from './logic/calculate';
7 |
8 | const Calculator = () => {
9 | const [state, setState] = useState({
10 | obj: {
11 | total: null,
12 | next: null,
13 | operation: null,
14 | },
15 | });
16 |
17 | const handleClick = (event) => {
18 | const { obj } = state;
19 | setState({ obj: calculate(obj, event.target.textContent) });
20 | };
21 | const { obj } = state;
22 | const { total, next, operation } = obj;
23 | return (
24 |
25 |
26 |
27 |
28 |
29 | );
30 | };
31 | export default Calculator;
32 |
--------------------------------------------------------------------------------
/src/components/displayScreen.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from 'react';
3 |
4 | const DisplayScreen = (props) => {
5 | const { total, next, operation } = props;
6 | return (
7 |
8 |
9 | {total}
10 | {operation}
11 | {next}
12 |
13 |
14 | );
15 | }
16 |
17 | export default DisplayScreen;
18 |
--------------------------------------------------------------------------------
/src/components/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('.')) { // 0
52 | return { ...obj };
53 | }
54 | return { ...obj, next: `${obj.next}.` };
55 | }
56 | if (obj.operation) { // 0.7 *
57 | return { ...obj, next: '0.' };
58 | }
59 | if (obj.total) { // 0
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 | // User pressed an operation after pressing '='
91 | if (!obj.next && obj.total && !obj.operation) {
92 | return { ...obj, operation: buttonName };
93 | }
94 |
95 | // User pressed an operation button and there is an existing operation
96 | if (obj.operation) {
97 | if (obj.total && !obj.next) {
98 | return { ...obj, operation: buttonName };
99 | }
100 |
101 | if (!obj.total) {
102 | return { total: 0, operation: buttonName };
103 | }
104 |
105 | return {
106 | total: operate(obj.total, obj.next, obj.operation),
107 | next: null,
108 | operation: buttonName,
109 | };
110 | }
111 |
112 | // no operation yet, but the user typed one
113 |
114 | // The user hasn't typed a number yet, just save the operation
115 | if (!obj.next) {
116 | return { operation: buttonName };
117 | }
118 |
119 | // save the operation and shift 'next' into 'total'
120 | return {
121 | total: obj.next,
122 | next: null,
123 | operation: buttonName,
124 | };
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/logic/logic.test.js:
--------------------------------------------------------------------------------
1 | import calculate from './calculate';
2 | import operate from './operate';
3 |
4 | describe('Testing logic components', () => {
5 | test('Test the calculator logic', () => {
6 | const data = {
7 | total: 4,
8 | next: 6,
9 | operation: null,
10 | };
11 | const value = { total: 6, next: null, operation: '+' };
12 | expect(calculate(data, '+')).toEqual(value);
13 | });
14 | test('Test subtraction with operator', () => {
15 | expect(operate(10, 4, '-')).toBe('6');
16 | });
17 | test('Test mupltiplication with operator', () => {
18 | expect(operate(8, 4, 'x')).toBe('32');
19 | });
20 | test('Test division with operator', () => {
21 | expect(operate(8, 4, '÷')).toBe('2');
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/components/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/components/numericKeys.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 |
3 | import React from 'react';
4 |
5 | const NumberKeys = (props) => {
6 |
7 | const { handleClick } = props;
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default NumberKeys;
26 |
--------------------------------------------------------------------------------
/src/components/operatorkeys.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from 'react';
3 |
4 | const OperatorKeys = (props) => {
5 | const { handleClick } = props;
6 | return (
7 | <>
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | };
19 | export default OperatorKeys;
20 |
--------------------------------------------------------------------------------
/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 './style.css';
5 | import reportWebVitals from './reportWebVitals';
6 | import App from './app';
7 |
8 | const root = ReactDOM.createRoot(document.getElementById('root'));
9 | root.render(
10 |
11 |
12 |
13 |
14 | ,
15 | );
16 |
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({
4 | getCLS, getFID, getFCP, getLCP, getTTFB,
5 | }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Inter:wght@400;500;600;700;800&family=Poppins&family=Roboto:wght@700&display=swap');
2 |
3 | * {
4 | padding: 0;
5 | margin: 0;
6 | box-sizing: border-box;
7 | font-family: "Inter", sans-serif;
8 | }
9 |
10 | html {
11 | font-size: calc(15px + 0.390625vw);
12 | }
13 |
14 | .calculator-container {
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | height: 100vh;
19 | }
20 |
21 | .calc-container {
22 | width: 80%;
23 | margin: 5rem auto;
24 | display: grid;
25 | grid-template-columns: repeat(4, minmax(0, 1fr));
26 | grid-template-rows: repeat(6, minmax(0, 1fr));
27 | max-inline-size: 22rem;
28 | border-radius: 10px;
29 | overflow: hidden;
30 | box-shadow:
31 | 0 3px 8px 0 rgba(0, 0, 0, 0.15),
32 | 0 2px 6px 0 rgba(0, 0, 0, 0.12);
33 | }
34 |
35 | .displayscreen-cont {
36 | grid-column: 1/ 5;
37 | grid-row: 1 / 2;
38 | width: 100%;
39 | background: rgb(66, 76, 82) none repeat scroll 0% 0%;
40 | color: #fff;
41 | }
42 |
43 | .display-screen {
44 | width: 150px;
45 | padding: 12px 4px;
46 | font-size: 2rem;
47 | text-align: end;
48 | color: #fff;
49 | border: none;
50 | outline: none;
51 | }
52 |
53 | .btn {
54 | background-color: #e0e0e0;
55 | padding: 10px 0;
56 | border: 0.01px solid hsl(0, 0%, 80%);
57 | outline: none;
58 | transition: 0.05s ease-in-out;
59 | font-size: 1.1rem;
60 | }
61 |
62 | .btn:active {
63 | background-color: hsl(0, 0%, 78%);
64 | }
65 |
66 | .btn-top {
67 | grid-row: 2 / 3;
68 | }
69 |
70 | .btn-side {
71 | background-color: #f5913e;
72 | grid-column: 4/ 5;
73 | }
74 |
75 | .btn-side:active {
76 | background-color: hsl(27, 90%, 50%);
77 | }
78 |
79 | .numbers {
80 | grid-column: 1/ 4;
81 | grid-row: 3/ 7;
82 | display: grid;
83 | grid-template-columns: repeat(3, minmax(0, 1fr));
84 | }
85 |
86 | .col-span-2 {
87 | grid-column: 1 / 3;
88 | }
89 |
90 | .nav-container {
91 | padding: 20px;
92 | background-color: #424c52;
93 | display: flex;
94 | justify-content: space-between;
95 | box-shadow: 0 0 8px #424c52;
96 | }
97 |
98 | ul {
99 | display: flex;
100 | list-style: none;
101 | gap: 10px;
102 | }
103 |
104 | .link a {
105 | text-decoration: none;
106 | color: bisque;
107 | }
108 |
109 | .link a:hover {
110 | text-decoration: none;
111 | color: #f5913e;
112 | }
113 |
--------------------------------------------------------------------------------
.
18 |
19 | ## Getting Started
20 |
21 | To get a local copy up and running follow these simple example steps.
22 |
23 | ### Prerequisites
24 |
25 | Node.js
26 |
27 | ### Setup
28 |
29 | To get a local copy up and running you'll need to have [NodeJS](https://nodejs.org/en/download/) installed on your local machine.
30 |
31 | ### Install
32 |
33 | After installing NodeJS please follow the next steps...
34 |
35 | ### Usage
36 |
37 | ```bash
38 |
39 | npm i
40 |
41 | ```
42 |
43 | -- for installing dev dependecies.
44 |
45 | ```bash
46 |
47 | npm run build
48 |
49 | ```
50 |
51 | -- to run the project.
52 |
53 | ### Testing
54 |
55 | ```bash
56 |
57 | npm run start
58 |
59 | ```
60 |
61 | ### Deployment
62 |
63 | ```bash
64 |
65 | npm run deploy
66 |
67 | ```
68 |
69 | ## Authors
70 |
71 | 👤 **PROMISE OKECHUKWU**
72 |
73 | - GitHub: [@promzzykoncepts](https://github.com/PromzzyKoncepts)
74 | - Twitter: [@promzzy](https://twitter.com/prOmzzy)
75 | - LinkedIn: [promiseokechukwu](https://linkedin.com/in/promiseokechukwu)
76 |
77 | ## 🤝 Contributing
78 |
79 | Contributions, issues, and feature requests are welcome!
80 |
81 | Feel free to check the [issues page](../../issues/).
82 |
83 | ## Show your support
84 |
85 | Give a ⭐️ if you like this project!
86 |
87 | ## Acknowledgments
88 |
89 | - You for viewing this repo and dropping a ⭐️.
90 | - Microverse for their Calculate and Operate.js files.
91 | - etc
92 |
93 | ## 📝 License
94 |
95 | This project is [MIT](./MIT.md) licensed.
96 |
--------------------------------------------------------------------------------
/build/asset-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": {
3 | "main.css": "/static/css/main.82a54599.css",
4 | "main.js": "/static/js/main.ee9d1ec6.js",
5 | "static/js/787.d4ded463.chunk.js": "/static/js/787.d4ded463.chunk.js",
6 | "index.html": "/index.html",
7 | "main.82a54599.css.map": "/static/css/main.82a54599.css.map",
8 | "main.ee9d1ec6.js.map": "/static/js/main.ee9d1ec6.js.map",
9 | "787.d4ded463.chunk.js.map": "/static/js/787.d4ded463.chunk.js.map"
10 | },
11 | "entrypoints": [
12 | "static/css/main.82a54599.css",
13 | "static/js/main.ee9d1ec6.js"
14 | ]
15 | }
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |