Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, {useState} from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import {TextField} from "@mui/material";
import {addizione} from "./add";
export default function App() {
const [left, setLeft] = useState<number | null>(null);
const [right, setRight] = useState<number | null>(null);
const [result, setResult] = useState<number | null>(null);
return (
<Card sx={{minWidth: 275}}>
<CardContent>
<div className="flex-column">
<div className="flex-row">
<TextField id="left" value={left ?? ""} onChange={({target}) => {
let value = parseFloat(target.value);
if (!isNaN(value)) {
setLeft(value);
} else {
setLeft(null);
}
}}/>
<div style={{padding: "1rem", fontSize: "4rem"}}>+</div>
<TextField id="right" value={right ?? ""} onChange={({target}) => {
let value = parseFloat(target.value);
if (!isNaN(value)) {
setRight(value);
} else {
setRight(null);
}
}}/>
<div style={{padding: "1rem", fontSize: "4rem"}}>=</div>
<TextField id="result" value={result ?? ""} onChange={value => console.log(value)}/>
</div>
<div className="flex-row">
<div className="filler"/>
<Button variant="contained" style={{margin: "3rem"}} onClick={() => {
setResult(addizione(left, right));
}}>Calculate</Button>
</div>
</div>
</CardContent>
</Card>
);
}
|