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;
}

#main {
    display: flex;
    flex-direction: row;
    width: 500px;

}

#zvezda{
    display: none;
}

#zvezda img{
    justify-content: flex-end;
    width: 50px;
    height: 50px;
}

JavaScript

const container = document.getElementById('results');
NProgress.configure({ trickleSpeed: 500 });
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>
        `);
    }
}

click = document.getElementById('results');
click.addEventListener('click', function (e) {
    click1 = document.getElementById('delivery');
    click1.style = "display: block";
    click2 = document.getElementById('zvezda');
    click2.style = "display: block";
    click3 = document.getElementById('setup');
    var myList = document.getElementById('setup').textContent;
    var myList1 = document.getElementById('zvezda');
    click3.addEventListener('click', function (e) {
        location.reload()
    })
})