team sorter

gistfile1.txt

const body = document.querySelector('body')
const bodyStyles = 'height: 100vh; display:flex; justify-content:center; font-size:40px; align-items:center'
const teamAStyles = 'color:indianred; width:200px; list-style:none'
const teamBStyles = 'color:royalblue; width:200px; list-style:none'
body.innerHTML = `
<div style="${bodyStyles}">
  <ul style="${teamAStyles}">loading</ul>
  <ul style="${teamBStyles}">loading</ul>
</div>`

const names = ['😀 Flo', '😙 Nico', '🤣 B.Lucet', '🙃 B.Vidal', '🤗 Claire', '😏 Ludo', '🤠 Caro', '😅 Léo']
const team1 = []
let n
let INTERVAL = null
INTERVAL = setInterval(function () {
  if (team1.length < names.length) {
    n = Math.floor(Math.random() * names.length)
    team1.push(names[n])
    names.splice(n, 1)
    body.innerHTML = `
      <div style="${bodyStyles}">
        <ul style="${teamAStyles}"><li>${team1.join('</li><li>')}</li></ul>
        <ul style="${teamBStyles}">loading</ul>
      </div>
      `
  } else {
    clearInterval(INTERVAL)
    body.innerHTML = `
      <div style="${bodyStyles}">
        <ul style="${teamAStyles}"><li>${team1.join('</li><li>')}</li></ul>
        <ul style="${teamBStyles}"><li>${names.join('</li><li>')}</li></ul>
      </div>
      `
  }
}, 5000)