In the lineup generator project I wanted to refactor the repetitive code below. The only thing that was different was one cell in a table row.

  <tbody>        
                <tr><td>QB</td><td>${testLineup[0].name}</td><td>${testLineup[0].team.trim()}</td><td class="centered">${testLineup[0].proj}</td><td class="centered">$${testLineup[0].salary.toLocaleString()}</td></tr>
                <tr><td>RB1</td><td>${testLineup[1].name}</td><td>${testLineup[1].team.trim()}</td><td class="centered">${testLineup[1].proj}</td><td class="centered">$${testLineup[1].salary.toLocaleString()}</td></tr>
                <tr><td>RB2</td><td>${testLineup[2].name}</td><td>${testLineup[2].team.trim()}</td><td class="centered">${testLineup[2].proj}</td><td class="centered">$${testLineup[2].salary.toLocaleString()}</td></tr>
                <tr><td>WR1</td><td>${testLineup[3].name}</td><td>${testLineup[3].team.trim()}</td><td class="centered">${testLineup[3].proj}</td><td class="centered">$${testLineup[3].salary.toLocaleString()}</td></tr>
                <tr><td>WR2</td><td>${testLineup[4].name}</td><td>${testLineup[4].team.trim()}</td><td class="centered">${testLineup[4].proj}</td><td class="centered">$${testLineup[4].salary.toLocaleString()}</td></tr>
                <tr><td>WR3</td><td>${testLineup[5].name}</td><td>${testLineup[5].team.trim()}</td><td class="centered">${testLineup[5].proj}</td><td class="centered">$${testLineup[5].salary.toLocaleString()}</td></tr>
                <tr><td>TE</td><td>${testLineup[6].name}</td><td>${testLineup[6].team.trim()}</td><td class="centered">${testLineup[6].proj}</td><td class="centered">$${testLineup[6].salary.toLocaleString()}</td></tr>
                <tr><td>FLEX</td><td>${testLineup[7].name}</td><td>${testLineup[7].team.trim()}</td><td class="centered">${testLineup[7].proj}</td><td class="centered">$${testLineup[7].salary.toLocaleString()}</td></tr>
                <tr><td>DST</td><td>${testLineup[8].name}</td><td>${testLineup[8].team.trim()}</td><td class="centered">${testLineup[8].proj}</td><td class="centered">$${testLineup[8].salary.toLocaleString()}</td></tr>
            </tbody>

My initial thoughts were to create a function that would declare a new variable that was an array for all of the positions and then map over that array to return the correct code for the table row. You can do that or just create use a map functions write in the template literal.

// above the let ourHTML = `` template literal
let positions = ["QB", "RB1", "RB2", "WR1", "WR2", "WR3", "TE", "FLEX", "DST"]


// inside of the <table> element just under <thead>

<tbody>
            ${positions
              .map((pos, i) => {
                return `
                <tr>
                  <td>${pos}</td>
                  <td>${testLineup[i].name}</td>
                  <td>${testLineup[i].team.trim()}</td>
                  <td class="centered">${testLineup[i].proj}</td>
                  <td class="centered">$${testLineup[i].salary.toLocaleString()}</td>
                </tr>
              `
              })
              .join("")}
            </tbody>

So much cleaner