// Here we wrap the code in a function that will be called when
// all the content has been drawn/written to the page. DOM = Document Object Model.
// This has the added benefit of containing your code, keeping it out of the
// Global Namespace, so that it can't be overwritten or conflict with code elsewhere.
window.addEventListener('DOMContentLoaded', function(event) {

  // Note: I have opted for separate shorter functions
  // This makes them easier to debug, test and makes them re-usable.
  // We can re-use clampScore, or displayScore elsewhere if needed.
  // The code isn't hidden in the middle of one long function.

  // In the clamp function below max = 15, min = 0 are default values
  // and are optional e.g.
  // clampScore(17) -> 15
  // clampScore(-5) -> 0
  // clampScore(22, 20, 5) -> 20 (here we set max to 20, and min to 5)
  // clampScore(1, 20, 5) -> 5
  function clampScore(score, max = 15, min = 0) {
    return Math.max(Math.min(max, score), min);
  }

  function calculateScore(score) {
    /* Courtesy of Archibald */
    return clampScore(2 * Math.floor(score / 10) - 3);
  }

  function sumInputValues(inputs) {
    let total = 0;

    inputs.forEach(function(input) {
      // inputs values by default are strings 
      // So '10' + '13' = '1013' - no good!
      // convert the string to a number first
      // 10 + 13 = 23 - better!
      const inputValue = Number(input.value);

      total += calculateScore(inputValue);
    })

    return total;
  }

  function displayScore(score) {
    const displayScore = document.getElementById('total');
    
    displayScore.textContent = 'Score: ' + score;
  }

  // the event object is passed to a handler by default when an event is fired.
  function calculateScores(event) {
    // press F12(chrome) to bring up your console
    // click on the 'Calculate' button in the preview window and check your console.
    // click on SubmitEvent and have a look at the properties.
    console.dir(event);
    
    event.preventDefault(); // stop the form submitting to a url
    
    // We added an EventListener to the form below
    // the target property on the event object is the form element.
    // You can see this in the console as pointed out above.
    const form = event.target;
    // find the inputs using the form as the root to search from
    const inputs = form.querySelectorAll('input'); 
    const total = sumInputValues(inputs);

    displayScore(total);
  }

  const form = document.querySelector('#grades'); // get the form element
  form.addEventListener('submit', calculateScores); // add a submit listener
})