JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TC39 Proposals</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

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

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

    input[type=text] {
      padding: 6px 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <h1>TC39 Proposals</h1>
  <input type="text" id="searchInput" placeholder="Search for a proposal...">
  <table id="proposalsTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Stage</th>
        <th>Champion</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script src="proposals.js"></script>
</body>
</html>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

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

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

input[type=text] {
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

JavaScript

fetch('https://tc39.es/dataset/proposals.json')
  .then(response => response.json())
  .then(data => {
    const proposals = data.proposals;
    const table = document.getElementById('proposalsTable').getElementsByTagName('tbody')[0];
    const searchInput = document.getElementById('searchInput');

    function displayProposals(proposals) {
      table.innerHTML = '';
      proposals.forEach(proposal => {
        const row = table.insertRow();
        const nameCell = row.insertCell();
        const stageCell = row.insertCell();
        const championCell = row.insertCell();
        nameCell.textContent = proposal.name;
        stageCell.textContent = proposal.stage;
        championCell.textContent = proposal.champion;
      });
    }

    displayProposals(proposals);

    searchInput.addEventListener('input', event => {
      const searchTerm = event.target.value.toLowerCase();
      const filteredProposals = proposals.filter(proposal => {
        return proposal.name.toLowerCase().includes(searchTerm) ||
          proposal.stage.toLowerCase().includes(searchTerm) ||
          proposal.champion.toLowerCase().includes(searchTerm);
      });
      displayProposals(filteredProposals);
    });
  })
  .catch(error => console.error(error));