This script is used to illustrate the event listener method in the "The Javascript Events" article by Yasir Gaji

clearinterface.js

document.querySelector('.clear-form').addEventListener('click', clearForm); // Here we selected the "clear-form" class from the html collection and added an event listener to it, which takes in 2 parameters the click event and the named function "clearForm".

function clearForm(e) {

  document.querySelector('.form-area').innerHTML = `<h4>Form Cleared!</h4>`; // This selects the "form-area" class from the html collection and replaces the innerHTML with the text "Form Cleared!"
  e.preventdefault();
}; // Here the named function "clearForm" clears the form, we also passed the parameter "e" which serves as the "event object" later on declared using the "preventdefault()" method to stop the default behaviour of the event listener.