diff --git a/index.js b/index.js index 37a83a5..ad3448c 100644 --- a/index.js +++ b/index.js @@ -73,32 +73,41 @@ } if (stateVotes.length > 0) { - let stateContainer = document.getElementById('state-container'); - stateContainer.innerHTML = ''; - stateVotes.forEach((row) => { - const card = document.createElement('div'); + let stateContainer = document.getElementById('state-container'); + stateContainer.innerHTML = ''; + stateVotes.forEach((row) => { + 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); - const stateInfo = document.createElement('div'); - stateInfo.innerHTML = ` -

${row.state} (Votes Left: ${row.expected - row.current})

- `; - card.appendChild(stateInfo); + const tbody = document.createElement('tbody'); + row.candidates.sort((a, b) => b.votes - a.votes).forEach((candidate, index) => { + const rowElement = document.createElement('tr'); - const candidateInfo = document.createElement('div'); - candidateInfo.innerHTML = '

Candidates:

'; - const candidatesList = document.createElement('ul'); + const nameCell = document.createElement('td'); + nameCell.textContent = candidate.name[0]; + rowElement.appendChild(nameCell); - row.candidates.sort((a, b) => b.votes - a.votes).forEach(candidate => { - const listItem = document.createElement('li'); - listItem.innerHTML = ` - ${candidate.name[0]} (${candidate.name[1]}) - ${candidate.votes} votes - `; - candidatesList.appendChild(listItem); - }); + const partyCell = document.createElement('td'); + partyCell.textContent = candidate.name[1]; + rowElement.appendChild(partyCell); - candidateInfo.appendChild(candidatesList); - card.appendChild(candidateInfo); - stateContainer.appendChild(card); + const votesCell = document.createElement('td'); + votesCell.textContent = candidate.votes; + rowElement.appendChild(votesCell); + + tbody.appendChild(rowElement); + }); + table.appendChild(tbody); + stateContainer.appendChild(table); }); } }