JSFiddle - React, Tailwind, and code Playground

by Daniel Beff

HTML

<html>
  <head>
    <style>
      td {
        border-collapse: collapse;
        border: 1px solid black;
        padding: 10px;
      }
      .tabela{
        border:1px solid black; 
        border-collapse: collapse;
      }
      .titulo{
        font-weight: bold;
        color: red;
      }
    </style>
  </head>

  <body>
    <table class="tabela" id="clubes">
      <tr>
        <td class="titulo">Clubes</td>
      </tr>          
    </table>
  </body>

  <script>
		var clubes = ["Flamengo","Santos"];
		var tabela = document.querySelector("#clubes");
    var qtd = clubes.length;
    
    for (var i = 0; i < qtd; i++) {
      tabela.innerHTML += "<tr>";
      tabela.innerHTML += "<td>" + clubes[i] + "</td>";
      tabela.innerHTML += "</tr>";
    }
  </script>
</html>

JavaScript

//Passo a passo

// entrada - manipulação - saida - entrada ...

// entrada 1 - Guardar times
// entrada 2 - Guardar os resultados

// manipulacao 1 -> se ganhou ou perdeu
// manipulacao 2 -> se ganhou é verde
// manipulacao 3 -> se perdeu é vermelho

// saida 1 - tabela de times
// saida 2 - classificados
// saida 3 - brasoes
// saida 4 - resultados dos ultimos 5 jogos