added steps grid, added carry to steps

src/Addition.js

@@ -23,6 +23,7 @@ function Addition() {
   const [showAlert, setShowAlert] = useState(false);
   const [numbersGrid, setNumbersGrid] = useState([{id: 1, number: ""}]);
   const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]);
+  const [stepsGrid, setStepsGrid] = useState([{id: 1, step: ""}]);
 
   // focus the input field
   let calculationInput = useRef(null);
@@ -234,6 +235,7 @@ function Addition() {
     }
 
     let foundComma = false;
+    let stepsGridCopy = [];
     for (let i=0; i<resArr.length-1; i++) {
       let text = "";
       let trueNumbers = false;
@@ -265,13 +267,12 @@ function Addition() {
       if (foundComma){
         idxCarry += 1;
         continue;
-
       }
 
       // add carry only if > 0
       if (carries[idxCarry]!=="0"){
         realSum += parseInt(carries[idxCarry]);
-        text += " + " + carries[idxCarry] + " Übertrag"
+        text += " + " + carries[idxCarry] // + " Übertrag"
       }
 
       let realCarry = parseInt(realSum/10).toString()
@@ -280,22 +281,22 @@ function Addition() {
 
       if (trueNumbers){
         text += resArr[idxNumbers]
+        text += " und " + carries[idxCarry-1] + " Übertrag "
         text = text.replace("&nbsp;", "0")
-        text += resArr[idxNumbers]===realSum && carries[idxCarry-1]===realCarry ? "\t\tRichtig" : "\t\tFalsch";
+        text += resArr[idxNumbers]===realSum && carries[idxCarry-1]===realCarry ? "(Richtig)" : "(Falsch)";
 
-        let paragraph = document.createElement("p");
-        paragraph.innerHTML = text
-        document.getElementById("idmtResultSteps").appendChild(paragraph);
+        stepsGridCopy.push({step: text});
 
-        let btn = document.createElement("button");
-        btn.innerHTML = "bearbeiten: " + text;
-        btn.addEventListener("click", () => startOver(i));
-        document.getElementById("idmtResultSteps").appendChild(btn);
+//        let btn = document.createElement("button");
+//        btn.innerHTML = "bearbeiten: " + text;
+//        btn.addEventListener("click", () => startOver(i));
+//        document.getElementById("idmtResultSteps").appendChild(btn);
       }
     }
 
+    setStepsGrid(stepsGridCopy);
     let btnSubmit = document.createElement("button");
-    btnSubmit.innerHTML = "submit result";
+    btnSubmit.innerHTML = "Ergebnis abgeben";
     btnSubmit.addEventListener("click", finishCalculation);
     document.getElementById("idmtResultSteps").appendChild(btnSubmit);
 
@@ -307,7 +308,8 @@ function Addition() {
 
   const finishCalculation = () => {
     setShowAlert(false);
-    let resCalc = resArr.filter(n => n !== "&nbsp;").join("")
+    document.getElementById("idmtResultSteps").innerHTML = "";
+    let resCalc = resArr.filter(n => n !== "&nbsp;").join("");
     setResultsGrid([{number: resCalc}]);
     resCalc = parseFloat(resCalc);
 
@@ -400,9 +402,19 @@ function Addition() {
           handleCarryChange={handleCarryChange}/>
       </div>
 
-      <div id="idmtResultSteps"></div>
       <div id="finishCalculation"></div>
 
+      <div id="idmtResultSteps">
+        <DataGrid
+          dataSource={stepsGrid}
+          focusedRowEnabled={true}
+          showBorders={true}
+          showColumnHeaders={false}
+        >
+          <Column dataField="step" />
+        </DataGrid>
+      </div>
+
       <Alert/>
 
     </div>

src/App.css

@@ -43,6 +43,11 @@ hr{
   margin: 0.2em 1em;
 }
 
+#idmtResultSteps{
+  display: inline-block;
+  margin-bottom: 45px;
+}
+
 footer{
   background-color: #eee;
 }