Personal Referral Advertisement

Referral list in remote JSON and DOM manipulation.

by Fajar Purnama

HTML

<a id="referral-link" href="">
  <figure>
      <img id="referral-image" src="" alt="" />
      <figcaption id="referral-description"></figcaption>
  </figure>
</a>

JavaScript

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let random_number = Math.floor(Math.random() * myObj.referral.length);
  document.getElementById("referral-link").href = myObj.referral[random_number].link;
  document.getElementById("referral-image").src = myObj.referral[random_number].image;
  document.getElementById("referral-image").alt = myObj.referral[random_number].name;
  document.getElementById("referral-description").innerHTML = myObj.referral[random_number].category;
}
xmlhttp.open("GET", "https://0fajarpurnama0.github.io/assets/json/referrals.json");
xmlhttp.send();