scrimba
Create an RPG game - Rob Sutcliffe
Add health bar
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Add health bar
by
AboutCommentsNotes
Add health bar
by
Expand for more info
index.js
run
preview
console
import characters from "./data";
import { getDiceRollArray, sumArray } from "./utils";
const { hero, monster } = characters;

const getDice = (diceRollArray) =>
diceRollArray.map(
(num) => `<div class="dice">${num}</div>`
).join("");


// call the getHealthBar function to get the progress bar html
// and add to the chacter html template
// just before the diceString
function renderCharacter(character) {

const { elementId, name, emoji, health, diceCount } = character;
const diceRollArray = getDiceRollArray(diceCount);
const diceString = getDice(diceRollArray);

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>`;
}


document.getElementById("attack-button").onclick = function() {
renderCharacter(hero);
renderCharacter(monster);
}

renderCharacter(hero);
renderCharacter(monster);
Console
/index.html
-1:52