{


  const fetchJSON = () => {
    fetch('../src/assets/data/quotes.json')
      .then(response => {
        return response.json();
      })
      .then(data => {
        const quotes = data.quotes;
        const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
        console.log(randomQuote);
        loadQuotes(quotes);
        loadRandomQuote(randomQuote);
        console.log(quotes);
      })
      .catch(err => {
        console.log(err);
      });
  };

  const loadRandomQuote = randomQuote => {
    const $h1 = document.querySelector('.title__quote');
    $h1.textContent = randomQuote.quote;
  };

  const loadQuotes = quotes => {
    const $quotesList = document.querySelector('.list');

    quotes.forEach(quote => {
      const $li = document.createElement(`li`);
      $li.classList.add(`list__quote`);
      $li.innerHTML = `<a class="">
      <span class="quote">${quote.quote}</span>
      <span class="author">${quote.author}</span>
      </a>
       `;
      $quotesList.appendChild($li);
    });
  };

  const init = () => {
    fetchJSON();
  };
  init();
}