<blockquote aria-live="polite">Loading quote...</blockquote>

<button>More Ron</button>

<script async>

  // Variables
  let ronQuote = document.querySelector('blockquote');
  let ronButton = document.querySelector('button');

  // Methods
  function callRon() {
    fetch('https://ron-swanson-quotes.herokuapp.com/v2/quotes').then(function (response) {
      if (response.ok) {
        return response.json();
      } else {
        return Promise.reject(response);
      }
    }).then(function (data) {
      let errorState = document.querySelector("#errorState");
      if (errorState) errorState.remove();
      ronQuote.innerHTML = `
      <p>${data[0]}</p>
      <footer>— Ron Swanson</footer>`;
    }).
      catch(function (err) {
        console.warn("oh no something went wrong", err);
        let errorState = document.querySelector("#errorState");
        if (!errorState) {
          errorState = document.createElement('p');
          errorState.setAttribute("id", "errorState");
          errorState.style.color = "red";
          errorState.textContent = "There was an error getting a new quote, please try again."
          ronButton.after(errorState);
        }
      })
  };
  function handleInput(event) {
    if (event.target !== ronButton) return;
    callRon();
  };

  // Listeners and inits
  callRon();
  document.addEventListener('click', handleInput);

</script>