How to make a health bar

Question

I am trying to make my own version of a pokemon game using very simple HTML and JavaScript.

So far, I have everything covered, except the health bar. How do I make an entity in my code, that will represent a bar, and when the opposing team selects a move, the health bar goes down?

Would I use a bunch of small div's?

Answer 1

I would recommend a HTML progress bar:

<progress id="health" value="100" max="100"></progress>

And when they lose/gain health, do run this Javascript code:

let health = document.getElementById("health")
health.value -= 10; //Or whatever you want to do with it.