Faddah's Playing Card solution from Wes Bos' DOM-Cardio.js

DOM-Cardio-partial.js

// create a function called generatePlayerCard that takes in three arguments: name, age, and height

const generatePlayerCard = (name, age, height) => `
  <div class="player-card">
    <h2>${name} — ${age}</h2>
    <p>Their height is ${height} and they are ${age} years old. In Dog years this person would be ${
  age * 7
}. That would be a tall dog!</p>
    <button onClick={this.closest('.player-card').remove()} class="card-delete-button" type="button">&times; Delete</button>
    <style>
      .card-delete-button {
        background-color: dodgerblue;
        border-radius: 10px;
        box-shadow: 1px 1px 3px grey;
        color: cornsilk;
        font-weight: 700;
        text-align: center;
      }
    </style>
  </div>
`;

// make a new div with a class of cards
const faddahCardsDiv = document.createElement('div');
faddahCardsDiv.classList.add('player-cards');
// make 4 player cards using generatePlayerCard
const faddahPlayer = document.createRange().createContextualFragment(generatePlayerCard(`Faddah`, 60, `5'5"`));
const belindaPlayer = document.createRange().createContextualFragment(generatePlayerCard(`Belinda`, 42, `5'2"`));
const philipPlayer = document.createRange().createContextualFragment(generatePlayerCard(`Philip`, 70, `6'1"`));
const tannerPlayer = document.createRange().createContextualFragment(generatePlayerCard(`Tanner`, 59, `6'`));

// append those cards to the div
faddahCardsDiv.appendChild(faddahPlayer);
faddahCardsDiv.appendChild(belindaPlayer);
faddahCardsDiv.appendChild(philipPlayer);
faddahCardsDiv.appendChild(tannerPlayer);
console.log(faddahCardsDiv);

// put the div into the DOM just before the wrapper element
faddahWrapper.insertAdjacentElement('beforebegin', faddahCardsDiv);