add table

index.js

@@ -76,29 +76,38 @@
         let stateContainer = document.getElementById('state-container');
         stateContainer.innerHTML = '';
         stateVotes.forEach((row) => {
-             const card = document.createElement('div');
-
-             const stateInfo = document.createElement('div');
-             stateInfo.innerHTML = `
-                 <h2>${row.state} (Votes Left: ${row.expected - row.current})</h2>
-             `;
-             card.appendChild(stateInfo);
-
-             const candidateInfo = document.createElement('div');
-             candidateInfo.innerHTML = '<h3>Candidates:</h3>';
-             const candidatesList = document.createElement('ul');
-
-             row.candidates.sort((a, b) => b.votes - a.votes).forEach(candidate => {
-                 const listItem = document.createElement('li');
-                 listItem.innerHTML = `
-                     <span>${candidate.name[0]}</span> (${candidate.name[1]}) - ${candidate.votes} votes
-                 `;
-                 candidatesList.appendChild(listItem);
+          const table = document.createElement('table');
+          const thead = document.createElement('thead');
+          const headerRow = document.createElement('tr');
+          const headers = [`${row.state}`, 'Party', `Votes Left: ${row.expected - row.current}`];
+          headers.forEach(header => {
+            const th = document.createElement('th');
+            th.textContent = header;
+            headerRow.appendChild(th);
           });
+          thead.appendChild(headerRow);
+          table.appendChild(thead);
 
-             candidateInfo.appendChild(candidatesList);
-             card.appendChild(candidateInfo);
-             stateContainer.appendChild(card);
+          const tbody = document.createElement('tbody');
+          row.candidates.sort((a, b) => b.votes - a.votes).forEach((candidate, index) => {
+            const rowElement = document.createElement('tr');
+
+            const nameCell = document.createElement('td');
+            nameCell.textContent = candidate.name[0];
+            rowElement.appendChild(nameCell);
+
+            const partyCell = document.createElement('td');
+            partyCell.textContent = candidate.name[1];
+            rowElement.appendChild(partyCell);
+
+            const votesCell = document.createElement('td');
+            votesCell.textContent = candidate.votes;
+            rowElement.appendChild(votesCell);
+
+            tbody.appendChild(rowElement);
+          });
+          table.appendChild(tbody);
+          stateContainer.appendChild(table);
         });
       }
     }