JSFiddle - React, Tailwind, and code Playground

by peka

HTML

<div style="display:block">
    <div id ="red" style="float:left;"></div>
    <div id ="blue"style="float:left;"onclick="click(2)"></div>
</div>
<div style="display:block">
    <div id ="yellow"style="float:left;"onclick="click(3)"></div>
    <div id ="green"style="float:left;"onclick="click(4)"></div>
</div>
<button id="start" onclick="start()">Start</button>
<button disabled="disabled" id="reset" onclick="stop()">Reset</button>

CSS

body{
    background-color:gray
}
div { overflow: hidden; }

canvas
{
    background-color:black
}
#red
{
    width:100px;
    height:100px;
    background-color:red;
}
#blue
{
    width:100px;
    height:100px;
    background-color:blue;
    margin-left:10px;
}
#green
{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:10px;
    margin-left:10px;
}
#yellow
{
    width:100px;
    height:100px;
    background-color:yellow;
    margin-top:10px;
}
#red:hover
{
    -webkit-filter: opacity(0.5)
}
#blue:hover
{
    -webkit-filter: opacity(0.5)
}
#yellow:hover
{
    -webkit-filter: opacity(0.5)
}
#green:hover
{
    -webkit-filter: opacity(0.5)
}

JavaScript

//13-Sept: Empecé a las 23:27 
var clock;
var colores = [];
var running = false;
var score = 0;
var esperando = false;
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var green = document.getElementById('green');
var yellow = document.getElementById('yellow');
colores[0] = red;
colores[1] = blue;
colores[2] = green;
colores[3] = yellow;
var t = 0;
for(var i = 0; i < colores.length; i++)
{
    alert(t);
    colores[i].onclick = function(){click(t);};
    t++;
}
alert(colores);
function update()
{}
function click(a)
{
    alert("click numero "+ a);
}
function start()
{
	running = true;
	document.getElementById('reset').disabled = false;
	document.getElementById('start').disabled = true;
	//esto ejecuta update() cada 0.1 segundos.
	clock = setInterval(function()
	{
		update();
	}, 100);
}

//stop(): hace lo contrario que start() :v
function stop()
{
	running = false;
	clearInterval(clock);
	document.getElementById('reset').disabled = true;
	document.getElementById('start').disabled = false;
}

function reset()
{
}