07. Random Ron

Show some random quote.

“Waiting for a new quote...

HTML

1
2
3
4
5
6
7
8
9
10
11
<p>Show some random quote.</p>

<div class="quote-container">
  <blockquote aria-live="polite">
    <span class="quote-mark">&ldquo;</span><span class="quote-output">Waiting for a new quote...</span>
  </blockquote>
</div>

<p>
  <button class="fetch-button">More Ron</button>
</p>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* When the page loads, a random quote from the Ron Swanson Quotes API
should be displayed in the blockquote element. When the More Ron button is clicked,
a new quote from the API should replace the current one. */

const fetchBtn = document.querySelector('.fetch-button');
const quoteOutput = document.querySelector('.quote-output');
const quoteContainer = document.querySelector('.quote-container');

function getQuote() {
  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) {
    renderQuote(data)
    alterGradient()
  }).catch(function (err) {
    console.log(err);
    return err;
  })
}

function renderQuote(data) {
  quoteOutput.innerHTML = `<p class="quote-paragraph"> ${data[0]}</p>`;
}

function alterGradient() {
  quoteContainer.style.background = `linear-gradient(${Math.floor(Math.random() * (90 - 35)) + 90}deg, rgba(142,69,${Math.floor(Math.random() * (255 - 100)) + 255},1), ${Math.floor(Math.random() * (20 - 10)) + 20}%, rgba(74,${Math.floor(Math.random() * (90 - 60)) + 90},${Math.floor(Math.random() * (280 - 140)) + 280},.8) ${Math.floor(Math.random() * (40 - 30)) + 40}%, rgba(142,69,255,1) 83%)`
}

getQuote()

fetchBtn.addEventListener('click', getQuote);