fetch_template.js

(function () {

   // Set up all the buttons and forms we'll need to manipulate
   const form = document.querySelector('form'),
         dataWrapper = document.querySelector('.data-response');

   // Make the API call, e is the form submit object
   const getData = event => {

      // this if statement allows us to call the action without submitting the form
      if (event) {
         event.preventDefault();
      }

      /*
         Template for fetch
         fetch(dataUrl)
            .then(res)
            .catch(err)
      */

      // Add in the value from the form
      fetch(`https://api.github.com/users/${username.value}`)
         // convert it to readable data
         .then(response => response.json())
         // do something with the data
         .then(data => {
            let formattedData = '';
            if (data) {
               formattedData = data.login;
               console.log(data);
            }
            dataWrapper.innerHTML = formattedData;
         })
         .catch(error => console.error(error));
   };
   // makes sure the form exists before adding a listener to the submit action
   if (form) {
      form.addEventListener('submit', getData);
   }

}());