<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">

    <title>Random quotes</title>

    <style>
      html {
        font-family: sans-serif;
      }

      h1 {
        letter-spacing: 2px;
      }

      p {
        line-height: 1.6;
      }

      section {
        padding: 10px;
        width: 400px;
        background: #666;
        text-shadow: 1px 1px 1px black;
        color: white;
        min-height: 150px;
      }


    </style>
  </head>

  <body>

    <section aria-live="assertive" aria-atomic="true">
      <h1>Random quote</h1>
      <blockquote>
        <p></p>
      </blockquote>
    </section>
    <script>
    const quotePara = document.querySelector('section p');

    let quoteJson;

    getQuotes('quotes.json', populateJson);

    let intervalID = window.setInterval(showQuote, 10000);

    function getQuotes(url, callback) {
      let request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'json';
      request.send();

      request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
          callback(request.response);
        }
      };
    }

    function populateJson(response) {
      quoteJson = response;
    }

    function showQuote() {
      let random = Math.floor((Math.random()*25));
      quotePara.textContent = quoteJson[random].quote + ' -- ' + quoteJson[random].author;
    }
    </script>
  </body>
</html>
