06. Announcing the Count

Enter your text below.

You've written 0 words and 0 characters.

<<<<<<< HEAD <<<<<<< HEAD

HTML

<label class="label" for="text">Enter your text below.</label>
<textarea class="textarea" id="text"></textarea>

<p aria-live="polite">You've written <strong><span id="word-count">0</span> words</strong> and <strong><span id="character-count">0</span> characters</strong>.</p>

=======

HTML

<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>

>>>>>>> refs/remotes/origin/main =======

HTML

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08

<<<<<<< HEAD <<<<<<< HEAD

JavaScript

/* Changes to the content in #word-count and #character-count 
should be announced to screen reader users. Test this with an actual screen reader
to hear how the announcements are actually made. */

const textArea = document.querySelector('#text');
const countCharOutput = document.querySelector('#character-count');
const countWordOutput = document.querySelector('#word-count');

function counter() {
  const wordsArr = textArea.value.split(/[\n\r\s]+/g).filter(item => {
    return item.length > 0;
  });
  countCharOutput.textContent = textArea.value.length;
  countWordOutput.textContent = wordsArr.length;
};

textArea.addEventListener('input', counter);

=======

JavaScript

/* 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);

>>>>>>> refs/remotes/origin/main =======

JavaScript

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08