A Pen by Diego Loiola on CodePen.
Created
April 6, 2021 19:24
-
-
Save diegoamloiola/f6765822adbff95e6ff5096cb314ba09 to your computer and use it in GitHub Desktop.
Tabela de classificação
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> | |
| Imersão Dev - Aula 06 | |
| </title> | |
| </head> | |
| <body> | |
| <h1>Campeonato Gols da Zueira</h1> | |
| <h2><font color=SlateBlue>Junte os amigos e que comece a zueira HUE :V</font></h2> | |
| <div class="form-wrapper"> | |
| <input type="text" id="jogadores" name="jogador" placeholder="Digite o nome dos jogadores"> | |
| <button onClick="adicionarJogador()">Adicionar</button> | |
| </div> | |
| <table style="width:100%"> | |
| <thead> | |
| <tr> | |
| <th>Nome</th> | |
| <th>Vitórias</th> | |
| <th>Empates</th> | |
| <th>Derrotas</th> | |
| <th>Pontos</th> | |
| <th>Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tabelaJogadores"> | |
| <!-- <tr> | |
| <td>Paulo</td> | |
| <td>2</td> | |
| <td>1</td> | |
| <td>1</td> | |
| <td>7</td> | |
| <td><button onClick="adicionarVitoria()">Vitória</button></td> | |
| <td><button onClick="adicionarEmpate()">Empate</button></td> | |
| <td><button onClick="adicionarDerrota()">Derrota</button></td> | |
| </tr> | |
| <tr> | |
| <td>Rafa</td> | |
| <td>1</td> | |
| <td>4</td> | |
| <td>2</td> | |
| <td>7</td> | |
| <td><button onClick="adicionarVitoria()">Vitória</button></td> | |
| <td><button onClick="adicionarEmpate()">Empate</button></td> | |
| <td><button onClick="adicionarDerrota()">Derrota</button></td> | |
| </tr> --> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var jogadores = [] | |
| var campoNomeDoJogador = document.querySelector("#jogadores") | |
| function adicionarJogador(){ | |
| var nomeDoJogador = campoNomeDoJogador.value | |
| if(nomeDoJogador==""){ | |
| alert("Digite um nome!") | |
| } else { const flag = pesquisaJogador(jogadores, nomeDoJogador); | |
| if (flag) { | |
| jogadores.push({ nome: nomeDoJogador, vitorias: 0, empates: 0, derrotas: 0, pontos: 0 }) | |
| exibirJogadoresNaTela(jogadores) | |
| campoNomeDoJogador.value = "" | |
| }else{ | |
| alert('Jogador já cadastrado') | |
| } | |
| } | |
| } | |
| function calculaPontos(jogador){ | |
| var pontos = (jogador.vitorias*3)+(jogador.empates*1)+(jogador.derrotas)*(-1) | |
| return pontos} | |
| function exibirJogadoresNaTela(jogadores){ | |
| var html = "" | |
| for(var i=0; i<jogadores.length; i++){ | |
| html += "<tr><td>"+jogadores[i].nome+"</td>" | |
| html += "<td>"+jogadores[i].vitorias+"</td>" | |
| html += "<td>"+jogadores[i].empates+"</td>" | |
| html += "<td>"+jogadores[i].derrotas+"</td>" | |
| html += "<td>"+jogadores[i].pontos+"</td>" | |
| html += "<td><button onClick='adicionarVitoria("+i+")'>Vitória</button></td>" | |
| html+= "<td><button onClick='adicionarEmpate("+i+")'>Empate</button></td>" | |
| html+= "<td><button onClick='adicionarDerrota("+i+")'>Derrota</button></td></tr>" | |
| } | |
| var tabelaJogadores = document.getElementById('tabelaJogadores') | |
| tabelaJogadores.innerHTML = html | |
| } | |
| function adicionarVitoria(i){ | |
| var jogador=jogadores[i] | |
| jogador.vitorias++ | |
| jogador.pontos = calculaPontos(jogador) | |
| exibirJogadoresNaTela(jogadores) | |
| } | |
| function adicionarEmpate(i){ | |
| for(var j=0; j<jogadores.length;j++){ | |
| jogadores[j].empates++ | |
| jogadores[j].pontos = calculaPontos(jogadores[j]) | |
| exibirJogadoresNaTela(jogadores) | |
| } | |
| } | |
| function adicionarDerrota(i){ | |
| var jogador=jogadores[i] | |
| jogador.derrotas++ | |
| exibirJogadoresNaTela(jogadores) | |
| } | |
| function pesquisaJogador(jogadores, nomeDoJogador) { | |
| for(let i = 0; i < jogadores.length; i++){ | |
| if (jogadores[i]['nome'] == nomeDoJogador) { | |
| return 0; | |
| } | |
| } | |
| return 1 | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| text-align: center; | |
| } | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| min-height: 400px; | |
| background-image: url('https://static-wp-tor15-prd.torcedores.com/wp-content/uploads/2014/04/Gols-da-Zuera.png'); | |
| background-color: #111; | |
| background-size: 100%; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| height: 100vh; | |
| } | |
| .page-title { | |
| color: #ffffff; | |
| margin: 0 0 5px; | |
| } | |
| .page-subtitle { | |
| color: #ffffff; | |
| margin-top: 5px; | |
| } | |
| .page-logo { | |
| width: 200px; | |
| } | |
| .alura-logo { | |
| width: 40px; | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| } | |
| table { | |
| border: 2px solid SlateBlue; | |
| border-collapse: collapse; | |
| } | |
| h1 { | |
| color: AliceBlue; | |
| } | |
| th, tr, td { | |
| border: solid 2.5px SlateBlue; | |
| color: white; | |
| } | |
| .form-wrapper { | |
| margin: 0 0 15px; | |
| font-family: "New Tegomin"; | |
| } | |
| .form-wrapper input { | |
| margin: 0 auto; | |
| padding: 15px 15px; | |
| } | |
| .form-wrapper button { | |
| border: 0; | |
| color: #ffffff; | |
| background: #696969; | |
| font-weight: bold; | |
| padding: 15px 15px; | |
| font-size: 16px; | |
| borde-radius: 4px; | |
| margin-top: 20px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .form-wrapper button:hover { | |
| opacity: 0.8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment