JSFiddle - React, Tailwind, and code Playground

by novikov433

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Шутка</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div id="main">
        <div id="results"></div>
        <div id="zvezda"><img src="zvezda.png" alt=""></div>
        <div id="favorit"></div>
    </div>
</body>
</html>

CSS

#category{
    display: none;
}

#type{
    display: none;
}

#flags{
    display: none;
}

#id{
    display: none;
}

#error{
    display: none;
}

#delivery{
    display: none;
}

JavaScript

(function() {

  function myinit() {
    if (!window.document)
      throw new Error('Where is window.document!?');
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.innerHTML = '<hr/><button onclick="window.myclick(this,event);">SendRequest</button><hr/>';
    window.myclick = myclick;
  };

  function myclick(b, e) {
    b.disabled = true;
    const container = document.querySelector('div');
const xhr = new XMLHttpRequest();
    xhr.open('GET', `https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,political,racist,sexist&type=twopart`, true);
    xhr.send(null);
    xhr.onload = ()=> {
        const data = JSON.parse(xhr.responseText);
        for (let [one, two] of Object.entries(data)) {
            container.insertAdjacentHTML('beforeend', `
            <div id="${one}" onselectstart="return false" onmousedown="return false">
            <div onselectstart="return false" onmousedown="return false">${two}</div>
            <hr/>
            </div>
        `);
    }
}
    
    setTimeout(function() {
      b.disabled = false;
      
    }, 0);
  };

  myinit();

})();