Learn Modern JavaScript Methods by Building Football Team Cards - Step 41

JavaScript
1

Tell us what’s happening:

I still don’t understand the use of embedding HTML into javascript code . I understand the use of template literals to insert html but still not understand why is there a need to embed html.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const setPlayerCards = (arr = players) => {
  playerCards.innerHTML += arr
    .map(
      ({ name, position, number, isCaptain, nickname }) =>
        `
        <div class="player-card">
          <h2>${isCaptain ? "(Captain)" : ""} ${name}</h2>
          <p>Position: ${position}</p>
          <p>Number: ${number}</p>
          <p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
        </div>
      `
    )
    .join("");
};

playersDropdownList.addEventListener("change", (e) => {
  playerCards.innerHTML = "";
  switch (e.target.value) {
    case "nickname":


  }


// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn Modern JavaScript Methods by Building Football Team Cards - Step 41

2

you are building the html dinamically so that whatever change to the data, it can be updated

3

Thank you for replying, unfortunately that doesn’t solve my concern .
I want you to explain the use of this “<div class="player-card">”, “h2” tags in js code.

4

it’s a div, it’s used to contain the other things

you are not using the tags in JS, you are creating a string with the tags, and the string will be used to set the html

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.