// 1. Strip out the hero and monster data (element id, name, emoji, health, dice score)
//    and create new variables for each

// 2. write a function that accpts the new variables as paramaters 
//    (element id, name, emoji, health, dice score) and renders out a character with this data

// 3. call renderCharacter twice. once with the hero variables and once with the monster variables


document.getElementById( "hero" ).innerHTML = 
    `<div class="character">
        <div class="name"> Wizard </div>
        <div class="emoji"> 🧙 </div>
        <div class="health">health: <b> 60 </b></div>
        <div class="dice-container"><div class="dice"> 6 </div></div>
    </div>`; 

document.getElementById( "monster" ).innerHTML = 
    `<div class="character">
        <div class="name"> Spider </div>
        <div class="emoji"> 🕷 </div>
        <div class="health">health: <b> 10 </b></div>
        <div class="dice-container"><div class="dice"> 2 </div></div>
    </div>`;