JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://www.gstatic.com/firebasejs/3.6.8/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCr_ugwfiUTMRNo4q85UxiQCe1Vw83-j2o",
    authDomain: "standupmonday.firebaseapp.com",
    databaseURL: "https://standupmonday.firebaseio.com",
    storageBucket: "standupmonday.appspot.com",
    messagingSenderId: "1079785500807"
  };
  firebase.initializeApp(config);
</script>


<h1>Welcome!</h1>

<h3>Enter team: </h3> <input type="text">

<h4>Enter your name: </h4> <input type="text">

<br><br>

<input type="submit" value="Go!">

<hr>

<div id="timerDisplay">00:00</div>

<hr>

<h3>Total: <span id="totalDisplay">0</span></h3>
<h4>Players standing:</h4>
<ul id="playerDisplay">
  
</ul>

JavaScript

const db = firebase.database().ref();

const timerDisplay = document.querySelector("#timerDisplay");
const playerDisplay = document.querySelector("#playerDisplay");
const totalDisplay = document.querySelector("#totalDisplay");

let secondsPassed;

let team = {
"name": "sogeti",
"startTime":"1486167869044"
}

let user = {
"name": "donald",
"totalTimeStanding": 1000,
"finished":100,
"currentStart":200,
"standing":true
}


//set user to online
//db.child(team.name).child("online").child(user.name).set(user);



function timer(seconds) {
  let counter = setInterval(() => {
    secondsPassed = Math.round((Date.now() - team.startTime) / 1000);
   
    displayTimePassed(secondsPassed);
    addToUser(secondsPassed);
  }, 1000);
}

function displayTimePassed(seconds) {
//const hours = Math.floor (seconds / 60 / 60);
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes < 10 ? '0' : '' }${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
  
  //document.title = display;
  timerDisplay.textContent = display;
}

function addToUser(seconds) {
	if (!user.standing) return;
  
  // Update user score ever second
 /* db.child(team.name).child("online").child(user.name).child("currentStart").transaction(function(currentVal) {
		return secondsPassed;
  })*/
}

db.child(team.name).child("online").on("value", (players) => displayPlayers(players.val()));
db.child(team.name).child("online").on("child_changed", (player) => handlePlayer(player.val()));




function displayPlayers(players) {
  let allPlayers = [];
  for (var key in players) {
  	allPlayers.push(players[key]);
  }
	let html = allPlayers.map(p => {
  	return `<li>${p.name} ${p.currentStart}p</li>`;
  }).join("");
  
  let standingPlayers = allPlayers.filter(p => {
  	return p.standing;
  });
  
  totalDisplay.textContent = standingPlayers.length;
  playerDisplay.innerHTML = html;
}

function handlePlayer(player) {
	if (player.standing) return;
  //...