added dialog alert; remove number if remove key was pressed

package.json

@@ -3,13 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.4",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^4.6.0",
+    "jquery": "^3.6.0",
+    "popper": "^1.0.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.0",
     "react-confirm-alert": "^2.7.0",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
+    "react-pro-sidebar": "^0.6.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "reactjs-popup": "^2.0.4",
+    "reactstrap": "^8.9.0",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/Addition.js

@@ -1,7 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
-import { confirmAlert } from 'react-confirm-alert';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import "./App.css";
-
 let imdtRes;
 let imdtResIdx;
 let resArr = [];
@@ -12,6 +16,7 @@ function Addition() {
   const [carryArr, setCarryArr] = useState([]); // array of carries [1","0"]
   const [commaIdx, setCommaIdx] = useState(0); // int: comma position
   const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
+  const [showAlert, setShowAlert] = useState(false);
 
   const handleInput = (e) => {
     setInput(e.target.value);
@@ -19,6 +24,7 @@ function Addition() {
   }
 
   const handleResChange = (e, nosLeft) => {
+
     if(typeof e === "string"){
       imdtRes = e;
       let carryArrCopy = [...carryArr]
@@ -28,16 +34,23 @@ function Addition() {
       imdtRes = e.target.value;
     }
 
+    if(imdtRes === ""){
+      console.log(resArr, resArr.length)
+      let no = resArr.shift();
+      console.log(resArr, "n", no);
+    }else{
+
     resArr.unshift(imdtRes);
 
-    if(nosLeft === 0){
-      checkOrSave();
+      if(nosLeft === 0){
+        console.log("set true")
+        setShowAlert(true);
 
 //      addResultToDiv(resArr);
 
 
-      let resCalc = resArr.join("");
-      resCalc = parseFloat(resCalc);
+        let resCalc = resArr.join("");
+        resCalc = parseFloat(resCalc);
 
 //      if(resCalc === result){
 //        alert("success")
@@ -46,6 +59,7 @@ function Addition() {
 //        alert("error")
 //        resCalc = 0;
 //      }
+      }
     }
   }
 
@@ -59,7 +73,7 @@ function Addition() {
   }
 
   const handleSubmit = (e) => {
-    setInput("1,3+22,450");
+    // setInput("1,3+22,450");
     startCalculation();
     e.preventDefault(); // avoid page reload
   }
@@ -90,22 +104,6 @@ function Addition() {
     document.getElementById("overview").innerHTML += res;
   }
 
-  const checkOrSave = () => {
-    confirmAlert({
-      title: "Do you want to submit",
-      message: "review or submit your result",
-      buttons: [
-        {
-          label: "review",
-          onClick: () => showIdmtResults()
-        },
-        {
-          label: "submit",
-          onClick: () => addResultToDiv()
-        }
-      ]
-    });
-  }
 
   function numbersToArrOfArr(numbers) {
     let befComma = Math.max(...numbers).toString().split(".")[0].length;
@@ -251,6 +249,7 @@ function Addition() {
 
 
   const showIdmtResults = () => {
+    setShowAlert(false);
     let realResArr = result.toString().split("");
     while(realResArr.length < resArr.length){
       realResArr.unshift("&nbsp;"); // add " " before
@@ -315,11 +314,17 @@ function Addition() {
         document.getElementById("idmtResultSteps").appendChild(paragraph);
 
         let btn = document.createElement("button");
-        btn.innerHTML = "return to step " + text;
+        btn.innerHTML = "bearbeiten: " + text;
         btn.addEventListener("click", () => startOver(i));
         document.getElementById("idmtResultSteps").appendChild(btn);
       }
     }
+
+    let btnSubmit = document.createElement("button");
+    btnSubmit.innerHTML = "submit result";
+    btnSubmit.addEventListener("click", () => console.log("end"));
+    document.getElementById("idmtResultSteps").appendChild(btnSubmit);
+
   }
 
   const startOver = (idx) => {
@@ -327,24 +332,72 @@ function Addition() {
   }
 
 
+
+  const handleClose = () => {
+    setShowAlert(false);
+  };
+
+  const Alert = () => {
+    return(
+    <div>
+      <Dialog
+        open={showAlert}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{"Ergebnis überprüfen oder abgeben?"}</DialogTitle>
+
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            Willst du dein Ergebnis nochmal überprüfen oder gleich abgeben?
+          </DialogContentText>
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={showIdmtResults} color="primary" autoFocus>
+            Prüfen
+          </Button>
+          <Button onClick={handleClose} color="primary">
+            Abgeben
+          </Button>
+        </DialogActions>
+
+      </Dialog>
+    </div>
+  )};
+
+
   return (
     <div id="content">
+
       <h1>Addition</h1>
+
       <form onSubmit={(e) => handleSubmit(e)}>
+        <label for="calculationInput">
+          Rechnung:
+        </label>
         <input
           type="text"
+          id="calculationInput"
           onChange={(e) => handleInput(e)}
-          aria-label="your calculation"
+          aria-label="Rechnung"
           aria-required="true"/>
-        <input type="submit" value="calculate"/>
+        <input type="submit" value="berechnen"/>
       </form>
+
       <div id="overview"></div>
+
       <div id="calculation">
         <ResultCarryForm
           handleResChange={handleResChange}
           handleCarryChange={handleCarryChange}/>
       </div>
+
       <div id="idmtResultSteps"></div>
+
+      <Alert/>
+
     </div>
   );
 }

src/Navigation.js

@@ -33,7 +33,7 @@ const Navigation = (props) => {
           </NavItem>
           <NavItem>
             <NavLink href="/subtraction">
-              Subtraction
+              Subtraktion
             </NavLink>
           </NavItem>
         </Nav>