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

<button>More Ron</button>

<script async>
  // Variables
  let ronQuote = document.querySelector('blockquote');
  let ronButton = document.querySelector('button');
  let savedQuotes = [];

  // Methods
  function updateQuote(quote) {
    if (savedQuotes.indexOf(quote) > -1 || quote === "") {
      callRon();
      return;
    }
    else if (savedQuotes.length > 49) {
      savedQuotes.splice(0, 1);
      savedQuotes.push(quote);
    }
    else {
      savedQuotes.push(quote);
    }
    ronQuote.innerHTML = `
      <p>${savedQuotes[savedQuotes.length - 1]}</p>
      <footer>— Ron Swanson</footer>`;
  };
  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();
      updateQuote(data[0]);
    }).
      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>