JSFiddle - React, Tailwind, and code Playground

by alxers

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="styles.css"  />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

</body>
</html>

CSS

.tooltip-num-fact {
    display: none;
}

.num-fact:hover .tooltip-num-fact{
    display: inline;
}

JavaScript

//http://numbersapi.com/#random/math
//https://api.chucknorris.io/jokes/search?query=karate+kid https://api.chucknorris.io/
// Use query search by tw show keyword to get chucknorris quote

let twShowReqUrl = `https://api.tvmaze.com/shows?page=${getRandomInt(150)}`;
const RAND_INTERVAL = 5;

makeRequest({
    verb: "GET",
    url: twShowReqUrl,
    progressCallback: updateProgress,
    loadCallback: transferComplete,
    errorCallback: transferFailed
});

function makeRequest({ verb, url, progressCallback, loadCallback, errorCallback, options }) {
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("progress", progressCallback);
    oReq.addEventListener("load", loadCallback);
    oReq.addEventListener("error", errorCallback);
    oReq.open(verb, url);
    oReq.send();
}

function updateProgress (e) {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total * 100;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(e) {
	if (e.target.readyState === 4) {
        let data = JSON.parse(e.target.response);
        let bodyEl = document.getElementsByTagName('body')[0];
        let div = document.createElement('div');
        let tvShows = randTvShows(data);
        tvShows.forEach(function(show) {
            let innerDiv = document.createElement('div');
            let image = show.image ? show.image.medium : '';
            innerDiv.innerHTML = `
                id ${show.id} <br>
                name ${show.name} <br>
                type ${show.type} <br>
                lang ${show.language} <br>
                premiered ${show.premiered} <br>
                <img src=${image}> <br>
                genres ${show.genres.join(' ')} <br>
                status ${show.status} <br>
                time ${show.schedule.time} <br>
                days ${show.schedule.days.join(' ')} <br>
                summary <span>${wrappedSummary(show.summary)}</span> <br>
   ...