10. Latest 3 top stories on few categories

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

HTML

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

=======

HTML

<button class="button" value="monsters">Click to load and Shuffle!</button>

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

<footer>
  <p class="text-small text-muted">Icons by 
    <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>, 
    <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>, 
    <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a>, 
    <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>, 
    <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>, 
    <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>, 
    <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>, 
    <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>, 
    <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>,<br/> 
    and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p>
</footer>

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

HTML

<div id="app">
  Loading...
</div>

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08

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

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

=======

JavaScript

/* Each monster (or sock) has a matching SVG in the source code.
For example, there’s a monster3 in the array, and a monster3.svg in the source code.
Shuffle the array of monsters, and render the matching SVG files into the #app element. */

const shuffleBtn = document.querySelector('.button');
const app = document.querySelector('#app');

const monsters = [
  'monster1',
  'monster2',
  'monster3',
  'monster4',
  'monster5',
  'monster6',
  'monster7',
  'monster8',
  'monster9',
  'monster10',
  'monster11',
  'sock'
];

const render = function () {
  app.innerHTML = '<div class="row">' + monsters.map(monster => {
    return (`
      <div class="grid" aria-live="polite"><img alt= "A picture of ${monster}" src="../img/${monster}.svg"/></div>
    `)
  }).join('') + '</div>';
};

const shuffleArr = function (arr) {
  var currentIndex = arr.length;
  var temporaryValue, randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;
  }
  render();
  return arr;
}

shuffleBtn.addEventListener('click', function() {
  shuffleArr(monsters);
});

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

JavaScript

/* Cache the API data in localStorage for a short time, 
and use that instead of making a fresh API call on subsequent visits or page reloads. */

const appOutput = document.querySelector('#app');
let storageID;
var numberOfArticles = 2;
const sanitizeHTML = function (str) {
  return str.replace(/[^\w. ]/gi, function (c) {
    return '&#' + c.charCodeAt(0) + ';';
  })
};
const isDataValid = function (saved, expirationDate) {
  if (!saved || !saved.data || !saved.timestamp) return false;
  const difference = new Date().getTime() - saved.timestamp;
  return difference < expirationDate;
}
const saveData = function (data) {
  const cache = {
    data: data,
    timestamp: new Date().getTime()
  }
  localStorage.setItem(storageID, JSON.stringify(cache));
}
const getData = function () {
  const saved = JSON.parse(localStorage.getItem(storageID));
  if (!saved) return;
  if (isDataValid(saved, 1000 * 10)) {
    return saved.data;
  }
}
const render = function (articles) {
  appOutput.innerHTML = '<h3 class="category">Pirate articles:</h3>' + articles.map(function (article) {
    return (`
        <div class="container">
          <ul class="title">
            <li> <strong>Title:</strong> ${sanitizeHTML(article.title)}</li>
            <li> <strong>Author:</strong> ${sanitizeHTML(article.author)}</li>
            <li> <strong>Publication date:</strong> ${sanitizeHTML(article.pubdate)}</li>
          </ul>
          <div class="article"><p>${sanitizeHTML(article.article)}</p></div>
        </div>
        <hr>
        <br>
        `);
  }).join('');
}
const getFirstFewArticles = function (articles) {
  return articles.slice(0, numberOfArticles);
}
const getNews = function () {
  // Check for valid cached data,
  // If exist, use it
  const saved = getData();
  if (saved) {
    render(saved);
    console.log("Loaded from cache");
    return;
  }
  fetch('https://vanillajsacademy.com/api/pirates.json').then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      return Promise.reject(response);
    }
  }).then(function (data) {
    const articles = getFirstFewArticles(data.articles);
    saveData(articles);
    render(articles);
    console.log("Fetched from API");
  }).catch(function (error) {
    console.log("something went wrong", error);
    appOutput.textContent = "Something went wrong...";
  })
}
getNews();

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08