JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<span id="problem">8 &#215; 3</span>

<input type="text" id="answer" />
<input type="button" id="answerSubmit" value="&#8594;" />
<canvas id="background"></canvas>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 * {
    font-family:'Open Sans', sans-serif;
}
html, body {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
#problem {
    display:block;
    width:100%;
    text-align:center;
    font-size:80px;
    position:fixed;
    top:calc(50% - 90px);
}
#answer {
    width:249px;
    height:50px;
    text-align:center;
    position:fixed;
    top:calc(50% + 15px);
    left:calc(50% - 150px);
    font-size:35px;
    border:1px solid #777;
    margin:0px;
    padding:0px;
}
#answer:focus {
    border-color:#222;
    outline:none;
}
#answerSubmit {
    width:52px;
    height:52px;
    background:#38e;
    border:none;
    outline:none;
    cursor:pointer;
    text-align:center;
    display:table;
    vertical-align:center;
    color:white;
    font-size:25px;
    position:fixed;
    top:calc(50% + 15px);
    left:calc(50% + 100px);
    border:1px solid #777;
    border-left:none;
    outline:none;
    transition:background 0.1s ease-out;
}
#answer:focus + #answerSubmit {
    border-color:#222;
}

JavaScript

var x = [],
    y = [],
    yVel = [],
    xVel = [],
    hue = [],
    size = [],
    timeOutLoop, canvas = document.getElementById("background"),
    ctx = canvas.getContext("2d");

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < x.length; i++) {
        ctx.beginPath();
        ctx.arc(x[i], y[i], size[i], 0, 2 * Math.PI);
        ctx.fillStyle = 'hsl(' + hue[i] + ', 50%, 50%)';
        ctx.fill();
    }
}

function updateLoop() {
    for (i = 0; i < x.length; i++) {
        x[i] += xVel[i];
        y[i] += yVel[i];
        xVel[i] *= 0.99;
        yVel[i] += 1;
    }

    render();

    timeOutLoop = window.setTimeout(function () {
        updateLoop();
    }, 30);
}

function confetti() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    for (i = 0; i < (canvas.width * canvas.height) / 2000 && i < 200; i++) {

        if (Math.round(Math.random()) === 0) {
            // Created on left/right
            if (Math.round(Math.random()) === 0) {
                // Right
                x[i] = canvas.width;
                xVel[i] = (Math.random() - 1) * canvas.width / 25 + (Math.random() - 0.25) * -20;
            } else {
                // Left 
                x[i] = 0;
                xVel[i] = Math.random() * canvas.width / 25 + (Math.random() - 0.25) * 20;
            }
            y[i] = canvas.height / 2 + (Math.random() - 0.5) * (canvas.height - 100);
            yVel[i] = Math.random() * canvas.height / -25 + Math.random() * -10;
        } else {
            // Bottom
            y[i] = canvas.height;
            yVel[i] = (Math.random() - 1) * canvas.height / 15;
            x[i] = canvas.width / 2 + (Math.random() - 0.5) * (canvas.width - 100);
            xVel[i] = (Math.random() - 0.5) * canvas.width / 25;
        }

        hue[i] = Math.random() * 255;
        size[i] = Math.random() * 5 + 8;
    }
    clearTimeout(timeOutLoop);
    updateLoop();

    $("#answer,...