JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<div id="box">
    <div id="rouge" class="fabirk" value="0"></div>
    <div id="vert" class="fabirk" value="1"></div>
</div>
<div id="compteur"></div>
<div id="poteau"></div>
<input type="button" id="bouton" value="je veux passer !!!" onclick="temps(5)" />

CSS

#box {
    border: 3px solid black;
    width:61px;
    margin-left:64px;
}
#compteur{
    position:absolute;
    left:136px;
    width:60px;
    height:30px;
    top:97px;
    border:3px solid black;
    background-color:#CECECE;
    text-align:center;
    font-size:1.5em;
}

.fabirk {
    width:50px;
    height:50px;
    border: 1px solid black;
    border-radius : 50%;
    margin : 5px;
}
#poteau {
    width:20px;
    height:150px;
    border:3px solid black;
    margin-left:21px;
    background-color:black;
    margin-left:85px;
}
#box, #poteau{
    
}
#rouge{
    background-color:red;
}
/*#vert {
    background-color:#7fdd4c;
}*/
input{
    font-size : 1.5em;
}
input[type=button]{
    width:200px;
}

JavaScript

var regex = /^.+\(([0-9]+)\).*$/;
var xnb = document.getElementById("bouton");
var nb = regex.exec(xnb.getAttribute("onclick"));
nb = nb[1];
var intervalId = null;

function traiter() {
    var rouge = document.getElementById("rouge");
    var vert = document.getElementById("vert");

    if (rouge.getAttribute("value") === "0") {
        rouge.style.backgroundColor = "#FFFFFF";
        vert.style.backgroundColor = "#7FDD4C";
        rouge.setAttribute("value", "1");
        vert.setAttribute("value", "0");
        decompte();
        document.getElementById("bouton").disabled = true;
    } else {
        rouge.style.backgroundColor = "red";
        vert.style.backgroundColor = "#FFFFFF";
        rouge.setAttribute("value", "0");
        vert.setAttribute("value", "1");
        document.getElementById("bouton").value = "je veux passer !!! ";
        document.getElementById("bouton").disabled = false;
    }
}

function temps() {
    traiter();
    var x = setTimeout("traiter()", nb * 1000);
}

function decompte() {
    var texte = document.getElementById("compteur");
    var x = document.getElementById("bouton");
    x.value = "";
    texte.innerHTML = nb;
    var e= document.getElementById("compteur");
    e.style.backgroundColor = "#7FDD4C";
    e.style.color = "yellow";
    
    var cpt = nb;
    var t = setInterval(function () {
        --cpt;
        if (cpt > 0) {
            x.value = "";
            texte.innerHTML = cpt;
        } else {
            clearInterval(t);
            x.value = "je veux passer !!!";
            texte.innerHTML = "";
            e.style.backgroundColor = "#CECECE";
        }
    }, 1000);
}