|
@@ -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(" "); // add " " before comma
|
|
|
+ }
|
|
|
+ while (numArr.length < arrLength){
|
|
|
+ numArr.push(" "); // 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>
|
|
|
);
|
|
|
}
|