08. Random Ron without duplicates

Show some random quote.

“Waiting for a new quote...

More Ron

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

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>

=======

HTML

<div id="app">
  <span id="placeholder"></span>
</div>

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

HTML

<p>Fill the form below.</p>
<form class="save-me" id="save-me" autocomplete="off">
  <label class="label" for="name">Name</label>
  <input class="input" type="text" name="name" id="name" autocomplete="off">
  <label class="label" for="address">Address</label>
  <input class="input" type="text" name="address" id="address">
  <label class="label" for="email">Email</label>
  <input class="input" type="email" name="email" id="email">
  <label class="label" for="more">Additional thoughts?</label>
  <textarea class="textarea" name="more" id="more"></textarea>
  <p>
    <button class="button" type="submit">Submit</button>
  </p>
</form>

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08

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

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

=======

JavaScript

/* Get articles from three to five categories, then render the API data
into markup and inject it into the #app element. Instead of rendering all of the articles,
use the first five from each category. Add a heading before each section so that you know
what category the articles are from. */

const appOutput = document.querySelector('#app');
const apiKey = 'T6l8P8ICK6XZr1u3OeA0qoGUFrEcSM5R';
const sections = ['Technology', 'Science', 'Magazine'];
const articleNum = 3;

const render = function (articles, section) {
  appOutput.innerHTML += '<h3 class="category">' + section + ':' + '</h3>' + articles.map(function (article) {
    return (`
            <div class="container">
              <ul class="title">
              <li>${article.title}</li>
              <a class="link" href="${article.url}" target="_blank">Read more</a>
              </ul>
            </div>
            <br>
            `);
  }).join('')
};

const getLastNStories = function (articles) {
  return articles.slice(0, articleNum)
}

const getStories = function (section) {
  fetch(`https://api.nytimes.com/svc/topstories/v2/${section}.json?api-key=${apiKey}`).then(
    function (response, resolve) {
      if (response.ok) {
        return response.json();
      } else {
        return Promise.reject(response);
      };
    }).then(function (data) {
    const lastNStories = getLastNStories(data.results);
    render(lastNStories, section);
  }).catch(response => {
    console.log("something went wrong", response);
    appOutput.textContent = "Something went wrong...";
  });
};

sections.forEach(function (section) {
  getStories(section);
});

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

JavaScript

/* Modify the script to store all of the fields into a single array or object
that you save and retrieve from locationStorage. To avoid conflicts with yesterday’s project,
you might want to give the localStorage item a different key name. */

const form = document.querySelector('#save-me');
function saveInputValue (e) {
  let savedInputs = localStorage.getItem('form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  savedInputs[e.target.id] = `${e.target.value}`;
  localStorage.setItem('form-inputs', JSON.stringify(savedInputs));
}
function getInputsFromLocalStorage () {
  let inputs = Array.prototype.slice.call(document.querySelectorAll('[data-type="input"]'));
  let savedInputs = localStorage.getItem('form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  inputs.forEach(function(input) {
  if (!savedInputs[input.id]) return;
    input.value = savedInputs[input.id];
  })
}
function clearDataOnSubmit () {
  localStorage.clear();
}
form.addEventListener('input', saveInputValue);
form.addEventListener('submit', clearDataOnSubmit);
getInputsFromLocalStorage ();

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08