Untitled

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

export default function App() {
  const [kwota, setKwota] = useState(1000)
  const [miesiac, setMiesiac] = useState(12)

  function wylicz(e) {
    e.preventDefault()
    console.log("działa")

    
  }
  
  return (
    <>
      <form className='border p-3' onSubmit={wylicz}>
        <div className='mb-4'>
          <label htmlFor="kwota" className='form-label'>Kwota kredytu</label>
          <input 
            className='form-control' 
            type="number" 
            name="kwota" 
            id="kwota" 
            min={1000} 
            value={kwota} 
            onChange={(e) => setKwota(e.target.valueAsNumber)} 
          />
        </div>
        <div className='mb4'>
          <label htmlFor="miesiac" className='form-label'>Liczba miesięcy: {miesiac}</label>
          <input 
            className='form-range' 
            type="range" 
            name="miesiac" 
            id="miesiac" 
            min={2} 
            max={24} 
            step={1} 
            value={miesiac}
            onChange={(e) => setMiesiac(e.target.value)} 
          />
        </div>
        <button type="submit" className="btn btn-primary">Wylicz</button>
      </form>
      <div className="wynik">
        <p>Kwota do spłaty: </p>
        <p>Rata: </p>
      </div>
    </>
  )
}