Calculators/Quadratic_Equation_Calculator/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- title -->
    <title>Calculator</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- title -->
    <h1>Quadratic Equation Calculator 🧮</h1>
    <br />
    <!-- Calculator -->
    <div class="calculator">
      <div class="basic">
        <h3 class="title">Quadratic Equation: <br />Ax<sup>2</sup> + Bx + C</h3>
      </div>
      <div class="surface">
        <div class="inputs">
          <input type="number" autocomplete="off" id="a" placeholder="A" />
          <input type="number" autocomplete="off" id="b" placeholder="B " />
          <input type="number" autocomplete="off" id="c" placeholder="C" />
          <input type="submit" id="submit" onclick="quadraticValue()" />
        </div>
        <div class="e-box">
          <p class="e-text" id="e-text">✔️ Enter the Values of A, B, C</p>
        </div>
        <h3 class="root">Roots are:</h3>
        <div class="results">
          <button class="btn btn-primary">
            x<sub>1</sub> = <span id="x1"></span>
          </button>
          <button class="btn btn-primary">
            x<sub>2</sub> = <span id="x2"></span>
          </button>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>