script.js

function createGame(team1, hour, team2) {
    return `
    <li>
        <img src="./assets/flags/icon-${team1}.svg" alt="Bandeira do ${team1}" />
        <strong>${hour}</strong> 
        <img src="./assets/flags/icon-${team2}.svg" alt="Bandeira da ${team2}" />
    </li>`
}


function createCard(date, day, games) {
    return `
    <div class="card">
        <h2><span>${date}</span>${day}</h2>

        <ul>
            ${games}
        </ul>
    </div>`
}


document.querySelector("#app").innerHTML = `
        <header>
            <img class="logo" src="./assets/logo.svg" alt="Logo da NLW Copa">
        </header>  
            <main id="cards">
                ${createCard("20/11", "domingo", createGame("qatar", "13:00", "ecuador"))}
                ${createCard("21/11", "segunda", createGame("england", "10:00", "iran") + createGame("senegal", "13:00", "netherlands") + createGame("usa", "16:00", "wales"))}
                ${createCard("22/11", "terça", createGame("argentina", "07:00", "saudi arabia") + createGame("denmark", "10:00", "tunisia") + createGame("mexico", "13:00", "poland") + createGame("france", "16:00", "australia"))}
                ${createCard("23/11", "quarta", createGame("morocco", "07:00", "croatia") + createGame("germany", "10:00", "japan") + createGame("spain", "13:00", "costa rica") + createGame("belgium", "16:00", "canada"))}
                ${createCard("24/11", "quinta", createGame("switzerland", "07:00", "cameroon") + createGame("uruguay", "10:00", "south korea") + createGame("portugal", "13:00", "ghana") + createGame("brazil", "16:00", "serbia"))}
                ${createCard("25/11", "sexta", createGame("wales", "07:00", "iran") + createGame("qatar", "10:00", "senegal") + createGame("netherlands", "13:00", "ecuador") + createGame("england", "16:00", "usa"))}
                ${createCard("26/11", "sábado", createGame("tunisia", "07:00", "australia") + createGame("poland", "10:00", "saudi arabia") + createGame("france", "13:00", "denmark") + createGame("argentina", "16:00", "mexico"))}
                ${createCard("27/11", "domingo", createGame("japan", "07:00", "costa rica") + createGame("belgium", "10:00", "morocco") + createGame("croatia", "13:00", "canada") + createGame("spain", "16:00", "germany"))}
                ${createCard("28/11", "segunda", createGame("cameroon", "07:00", "serbia") + createGame("south korea", "10:00", "ghana") + createGame("brazil", "13:00", "switzerland") + createGame("portugal", "16:00", "uruguay"))}
                ${createCard("29/11", "terça", createGame("ecuador", "12:00", "senegal") + createGame("netherlands", "12:00", "qatar") + createGame("iran", "16:00", "usa") + createGame("england", "16:00", "wales"))}
                ${createCard("30/11", "quarta", createGame("tunisia", "12:00", "france") + createGame("australia", "12:00", "denmark") + createGame("saudi arabia", "16:00", "mexico") + createGame("poland", "16:00", "argentina"))}
                ${createCard("01/12", "quinta", createGame("croatia", "12:00", "belgium") + createGame("morocco", "12:00", "canada") + createGame("costa rica", "16:00", "germany") + createGame("japan", "16:00", "spain"))}
                ${createCard("02/12", "sexta", createGame("south korea", "12:00", "portugal") + createGame("ghana", "12:00", "uruguay") + createGame("serbia", "16:00", "switzerland") + createGame("cameroon", "16:00", "brazil"))}
        </main>`