JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="projectContainer">
    <div id="verticalAlign">
        <div id="horizontalAlign">
            <input type="button" id="fireButton" value="Fire the fireworks!">
        </div>
    </div>
    <!--this is where the firework divs go-->
    <div id="fireworksContainer"></div>
    <!--[end] this is where the fireworks divs go-->
</div>

CSS

/*Created by William Green (15) in California*/
/*Inspired by Matt Smith (https://plus.google.com/u/0/+MattSmithYo/posts/FieMS94Tugs)*/
/*Email [email protected] with questions or comments (protonmail is currently down because of cyber attacks, please support them by going to https://www.gofundme.com/protonmaildefense. Read about the attack https://protonmaildotcom.wordpress.com)*/
 html, body {
    margin:0;
    padding:0;
}
#projectContainer {
    background-color:#444;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#verticalAlign {
    position:absolute;
    top:50%;
    width:100%;
}
#horizontalAlign {
    display:table;
    margin:auto;
}
#fireButton {
    background-color:#eee;
    border-radius:4px;
    padding:10px;
    color:#333;
    border:0;
    font-size:20px;
    font-weight:600;
    -o-transition:background-color .2s ease, color .2s ease, opacity 2s ease;
    -moz-transition:background-color .2s ease, color .2s ease, opacity 2s ease;
    -webkit-transition:background-color .2s ease, color .2s ease, opacity 2s ease;
    -ms-transition:background-color .2s ease, color .2s ease, opacity 2s ease;
    transition:background-color .2s ease, color .2s ease, opacity 2s ease;
    outline:none;
}
#fireButton:active {
    background-color:#333;
    color:#eee;
}
#fireworksContainer {
    position:fixed;
    bottom:-1px;
    width:100%;
}
.firework {
    -o-transition:bottom 5s ease, opacity .3s ease, background-color 0s;
    -moz-transition:bottom 5s ease, opacity .3s ease, background-color 0s;
    -webkit-transition:bottom 5s ease, opacity .3s ease, background-color 0s;
    -ms-transition:bottom 5s ease, opacity .3s ease, background-color 0s;
    transition:bottom 5s ease, opacity .3s ease, background-color 0s;
    background-color:red;
    width:5px;
    height:5px;
    border-radius:50%;
    bottom:0;
    left:auto;
    position:absolute;
    opacity:0;
}

JavaScript

window.onload = function () {
    document.getElementById('fireButton').onclick = function () {
        fireTheFireworks();
        this.style.opacity = '0';
    };

    function fireTheFireworks() {
        var colors = [];
        var left = [];
        var bottom = [];
        var fireworkAnimateCount = 0;
        var fireworksContainer = document.getElementById('fireworksContainer');
        fireworksContainer.innerHTML = '';
        for (var i = 0; i !== Math.round(window.innerWidth / 40); i++) {
            var firework = document.createElement('div');
            firework.className = 'firework';
            fireworksContainer.appendChild(firework);
            window.setTimeout(function () {
                window.setTimeout(function () {
                    var fireworks = document.getElementsByClassName('firework');
                    var cel = fireworks[fireworkAnimateCount];
                    cel.style.bottom = Math.round(Math.random() * (window.innerHeight / 2 - window.innerHeight / 1.5) + window.innerHeight / 1.5) + 'px';
                    cel.style.left = Math.round(Math.random() * ((window.innerWidth - 100) - window.innerWidth / 100) + window.innerWidth / 100) + 'px';
                    cel.style.opacity = 1;
                    //console.log('starting timer');
                    startTimer(fireworkAnimateCount);
                    fireworkAnimateCount++;
                    if (fireworkAnimateCount === fireworks.length) {
                        window.setTimeout(function () {
                            fireTheFireworks();
                        }, 8000);
                    }
                }, i * Math.round(Math.random() * (2000 - 500) + 500));
            }, 0);
        }

        function startTimer(count) {
            var fireworks = document.getElementsByClassName('firework');
            window.setTimeout(function(){
                //explode the firework
            	//fireworks[count].style.display = 'none';
               ...