JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div id="output" class="nimg"></div>

CSS

img {
  height: 100%;
  width: auto;
}

.nimg {
  height: 300px;
  width: 200px;
}

JavaScript

var numbers = [];

var myFunc = function(callback) {
    var output = document.getElementById('output');
    var req = new XMLHttpRequest();
    req.open('GET', 'https://www.omdbapi.com/?t=Game of Thrones&Season=1&Episode=1');
    req.onload = function () {
        if (req.status == 200) {
          var img = JSON.parse(req.response).Poster;
          output.innerHTML = "<img src='" + img + "' />";
        } else {
            console.log('ERROR', req.statusText);
        }
    };
    req.onerror = function () {
        console.log('Network Error');
    };
    req.send(); // Add request to task queue
    console.log('done!');
    return callback('heythere!');
}

const theAnswer = new Promise((resolve, reject) => {
	myFunc(value => {
  	resolve(value);
  });
});

theAnswer.then(result => console.log(`Second to fire is: ${result}`));
//theAnswer.then(function(result) {
//  setTimeout(function() {
//  	debugger;
//  }, 1);
//});