const hero = {
    elementId: "hero",
    name: "Wizard",
    emoji: "🧙",
    health: 60,
    diceScores: [4,5,6]
};

const monster = {
    elementId: "monster",
    name: "Spider",
    emoji: "🕷",
    health: 10,
    diceScores: [3]
};

function renderCharacter(character) {
    
    const { elementId, name, emoji, health, diceScores } = character;
    
    let diceString = '';
    
    // 1. Convert the for loop to a 'for of' loop.
    // 2. Update the dice string so instead of six it shows 
    //    the value from the array each time
    for(let i = 0; i < diceScores.length; i++) {
        diceString += `<div class="dice">6</div>`; 
    }
    
   document.getElementById(elementId).innerHTML = `
        <div class="character">
            <div class="name">${name}</div>
            <div class="emoji">️${emoji}</div>
            <div class="health">health: <b>${health}</b></div>
            <div class="dice-container">
                ${diceString}
            </div>
        </div>`; 
}

renderCharacter(hero);
renderCharacter(monster);