JSFiddle - React, Tailwind, and code Playground

by coiscir

HTML

<h1>Flesh and Bone</h1>

<button id="fade">Fade</button>
<button id="show">Bring Back</button>

<h2>The Killers</h2>

JavaScript

// http://stackoverflow.com/q/17902484

var el = document.querySelector("h1");
var fade = document.getElementById("fade");
var show = document.getElementById("show");
var fader = function () {
    var opacity = 1;
    el.style.opacity = opacity;
    var timer = setInterval(function () {
        opacity -= 0.1;
        el.style.opacity = Math.max(opacity, 0);
        if (opacity <= 0) {
            clearInterval(timer);
        }
    }, 40);
}
var shower = function () {
    var opacity = 0;
    el.style.opacity = opacity;
    var timer = setInterval(function () {
        opacity += 0.1;
        el.style.opacity = Math.min(opacity, 1);
        if (opacity >= 1) {
            clearInterval(timer);
        }
    }, 40);
}
fade.onclick = fader;
show.onclick = shower;