<label>Maths<input type="text"></label>
<label>English<input type="text"></label>
<label>Physics<input type="text"></label>
<label>Chemistry<input type="text"></label>
<label>Biology<input type="text"></label>
<label>History<input type="text"></label>
<label>Geography<input type="text"></label>
<button>Calculate</button>
<p id="total"></p>
label,
input {
  display: block;
}
const inputs = document.querySelectorAll("input");
document.querySelector("button").addEventListener("click", calc);

function calc() {
  let total = 0;
  inputs.forEach((element) => {
    score = 2 * Math.floor(element.value / 10) - 3;
    if (score > 15) score = 15;   // when 100%
    if (score < 0) score = 0;     // when <20%
    total = total + score;
  });
  document.getElementById("total").innerHTML = "Total score is " + total;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.