Team Roster
Store player objects in an array and render cards.
Add a player
Name
Points
Current roster
Important HTML
JavaScript reads the form fields and appends player cards into the empty roster container.
<input id="player-name" type="text" name="player-name" placeholder="Player name">
<input id="player-points" type="number" name="player-points" min="0" value="12">
<button id="add-player" type="button">Add player</button>
<p id="roster-summary">No players on the roster yet.</p>
<div id="roster-list"></div>Important JavaScript
Turn each player object into a card, then append it to the roster.
const card = document.createElement("article");
const heading = document.createElement("h3");
heading.textContent = player.name;
card.appendChild(heading);
rosterList.appendChild(card);