JSFiddle - React, Tailwind, and code Playground

by Kaique Covo

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <title>Teste GRT</title>
</head>
<body>
    <div class="tabela">
        <h1>Tabela</h1>
        <span>Produto:</span>
        <input type="text" id="input_product">
        <span>Descrição:</span>
        <input type="text" id="input_desc">
        <span>Url:</span>
        <input type="text" id="input_url">

        <button onclick="adicionarProduto()">Adicionar</button>
        <table class="table table-dark tabelaUsuarios">
            <thead>
                <tr>
                    <th>Título</th>
                    <th>Produtos</th>
                    <th>Url</th>
                </tr>
            </thead>
            <tbody id="nossosUsuarios">
            </tbody>
        </table>
    </div>
    <script src="javascript/script.js"></script>
</body>
</html>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

JavaScript

//Váriavel onde ira ficar armazenado nossos usuários contendo nome e idade
var arrayUsuarios = []

/**
 * Função de adicionar produto
 */
function adicionarProduto() {
  const inputProduct = document.getElementById('input_product').value;
  const inputDescription = document.getElementById('input_desc').value;
  const inputUrl = document.getElementById('input_url').value


    consultProducts({
      nome: inputProduct,
      idade: inputDescription,
      url: inputUrl
    })
}

/**
 * Função para acrescentarmos os Produtos
 */
function consultProducts(products) {
  var tbody = document.getElementById('nossosUsuarios') //Pegando nossa tbody do html
  var tr = document.createElement('tr'); //Criando uma tag TR
  
  //VAR PROP => ela pega a propriedade do nosso objeto que seria o product, description e url
  for (var prop in products) {
    /**
     * A GENTE CRIA UM TAG TD
     */
    var td = document.createElement('td');
    /**
     * NA TAG TD ELE SETA O VALOR DA NOSSA PROP objetoUsuario[prop]
     */
    td.appendChild(document.createTextNode(products[prop]));
    /**
     * SETA NOSSA TAG TD DENTRO DE TR
     */
    tr.appendChild(td);
  }
  
  
  //Adicionando nosso usuário no array
  arrayUsuarios.push(products)
  
  
  /**
   * CRIO NOSSO BOTÃO DE REMOVER
  */
  const indexUsuario = arrayUsuarios.length - 1
  createButtonRemove( tr, indexUsuario )
  /**
   * ELE ADICIONA A LINHA DE NOME E IDADE
   */
  tbody.appendChild(tr);
}
/**
 * CRIA NOSSO BOTÃO DE REMOVER
 */
function createButtonRemove(tr, indexUsuario) {
  var buttonRemove = document.createElement('button') //Criamos nosso botão
  buttonRemove.innerHTML = 'Remover' //Adicionamos o texto dele
  buttonRemove.className = 'botaoRemover' //Adicionamos uma classe ao botão
  buttonRemove.addEventListener('click', function() {
    var remover = confirm("Você deseja remover usuário"); //Conrfirm do javascript
    //SE VC CRIAR NO CONFIRM ELE DA TRUE E ENTRA DENTRO DA FUNÇÃO
    if (remover) {
      var...