Likes Example

schema of the basic .addEventListener, fetch(), catch() and callback:

• addEventListener to all elements
• when the event is triggered a Callback is fired
• the Callback will fetch() something from the db.json
• then() we modify the DOM using event.target to identify which element the event was triggered from

const EMPTY_HEART = '♡'
const FULL_HEART = '♥'

let heartStates = {
  "♡": "♥",
  "♥": "♡"
};

let articleHearts = document.querySelectorAll(".like");

function likeCallback(e) {
  let heart = e.target;
  fetch("/bogus_url")
    .then(function() {
       heart.innerText = heartStates[heart.innerText];
    })
    .catch(function(error) {
      console.log('there was an error)
    });
}

for (let heart of articleHearts) {
  heart.addEventListener("click", likeCallback);
}

Original Example