08. Random Ron without duplicates

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* Modify it so that if the same quote gets returned from the API
in the last 50 quotes, you skip it and fetch another one instead. */

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

const quotesArr = [];

var getQuote = function () {
  fetch('http://ron-swanson-quotes.herokuapp.com/v2/quotes').then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      return Promise.reject(response);
    }
  }).then(function (data) {
    console.log(data[0]);
    if (quotesArr.length === 50) {
      quotesArr.shift()
    }

    if (quotesArr.indexOf(data[0]) > -1) {
      getQuote()
      alterGradient()
      return;
    }
    quotesArr.push(data[0])
    quoteOutput.innerHTML = `<p class="quote-paragraph"> ${quotesArr[quotesArr.length - 1]}</p>`;

    console.log(quotesArr);
  }).catch(function (error) {
    quoteOutput.innerHTML =
      '[Something went wrong, sorry!] I have a joke for you... The government in this town is excellent, and uses your tax dollars efficiently.';
  });
};

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 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, false);