feat: allow n Teams

index.html

@@ -20,6 +20,14 @@
                 <input class="radioButtons" type="radio" name="teams" id="threeTeams">
                 Three teams
             </label>
+
+            <label class="radioButtons" for="nTeams">
+                <input class="radioButtons" type="radio" name="teams" id="nTeams">
+                n Teams
+                
+            </label>
+            <input  id="nTeamsTextField" style="display: none;" type="number" value=4>
+
             <br>
             <h1>Enter player names (each row represents one player)</h1>
             <textarea rows="18" cols="30" name="playerNames" required="required" id="playerNames"></textarea>

script.js

@@ -2,9 +2,12 @@
 
 function randomizeTeams() {
     let teamCount = 2;
-    if(document.getElementById("threeTeams").checked == true){
+    if(document.getElementById("threeTeams").checked){
         teamCount = 3;
     }
+    if(document.getElementById("nTeams").checked){
+        teamCount = document.getElementById("nTeamsTextField").value;
+    }
     const outputField = document.getElementById("teamOutput");
     let textinput = document.getElementById("playerNames").value;
     let names = textinput.split('\n').map(function(str){return str.trim();});
@@ -43,4 +46,16 @@ function* iter(list){
         yield list[index % list.length];
         index++;
     }
-}
+}
+
+function textchangelistener(){
+    let elem = document.getElementById("nTeamsTextField");
+    if(this.checked && this.id ==  "nTeams"){
+        elem.style.display = "block";
+    }
+    else {
+        elem.style.display = "none";
+    }
+}
+buttons = document.querySelectorAll("input[type='radio']");
+buttons.forEach((x) => x.addEventListener("change", textchangelistener));

style.css

@@ -13,7 +13,7 @@ h1{
     text-align: center;
     font-size: 2vh;
 }
-.radioButtons{
+.radioButtons, #nTeamsTextField{
     height:2vh;
     font-size: 2vh;
     line-height: 2vh;