Basic Student report card (Learn)

<!-- HTML -->

  <div class="container mt-5" style="border: 1px solid black;">

    <div class="container mt-5" style="text-align: center;">

      <h1 style="color: #dc3545"><u>Student Report</u></h1>

      <br>

      <div class="row">

        <div class="col-md-2 offset-1">

          English <input type="text" id="first">

        </div>

        <div class="col-md-2">

          Hindi <input type="text" id="second">

        </div>

        <div class="col-md-2">

          Math <input type="text" id="third">

        </div>

        <div class="col-md-2">

          Science <input type="text" id="four">

        </div>

        <div class="col-md-2">

          SST <input type="text" id="five">

        </div>

      </div>

    </div>

    <br>

    <div class="col-md-12" style="text-align: center;">

      <button class="btn btn-danger" onclick="calculate()">Show percentage</button>

      <button class="btn btn-danger" onclick="showdivision()">Show Division</button>

    </div>

    <div class="col-md-12" style="text-align: center;">

      <p id="showanswer"> </p>

      <p id="showdivisionans"> </p>

    </div>

<!-- Javascript -->

    <script>

      function calculate() {

        var x = document.getElementById("first").value;

        var y = document.getElementById("second").value;

        var a = document.getElementById("third").value;

        var b = document.getElementById("four").value;

        var c = document.getElementById("five").value;

        var z = ((Number(x) + Number(y) + Number(a) + Number(b) + Number(c)) * 100) / 500;

        document.getElementById("showanswer").innerHTML = z;

      }

      function showdivision() {

        var x = document.getElementById("first").value;

        var y = document.getElementById("second").value;

        var a = document.getElementById("third").value;

        var b = document.getElementById("four").value;

        var c = document.getElementById("five").value;

        var z = ((Number(x) + Number(y) + Number(a) + Number(b) + Number(c)) * 100) / 500;

        if (z >= 60) {

          document.getElementById("showdivisionans").innerHTML = "First Division";

        }

        else if (z < 60 && z >= 50) {

          document.getElementById("showdivisionans").innerHTML = "Second Division";

        }

        else if (z < 50 && z >= 34) {

          document.getElementById("showdivisionans").innerHTML = "Third Division";

        }

        else if (z < 34 && z >= 0) {

          document.getElementById("showdivisionans").innerHTML = "Failed";

        }

        else {

          document.getElementById("showdivisionans").innerHTML = "Invlid formate";

        }

      }

    </script>

  </div>

See Demo Click Here