outputs switch

app.js

@@ -5,6 +5,15 @@ const TESTS_LIST = ['Charles', 'Baruch','Frédéric', 'John', 'Dan',
 
 const NOBODY = '***NOBODY';
 
+let viewRounds;
+let viewParticipants;
+
+function outputChanged(val){
+  document.getElementById('rounds').innerHTML=''
+  let v = val == 0 ? viewParticipants : viewRounds;
+  document.getElementById('rounds').appendChild(v)
+}
+
 function groupSizeChanged(val){
   let nbParticipants = document.getElementsByClassName('participant').length;
   let meetsPerRound = val - 1;
@@ -157,8 +166,11 @@ function doIt(){
   })
 
   document.getElementById('rounds').innerHTML=''
-  let view = renderRounds(rounds)
-  document.getElementById('rounds').appendChild(view)
+  viewParticipants = rendeParticipantTables(participants, rounds)
+  document.getElementById('rounds').appendChild(viewParticipants)
+  viewRounds = renderRounds(rounds)
+  document.getElementById('participants-radio').disabled = false;
+  document.getElementById('rounds-radio').disabled = false;
 }
 
 function renderRounds(rounds){
@@ -200,3 +212,40 @@ function renderRounds(rounds){
   })
   return roundsBlock
 }
+
+function rendeParticipantTables(participants, rounds){
+    let participantBlocks = document.createElement('div')
+    participantBlocks.classList.add('participant-blocks')
+    participants.forEach(function (p) {
+      let participantBlock = document.createElement('div')
+      participantBlocks.appendChild(participantBlock)
+      let participantName= document.createElement('h2')
+      participantName.appendChild(document.createTextNode(p))
+      let placesBlock = document.createElement('ul')
+      participantBlock.append(participantName)
+      participantBlock.classList.add('participant-block')
+      participantBlock.append(placesBlock)
+      let roundNum = 1
+      rounds.forEach(function (round) {
+          let groupNum = 1
+          let roundBlock = document.createElement('li')
+          placesBlock.append(roundBlock)
+          round.forEach(function (group) {
+            group.forEach(function (p2) {
+                if(p2 === p){
+                      let roundNumSpan = document.createElement('span')
+                      roundNumSpan.classList.add('round-num')
+                      roundBlock.appendChild(roundNumSpan)
+                      roundNumSpan.appendChild(document.createTextNode("Round " + roundNum +" : "))
+                      roundBlock.appendChild(document.createTextNode("Table " + groupNum))
+                }
+            })
+            groupNum ++
+          })
+          roundNum ++
+      })
+
+    })
+
+    return participantBlocks
+}

css/app.css

@@ -13,11 +13,11 @@ html, body{
 #rounds, #participants{
   padding:10px;
 }
-.round{
+.round, .participant-blocks{
   display:flex;
   flex-wrap: wrap;
 }
-.group{
+.group, .participant-block{
   margin:5px;
   border: 1px solid #aaa;
   border-radius:3px;
@@ -25,6 +25,16 @@ html, body{
   width: 15%;
 
 }
+
+
+#btn-do-it{
+    margin-right:50px;
+}
+
+.round-num{
+  font-weight: bold;
+}
+
 h4{
   margin:5px;
 }

index.html

@@ -23,6 +23,10 @@
           <img src="images/play.svg"/>
         </button>
         <input id="filechooser" type="file" onchange="loadParticipantsFromFile(this.files[0])"/>
+
+        <input type="radio" name="display-mode" onchange="outputChanged(0)" id="participants-radio" checked disabled/>Participants output
+        <input type="radio" name="display-mode" onchange="outputChanged(1)" id="rounds-radio" disabled/>Rounds output
+
       </div>
       <div id="settings">
         <div>