07. Random Ron

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

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

=======

JavaScript

/* For this project, get an array of stories from the New York Times API,
turn them into markup, and inject them into the #app element. */

const appOutput = document.querySelector('#app');
const getStories = function () {
fetch('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=T6l8P8ICK6XZr1u3OeA0qoGUFrEcSM5R').then(
  function (response, resolve) {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject(response)
    };
  }).then(function (data) {
  const allStories = [...data.results];
  const lastFiveStories = allStories.slice(0, 5)
  appOutput.innerHTML = lastFiveStories.map(function (result) {
    return (`
    <div class="container"> 
      <ul class="title">
      <li>${result.title}</li>
      <a class="link" href="${result.url}" target="_blank">Read more</a>
      </ul>
    </div>
    <br>
    `);
  }).join('')
}).catch(response => {
  console.log("something went wrong", response);
  appOutput.textContent = "Something went wrong...";
});
};

getStories();

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

JavaScript

/* For today’s project, we’re going to write a script
that automatically saves form field data as a user types. */

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

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08