final touches before deploying

react-calculator/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

react-calculator/.env

@@ -0,0 +1 @@
+PORT=4000

react-calculator/package.json

@@ -31,5 +31,19 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "install": "^0.13.0",
+    "install-peers": "^1.0.3",
+    "npm": "^6.14.4",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "style-loader": "^0.23.1"
   }
 }

react-calculator/src/components/Button.js

@@ -6,9 +6,9 @@ const Button = (props) => {
   if (typeof props !== "undefined" && typeof props.type !== "undefined")
     classes.push("btn-" + props.type);
   return (
-    <Button className={classes.join(" ")} onClick={props.onButtonPress}>
+    <button className={classes.join(" ")} onClick={props.onButtonPress}>
       {props.children}
-    </Button>
+    </button>
   );
 };
 export default Button;

react-calculator/src/components/Calculator.js

@@ -16,9 +16,11 @@ class Calculator extends Component {
     else if (
       (pressedButton >= "0" && pressedButton <= "9") ||
       pressedButton === "."
-    )
+    ) {
       equation += pressedButton;
-    else if (pressedButton === "=") {
+    } else if (["+", "-", "*", "/", "%"].indexOf(pressedButton) !== -1) {
+      equation += " " + pressedButton + " ";
+    } else if (pressedButton === "=") {
       try {
         const evalResult = eval(equation);
         const result = Number.isInteger(evalResult)
@@ -36,13 +38,14 @@ class Calculator extends Component {
   };
 
   clear() {
-    this.setState({ equation: "", result: 0 });
+    this.setState({ equation: " ", result: 0 });
   }
 
   render() {
     return (
       <main className="calculator">
         <Screen equation={this.state.equation} result={this.state.result} />
+
         <KeyPad onButtonPress={this.onButtonPress} />
       </main>
     );

react-calculator/src/components/KeyPad.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { Container } from "react-bootstrap";
+
 import KeyPadRow from "./KeyPadRow";
 import Button from "./Button";
-
+import LargeButton from "./LargeButton";
 const KeyPad = (props) => (
   <section className="keypad">
     <KeyPadRow>
@@ -50,7 +50,7 @@ const KeyPad = (props) => (
     <KeyPadRow>
       <Button onButtonPress={props.onButtonPress}>0</Button>
       <Button onButtonPress={props.onButtonPress}>.</Button>
-      <Button onButtonPress={props.onButtonPress}>=</Button>
+      <LargeButton onButtonPress={props.onButtonPress}>=</LargeButton>
     </KeyPadRow>
   </section>
 );

react-calculator/src/components/KeyPadRow.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Row } from "react-bootstrap";
 
 const KeyPadRow = (props) => <div className="keypad-row">{props.children}</div>;
 

react-calculator/src/components/LargeButton.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+import Button from "./Button";
+
+const LargeButton = (props) => <Button type="large" {...props} />;
+
+export default LargeButton;

react-calculator/src/serviceWorker.js

@@ -11,17 +11,17 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
 );
 
 export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
@@ -31,19 +31,19 @@ export function register(config) {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
+        // This is running on . Let's check if a service worker still exists or not.
         checkValidServiceWorker(swUrl, config);
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://bit.ly/CRA-PWA"
           );
         });
       } else {
@@ -57,21 +57,21 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
           return;
         }
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
               );
 
               // Execute callback
@@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log("Content is cached for offline use.");
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -93,25 +93,25 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
     });
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
+    headers: { "Service-Worker": "script" },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get("content-type");
       if (
         response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        (contentType != null && contentType.indexOf("javascript") === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -123,18 +123,18 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready
-      .then(registration => {
+      .then((registration) => {
         registration.unregister();
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error.message);
       });
   }

react-calculator/src/styles/styles.css

@@ -1,3 +1,11 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 html {
   font-size: 62.5%;
   font-family: "Open-Sans";
@@ -16,8 +24,10 @@ body {
   --color-purple-transparent: rgba(88, 24, 69, 0.9);
   --color-pink-transparent: rgba(216, 14, 91, 0.9);
 
-  --color-orange: #ff3c00;
+  --color-teal: rgb(0, 128, 128);
 
+  --color-orange: #ff3c00;
+  --color-gold: #ccac00;
   --color-light-black: #222;
   --color-black: #000;
 
@@ -30,10 +40,10 @@ body {
   width: 100%;
   background-image: linear-gradient(
       to bottom right,
-      var(--color-pink-transparent),
+      var(--color-teal),
       var(--color-purple-transparent)
     ),
-    url(https://i.pinimg.com/originals/91/b5/cd/91b5cdab51e207263169904b227503b4.jpg);
+    url(https://cnn.it/2WwEFSj);
   background-size: cover;
 
   display: flex;
@@ -57,7 +67,7 @@ body {
   white-space: nowrap;
 
   color: var(--color-light-white);
-  background-color: var(--color-tomato);
+  background-color: var(--color-gold);
 }
 
 .comp-screen {
@@ -110,7 +120,7 @@ body {
 
 .btn:hover {
   color: var(--color-light-white);
-  background-color: var(--color-tomato);
+  background-color: var(--color-purple-transparent);
 }
 
 .btn:active {
@@ -120,18 +130,18 @@ body {
 .btn-large {
   width: 50%;
   color: var(--color-light-white);
-  background-color: var(--color-tomato);
+  background-color: var(--color-gold);
 }
 
 .btn-large:hover {
   background-color: var(--color-light-white);
-  color: var(--color-tomato);
+  color: var(--color-gold);
 }
 
 .btn-primary {
-  color: var(--color-tomato);
+  color: var(--color-gold);
 }
 
 .btn-operator {
-  color: var(--color-orange);
+  color: var(--color-purple-transparent);
 }