JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<h3>אחד נגד <span id="howManyLeft">100</span></h3>
<div id="team"></div>
    
<script>
// create team
var team = $('team');
for(var i = 0; i < 100; i++) {
    new Element('div', {'class': 'player on', id: 'p'+i}).inject(team);
}

// initialization
var howManyLeft = 100;
turnOff([4,69,12,97,63,9,41,72,58,42,89,95,21]);
</script>

CSS

h3 {font-size: 24px; font-weight: bold; text-align: center; font-family: Arial, sans-serif; margin: 10px 0;}

.player {width: 29px; height: 29px; margin: 3px 2px; display: inline-block;}
.on {background: purple;}
.off {background: #222;}

JavaScript

// turnOff method - Should sit in script.js
function turnOff(players) {
    var first = document.getElementById('p' + players[0]);
    if (first != null) {
        first.className = 'player off';
        howManyLeft--;
        document.getElementById('howManyLeft').innerHTML = howManyLeft;
        players.shift();
        setTimeout(turnOff, Math.floor(Math.random() * 900 + 200), players);
    }
}