JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input></input>
<h1></h1>
<ol>
    <li></li>
    <li></li>
    <li>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </li>
    <li></li>

CSS

h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

JavaScript

["forEach", "slice", "map", "filter"].forEach(function (fn) {

    HTMLCollection.prototype[fn] = NodeList.prototype[fn] = Array.prototype[fn];

});
[{
    n: 'mouseover',
    f: func
}, {
    n: 'mousemove',
    f: func
}].forEach(function (fn) {
    document.getElementsByTagName('*').forEach(setUnique)
});

d

function getChanged(e, i) {
    if (e._uniqueid !== = i) return e;
}

function setUnique(e, i) {
    e._uniqueid = i;
        setup(e);
    listener(e);

    e.addEventListener(fn.n, fn.f, false)
}

function func(event) {
    console.log(event);
}
function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
    
}
function setup(e) {
  e.addEventListener("animationstart", listener, false);
  e.addEventListener("animationend", listener, false);
  e.addEventListener("animationiteration", listener, false);
  
  var e = document.getElementById("watchme");
  e.className = "slidein";
}