modern js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.tlo{
position: relative;
border: 2px solid black;
width: 200px;
height: 228px;
border-radius: 10px;
}

.napis1{
position: absolute;
left: 10px;
top: 20px;
}
.napis2{
position: absolute;
left: 10px;
top: 50px;
}
.napis3{
position: absolute;
left: 10px;
top: 80px;
}

.pole1{
position: absolute;
left: 100px;
top: 18px;
border: 1px solid black;
}
.pole2{
position: absolute;
left: 100px;
top: 48px;
border: 1px solid black;
}
.pole3{
position: absolute;
left: 100px;
top: 78px;
border: 1px solid black;
}

.licz{
position: absolute;
left: 80px;
top: 110px;
border: 1px solid black;
}

.crownanie{
position: absolute;
left: 50px;
top: 130px;
color: red;
}
.cx1{
position: absolute;
left: 20px;
top: 165px;
color: red;
}
</style>
</head>
<body>

<!-- formularz -->
<div class="tlo">
<form name="formularz">

<!-- parametry -->
<div class="napis1">
Parametr a:
</div>

<div class="napis2">
Parametr b:
</div>

<div class="napis3">
Parametr c:
</div>

<!-- inputy -->
<form action='' method="POST">
<div class="pole1">
<input type="text" name="o1" size="5"/>
</div>

<div class="pole2">
<input type="text" name="o2" size="5"/>
</div>

<div class="pole3">
<input type="text" name="o3" size="5"/>
</div>

<div class="licz">
<input type="submit" value="Licz" />
</div>
</form>
<p class="crownanie" id="ix0"></p>
<p class="cx1" id="ix1"></p>
</div>
<script>
document.querySelector('form').addEventListener('submit', (event) => {
    // preventing default page reload
    event.preventDefault()
    const { target } = event
    // caching DOM
    const A = parseFloat(target['o1'].value)
    const B = parseFloat(target['o2'].value)
    const C = parseFloat(target['o3'].value)
    // math operations
    const delta = Math.pow(B, 2) - 4 * A * C
    const sqrt = Math.sqrt(delta, 2)
    // three cases scenario
    let txt = {};
    if (delta > 0) {
        const x1 = (- B - sqrt)/(2 * A)
        const x2 = (B - sqrt)/(2 * A)
        txt['msg'] = "Delta dodatnia, dwa rozwiązania. &Delta; = " + delta
        txt['x1'] = x1
        txt['x2'] = x2
        txt['count'] = 2
    } else if (delta < 0) {
        txt['msg'] = "Delta ujemna, brak rozwiązań. &Delta; = " + delta
        txt['count'] = false
    } else {
        const x = -B/(2 * A)
        txt['msg'] = "Delta daje dokładnie jedno rozwiązanie. &Delta; = " + delta
        txt['x1'] = x
        txt['count'] = 1
    }
    // caching DOM
    const P1 = document.querySelector('#ix0')
    const P2 = document.querySelector('#ix1')
    // return text strings
    P1.innerHTML = `f(x) =
    ${A > 0 ? `${A}` : `- ${Math.abs(A)}`}x<sup>2</sup>
    ${B > 0 ? `+ ${B}` : `- ${Math.abs(B)}`}x
    ${C > 0 ? `+ ${C}` : `- ${Math.abs(C)}`}`
    P2.innerHTML = txt['msg']
})
</script>
</body>
</html>