import './App.css';
import { useState } from "react";

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

function App() {
  const [base, setBase] = useState();
  const [height, setHeight] = useState("");
  const [area, setArea] = useState("");

  function calcTriangleArea() {
    let area = base * height / 2
    setArea(area)
  }  
  return (
    <div className="App container">
      <h1>Háromszög területe</h1>
      <div>
            <label className='form-label'>Alap</label>
            <input type="text" onChange={(e) => setBase(e.target.value)} 
            className='form-control'/>
          </div>
          <div>
            <label className='form-label'>Magasság</label>
            <input type="text" onChange={(e) => setHeight(e.target.value)} 
            className='form-control'/>
          </div>
          <div className="d-flex justify-content-start">
            <Button
            variant="primary"
            className='m-2'
            onClick={calcTriangleArea}
            >
            Számít
            </Button>
          </div>
          <div>
            <label className='form-label'>Terület</label>
            <input type="text" value={area} readOnly 
            className='form-control'/>
          </div>
    </div>
  );
}

export default App;