05. Character and Word 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>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

<p>
  <button class="btn-blue button" id="button-1">Button 1</button>
  <button class="btn-blue button here-is-johnny" id="button-2">Button 2</button>
  <button class="btn-blue button" id="button-3">Button 3</button>
  <button class="btn-blue button" id="button-4">Button 4</button>
  <button class="btn-blue button" id="button-5">Button 5</button>
  <button class="btn-blue button here-is-johnny" id="button-6">Button 6</button>
</p>

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08

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

JavaScript

/* As the user types or pastes content in, the text of the #word-count
and #character-count elements should be updated to show how many words
and characters are in the #text field. */

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

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

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

JavaScript

/* Modify any methods that you can to support chaining. 
Ideally, the methods to add and remove classes should be chainable.*/

const $ = (function () {

  // Create Constructor function here
  const Constructor = function (selector) {
    this.elements = document.querySelectorAll(selector);
  };

  // Immutable copy of the matching elements
  Constructor.prototype.items = function () {
    return Array.prototype.slice.call(this.elements);
  };

  // Get first item
  Constructor.prototype.first = function () {
    return this.elements[0];
  }

  // Get last item
  Constructor.prototype.last = function () {
    return this.elements[this.elements.length - 1];
  }

  // Add class to element
  Constructor.prototype.addClass = function (newClass) {
    this.items().forEach(element => {
      element.classList.add(newClass);
    })
    return this;
  };

  // Remove class from element
  Constructor.prototype.removeClass = function (newClass) {
    this.items().forEach(element => {
      element.classList.remove(newClass);
    })
    return this;
  };

  return Constructor;
})();

// Create new instance
const btns = new $('.button')

// Check the console logs in dev tools
console.log('$.items()', btns.items());
console.log('$.first()', btns.first());
console.log('$.last()', btns.last());

// Add and remove class
btns.addClass('btn-purple').removeClass('btn-blue');

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08