read numbers, get comma position

src/App.css

@@ -1,3 +1,14 @@
+#overview{
+  font-family: monospace;
+  background-color: #ccc;
+  width: 100px;
+  text-align: right;
+  margin: auto;
+  font-size: 2em;
+}
+
+
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,23 +1,87 @@
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
 
 function App() {
+  const [input, setInput] = useState("");
+  const [result, setResult] = useState(0);
+
+  const handleInput = (e) => {
+    setInput(e.target.value);
+  }
+
+  const handleSubmit = (e) => {
+    setInput("1,33+22,4450");
+    startCalculation();
+    e.preventDefault(); // avoid page reload
+  }
+
+  const afterCommaLen = (number) => {
+    let noStrList = number.toString().split(".");
+    if (noStrList.length > 1){
+      return noStrList[1].length
+    }
+    return 0
+  }
+
+  const addNumbersToDiv = (digits) => {
+    let number = "<p>" + digits.join("") + "</p>"
+    document.getElementById("overview").innerHTML += number;
+  }
+
+  const numbersToArrOfArr = (numbers) => {
+    let befComma = Math.max(...numbers).toString().split(".")[0].length;
+    let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
+    let arrLength = befComma + 1 + afterComma
+
+    let numbersArr = numbers.map(x => x.toString().split(""))
+    for (let numArr of numbersArr){
+      while (numArr.indexOf(".")>-1 && numArr.indexOf(".")!==befComma){
+        numArr.unshift("&nbsp;"); // add " " before comma
+      }
+      while (numArr.length < arrLength){
+        numArr.push("&nbsp;"); // add " " after comma
+      }
+    }
+
+    document.getElementById("overview").innerHTML = "";
+    numbersArr.map(digits => addNumbersToDiv(digits));
+
+    // TODO: assert all have same length and comma at same index?
+    console.log(numbersArr)
+    return numbersArr
+  }
+
+  const startCalculation = () => {
+    if (input.includes("+")){
+      let numbers = input.split("+").map(x => parseFloat(x.replace(",",".")));
+      setResult(numbers.reduce((x,y) => x+y, 0));
+
+      numbers = numbersToArrOfArr(numbers)
+
+      for (let i=numbers[0].length-1; i>=0; i--){
+        console.log(i, numbers.map(x => x[i]))
+      }
+      /*
+      Komma schieben später
+      übertrag und ergebnis input felder
+      nach eingabe automatisch weiter zu nächsten feld
+      wie komma setzen? max zahl von vorher?
+      ergebnis mit state result vergleichen
+      error or success message
+      */
+    }
+
+
+
+  }
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <textarea onChange={(e) => handleInput(e)}></textarea>
+        <input type="submit" value="calculate"/>
+        <div id="overview"></div>
+      </form>
     </div>
   );
 }