final update

index.html

@@ -210,10 +210,11 @@
             <header>
                 <input
                     type="text"
-                    placeholder="adicionar participante"
+                    placeholder="participante"
                     name="participante"
+                    id="addUser"
                 />
-                <input type="submit" value="ADD" />
+                <input type="submit" value="ADD" id="btnadd" />
             </header>
             <ul>
                 <li><a>Jubilu sem cu</a><input type="submit" value="X" /></li>
@@ -230,5 +231,74 @@
                 <a>contato deividfar33@gmail.com</a>
             </li>
         </div>
+        <script type="text/javascript">
+            $(document).ready(function () {
+                let lista = JSON.parse(localStorage.getItem("lista")) || [];
+
+                function updatelist() {
+                    $("#add ul").empty();
+                    lista.forEach((nome, index) => {
+                        $("#add ul").append(
+                            `<li>
+                                <a>${nome}</a>
+                                <input type="submit" value="X" class="remove" data-index="${index}" />
+                            </li>`,
+                        );
+                    });
+                }
+
+                function saveLocalStorage() {
+                    localStorage.setItem("lista", JSON.stringify(lista));
+                }
+
+                $("#btnadd").click(function () {
+                    let inputText = $("#addUser").val().trim();
+                    if (inputText) {
+                        lista.push(inputText);
+                        saveLocalStorage();
+                        updatelist();
+                        $("#addUser").val("");
+                    }
+                });
+
+                $("#add ul").on("click", ".remove", function () {
+                    let index = $(this).data("index");
+                    lista.splice(index, 1);
+                    saveLocalStorage();
+                    updatelist();
+                });
+
+                $("#central input").click(function () {
+                    if (lista.length < 2) {
+                        alert("Erro, falta 1 participante.");
+                        return;
+                    }
+
+                    let sorte = [];
+                    while (sorte.length < 2) {
+                        let index = Math.floor(Math.random() * lista.length);
+                        if (!sorte.includes(index)) {
+                            sorte.push(index);
+                        }
+                    }
+
+                    $("#players").html(
+                        `<div id="users">
+                            <h2 id="user1">${lista[sorte[0]]}</h2>
+                        </div>
+                        <h1>VS</h1>
+                        <div id="users">
+                            <h2 id="user2">${lista[sorte[1]]}</h2>
+                        </div>`,
+                    );
+
+                    lista = lista.filter((_, index) => !sorte.includes(index));
+                    saveLocalStorage();
+                    updatelist();
+                });
+
+                updatelist();
+            });
+        </script>
     </body>
 </html>