JSFiddle - React, Tailwind, and code Playground

by jazahn

HTML

<div id="lipsum" class="hide"></div>
<div id="output"></div>

CSS

.hide {
    display: none;
}

body {
    cursor: crosshair;
}

.background {
    background-color: blue;
    color: white;
}

.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

JavaScript

var lipsum = document.getElementById("lipsum");
var output = document.getElementById("output");

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://dinoipsum.herokuapp.com/api/?format=text&words=50&paragraphs=1");
xhr.send();

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){
        lipsum.innerHTML = xhr.responseText;
        
        var words = xhr.responseText.split(" ");
        var wordswithspans = [];
        
        words.forEach(function(item){
            //var span = '<span>' + item + '</span>';
            var span = document.createElement("span");
            var text = document.createTextNode(item);
            span.appendChild(text);
            
            
            span.addEventListener("click", function(e){ 
                clickListener(e, span); 
            });
            
            output.appendChild(span);
            output.appendChild(document.createTextNode(" "));
        });
        

        
    }
};

var clickListener = function(e, span){
    span.className = "spin";
};