// deconstruct the data at the top of the renderCharacter function
// use the new deconstructed variables throught the renderCharacter function

function renderCharacter(data) {
   document.getElementById(data.elementId).innerHTML = `
    <div class="character">
        <div class="name">${data.name}</div>
        <div class="emoji">️${data.emoji}</div>
        <div class="health">health: <b>${data.health}</b></div>
        <div class="dice-container">
            <div class="dice">${data.diceRoll}</div>
        </div>
    </div>
`; 
}


const hero = {
    elementId: "hero",
    name: "Wizard",
    emoji: "🧙",
    health: 60,
    diceRoll: 6
}

const monster = {
    elementId: "monster",
    name: "Spider",
    emoji: "🕷",
    health: 10,
    diceRoll: 2
}


renderCharacter(hero);
renderCharacter(monster);