DEV Community


Posted on

stripe out the data and store them in variabels


-Strip out the data (element id, name, avatar,
health and dice score) and store them in variables

  • Write a renderCharacter() function that accepts the 5 new variables as paramaters and renders out a character with this data
  • Call renderCharacter() twice. Once with the hero variables and once with the monster variables to that both are rendered
const heroElementId = "hero"
const heroName = "Wizard"
const heroAvatar = "images/wizard.png"
const heroHealth = "60"
const heroDiceRoll = 6

const monsterElementId = "monster"
const monsterName = "Orc"
const monsterAvatar = "images/orc.png"
const monsterHealth = "10"
const monsterDiceRoll = 4

function renderCharacter(elementId, name, avatar, health, diceRoll){
  document.getElementById(elementId).innerHTML = 
    `<div class="character-card">
        <h4 class="name"> ${name} </h4>
        <img class="avatar" src="${avatar}"/>
        <p class="health">health: <b> ${health}</b></p>
        <div class="dice-container"><div class="dice"> ${diceRoll} </div></div>

renderCharacter(heroElementId, heroName, heroAvatar, heroHealth, heroDiceRoll)
renderCharacter(monsterElementId, monsterName, monsterAvatar, monsterHealth, monsterDiceRoll
Enter fullscreen mode Exit fullscreen mode

Top comments (0)