added intermediate result overview

package-lock.json

@@ -12303,6 +12303,11 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-confirm-alert": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-confirm-alert/-/react-confirm-alert-2.7.0.tgz",
+      "integrity": "sha512-21NWtGK/e85+ZX3TLRpMc3IsU5Kj6Z9ElCOrkTIlwMzV9EancyXNlkqHGbtKP63a2iS6g5hOxROokmJOqKQiXA=="
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
+    "react-confirm-alert": "^2.7.0",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"

src/App.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import { confirmAlert } from 'react-confirm-alert';
 import "./App.css";
 
 let imdtRes;
@@ -6,11 +7,11 @@ let imdtResIdx;
 let resArr = [];
 
 function App() {
-  const [input, setInput] = useState("");
-  const [result, setResult] = useState(0);
-  const [carryArr, setCarryArr] = useState([]);
-  const [commaIdx, setCommaIdx] = useState(0);
-  const [numbers, setNumbers] = useState(0);
+  const [input, setInput] = useState(""); // initial user input like 34+56.7
+  const [result, setResult] = useState(0); // real result of calculation
+  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 handleInput = (e) => {
     setInput(e.target.value);
@@ -30,11 +31,13 @@ function App() {
     resArr.unshift(imdtRes);
 
     if(nosLeft === 0){
-      addResultToDiv(resArr)
-      let resCalc = resArr.join("")
-      resCalc = parseFloat(resCalc)
-      console.log(resCalc)
-      console.log(result)
+      checkOrSave();
+
+//      addResultToDiv(resArr);
+
+
+      let resCalc = resArr.join("");
+      resCalc = parseFloat(resCalc);
 
 //      if(resCalc === result){
 //        alert("success")
@@ -78,14 +81,32 @@ function App() {
       let pNo = "<p>" + no + "</p>"
       document.getElementById("overview").innerHTML += pNo;
     }
+    document.getElementById("overview").innerHTML += carryArr.join("");
     document.getElementById("overview").innerHTML += "<hr>";
   }
 
-  const addResultToDiv = (digits) => {
-    let res = "<p>" + digits.join("") + "</p>"
+  const addResultToDiv = () => {
+    let res = "<p>" + resArr.join("") + "</p>"
     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;
     let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
@@ -94,10 +115,8 @@ function App() {
     let arrLength;
     if(withComma < 0){ // no comma found
       arrLength = befComma;
-      console.log("no comma", arrLength, withComma)
     }else{
       arrLength = befComma + afterComma + 1; // add comma and after comma len
-      console.log("with comma", arrLength)
     }
 
     let numbersArr = numbers.map(x => x.toString().split(""));
@@ -145,7 +164,6 @@ function App() {
     }
   }
 
-
   const ResultCarryForm = ({handleResChange, handleCarryChange}) => {
     let resInputField = useRef(null);
     let carryInputField = useRef(null);
@@ -167,7 +185,6 @@ function App() {
       if(typeof imdtResIdx === "undefined"){
         noOfDigits = Math.min(...numbers.map(n => n.length));
         imdtResIdx = noOfDigits-1;
-        console.log("--", imdtResIdx, carryArr)
       }
 
       if(imdtResIdx === commaIdx){
@@ -233,6 +250,80 @@ function App() {
   }
 
 
+  const showIdmtResults = () => {
+    let realResArr = result.toString().split("");
+    while(realResArr.length < resArr.length){
+      realResArr.unshift("&nbsp;"); // add " " before
+    }
+
+    let carries = carryArr.map(x => x || "0")
+    carries.push("0");
+    while(carries.length < carries.length){
+      carries.unshift("0"); // add "0" before
+    }
+
+    let noOfDigits = resArr.length - 1;
+    let foundComma = false;
+    for (let i=0; i<resArr.length-1; i++) {
+      let text = "";
+      let trueNumbers = false;
+      let idxNumbers = resArr.length - i - 1;
+      let idxCarry = carries.length - i - 1;
+      for (let j=0; j<numbers.length; j++) {
+        if (numbers[j][idxNumbers] != "." && numbers[j][idxNumbers] != "&nbsp;"){
+          trueNumbers = true;
+        }
+        text += numbers[j][idxNumbers]
+        if (j<numbers.length-1){
+          text += " + "
+        }
+      }
+
+      // ignore indexes without real digits
+      if (resArr[idxNumbers] != "&nbsp;" || carries[idxCarry] != "&nbsp;"){
+        trueNumbers = true;
+      }
+
+      // carry array has no "."
+      if (resArr[idxNumbers] === "."){
+        foundComma = true;
+        trueNumbers = false;
+      }
+      if (foundComma){
+        idxCarry += 1;
+      }
+
+      // add carry only if > 0
+      if (carries[idxCarry] != "0"){
+        text += " + " + carries[idxCarry] + " Übertrag"
+      }
+
+      text += " = "
+
+      if (!trueNumbers){
+        noOfDigits =- 1;
+      }else{
+        text += resArr[idxNumbers]
+        text = text.replace("&nbsp;", "0")
+        text += resArr[idxNumbers] === realResArr[idxNumbers] ? "\t\tRichtig" : "\t\tFalsch";
+
+        let paragraph = document.createElement("p");
+        paragraph.innerHTML = text
+        document.getElementById("idmtResultSteps").appendChild(paragraph);
+
+        let btn = document.createElement("button");
+        btn.innerHTML = "return to step " + text;
+        btn.addEventListener("click", () => startOver(i));
+        document.getElementById("idmtResultSteps").appendChild(btn);
+      }
+    }
+  }
+
+  const startOver = (idx) => {
+    console.log("clicked at " + idx)
+  }
+
+
   return (
     <div className="App">
       <form onSubmit={(e) => handleSubmit(e)}>
@@ -249,6 +340,7 @@ function App() {
           handleResChange={handleResChange}
           handleCarryChange={handleCarryChange}/>
       </div>
+      <div id="idmtResultSteps"></div>
     </div>
   );
 }