11. Sanitizing the NYT API Data

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

HTML

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

=======

HTML

<button class="button" value="monsters">Click to load and play!</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

/* Before rendering API data into the DOM as markup, 
sanitize it to protect yourself from any malicious code that might get sent back. */

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>${sanitizeHTML(article.url)}</li>
              <a class="link" href="${sanitizeHTML(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

/* Display this image by default, and reveal the monster behind it after it’s clicked.
People who navigate the web with a keyboard or use a screen reader
should still be able to play this game. */

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 = '<p>Click a door to reveal a monster. Try not to find the sock.</p><div class="row">' + monsters.map(monster => {
    return (`
      <div class="grid" aria-live="polite"><button class="show_button" data-id="${monster}"><img alt= "Click this picture of door to see monster" src="../img/door.svg"/></button></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;
}

const replaceTargetElement = function (e) {
  const monster = e.target.closest('[data-id]');
  if (!monster) return;
  const monsterID = monster.getAttribute('data-id');
  monster.parentNode.innerHTML = `<img alt="A picture of ${monsterID}" src="../img/${monsterID}.svg"/>`
}

document.addEventListener('click', replaceTargetElement);

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

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

JavaScript

/* In today’s project, we’re going to modify our API cache script
to fallback to the cache if the API call fails—even if data has expired.
Showing something, even if it’s a bit out of date, is better than showing nothing at all.*/

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