JSFiddle - React, Tailwind, and code Playground

by Daniel Beff

HTML

<html>
  <head>
    <style>
      td {
        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">classificação</td>
        <td class="titulo">Clubes</td>  
        <td class="titulo">pontos</td> 
        <td class="titulo">jogos</td>
      </tr>          
    </table>
  </body>

  <script>
		var clubes = ["Flamengo","Santos","Palmeiras", "Sao Paulo"];
    var pontos = ["90", "74" , "65", "55" ]; 
    var jogos  = ["38", "38" , "38", "38" ];
		var tabela = document.querySelector("#clubes");
    var qtd = clubes.length;
    
    for (var i = 0; i < qtd; i++) {
      var html = "<tr>" ;  
      html += "<td>" +  (i + 1 ) + "</td>";
      html += "<td>" + clubes[i] + "</td>";
      html += "<td>" + pontos[i] + "</td>";
      html += "<td>" + jogos[i] + "</td>";
      
      html += "</tr>"; 
      tabela.innerHTML += html;
    }
  </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