JSFiddle - React, Tailwind, and code Playground

by Pablo Rocha

HTML

<ul id="alert-list" />

JavaScript

var alertList = document.getElementById('alert-list');

var request = new XMLHttpRequest();

request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    if (request.status === 200) {
      var alerts = JSON.parse(request.responseText);
      alerts.map(alert => {
        var itemNode = document.createElement("li");

        var headerNode = document.createElement("h2");
        itemNode.appendChild(headerNode);
        
        var strongNode = document.createElement("strong");
        strongNode.innerHTML = alert.announcement;
        headerNode.appendChild(strongNode);

        var spanNode = document.createElement("span");
        spanNode.innerHTML = '&nbsp;' + alert.start_time;
        headerNode.appendChild(spanNode);

        var paragraphNode = document.createElement("p");
        paragraphNode.innerHTML = alert.announcement;
        itemNode.appendChild(paragraphNode);

        var buttonNode = document.createElement("button");
        buttonNode.innerHTML = 'Do Something!';
        itemNode.appendChild(buttonNode);

        alertList.appendChild(itemNode);
      })
    } else {
      alertAnnouncement[0].innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
    }
  }
}

request.open('GET', 'https://api.myjson.com/bins/1adinn');
request.send();