JSFiddle - React, Tailwind, and code Playground

by Stefano

HTML

<h1>WatzThis?</h1>

    <div id="directions">
        <ol>
            <li>Use the top row of buttons to turn the flashlight on or off, or to make the light red.</li>
            <li>Use the 2nd row of buttons to turn on and off your automatic flashing color light dance party.</li>
        </ol>
    </div>
    <div id="container">
        <div id="flashlight">
            <input type="button" id="OFF" class="bigButton" value="OFF" onclick="flip(0);">
            <input type="button" id="ON" class="bigButton" value="ON" onclick="flip(1);">
            <input type="button" id="RED" class="bigButton" value="RED" onclick="flip(2);">
        </div>
        <div id="danceparty">
            <input type="button" id="AUTO" class="bigButton" value="AUTO" onclick="doAutoFlip(100);">
            <input type="button" id="STOP" class="bigButton" value="STOP" onclick="stopFlip();">
        </div>
    </div>

CSS

body {
    font-family: helvetica, arial, sans-serif;
    padding:1em;
    text-align:center;
}
p {
    font-size: 1em;
}
h1 {
    font-size: 2em;
    background: #A3E0FF;
    box-shadow: 5px 5px 3px #5CB8E6;
    text-shadow: 0.1em 0.1em 0.2em #52A3CC;
}
h2 {
    font-size: 1.5em;
    text-shadow: 0.1em 0.1em 0.2em #5CB8E6;
}
figcaption {
    font-size: 0.85em;
}
footer {
    font-size: 0.6em;
    font-style: italic;
    margin: 2.5em auto;
    text-align: center;
    background: #D1F0FF;
    box-shadow: 0.2em 0.2em 0.2em #5CB8E6;
}
#container {
}
#directions, #flashlight, #danceparty {
    margin:4px;
}
ol {
    display: inline-block;
    margin: auto;
    text-align: left;
}
.bigButton {
    font-size: 1.5em;
}
img {
    border: thin solid #A3E0FF;
    box-shadow: 3px 3px 3px #5CB8E6;
    background: #D1F0FF;
}
img:hover {
    border: thick solid #A3E0FF;
}
#bigbox {
    width: 250px;
    height: 250px;
    border: 10px;
    border-style: solid;
    border-color: purple;
}

JavaScript

var light = new Array();
    light[0] = "black";
    light[1] = "white";
    light[2] = "red";
    light[3] = "blue";
    light[4] = "green";
    light[5] = "orange";
var t;
var color = 0;
var flipping = 0;
var speed = 1000;



function flip(whichway) {
    document.body.style.backgroundColor = light[whichway];
    stopFlip();
}

function stopFlip() {
    clearTimeout(t);
    flipping = 0;
}

function doAutoFlip(changespeed) {
    if (!flipping) {
        flipping = 1;
        speed = changespeed;
        autoFlip();
    }
}

function autoFlip() {
    document.body.style.backgroundColor = light[color];
    if (color < light.length - 1) {
        color++;
    } else {
        color = 0;
    }
    t = setTimeout("autoFlip(speed)", speed);
}