How to make a health bar

html, javascript

Solution

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.

Problem

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?

Original source

Related problems