# How can I make a progress bar for EXP in JavaScript? [closed]

So I am making an incremental game with JavaScript, HTML5, and CSS, I need to have this bar that is essentially a div with a p element in it "fill up" as the player earns more points through sacrifice. All the ways I saw to do this on Google required other CSS code that messed up the spacing and such of my whole page.

Here is a non-functioning idea of how it should look. I basically need the Div to fill with any color behind the p element:

function expCalc(){
var expC = exp;
var expN = expC + clickCount + modif;
exp = exp + expN;
getElementById("exp").innerHTML = exp;
}
div#ovvw-c{
float: center;
border: 3px solid green;
width: 3.3%;
height: 50%;
text-align: center;
margin-top:1%;
margin-left:49.25%;
margin-bottom: 1%;
background-color: rgba(255, 255, 255, .5);
}
.pbar{
transform: rotate(270deg);
margin-right:4px;
margin-top:250px;
text-align:center;
font-size:20px;
font-weight:900;
}
<div id="ovvw-c">
<p class="pbar">Hatchling:<span id="exp">0</span>/<span id="expMax">100</span></p>
</div>

I understand that my coding is probably sub-par so any constructive criticisms would be appreciated but my main question is how to turn the div into a progress bar with minimal changes to size/spacing/CSS in general. Thanks!

This is a bit of a hackjob. I'm no CSS/HTML pro, and I'm hoping someone else will chime in with a better solution for you. That said, one option would be something like this:

<div id="ovvw-c">
<div class="pbar">
<div id="fillbar" style="width: 270px"></div>
<div id="pbartext">
Hatchling:
<span id="exp">0</span>
/
<span id="expMax">100</span>
</div>
</div>
</div>


With some slight changes/additions to the CSS:

div#ovvw-c{
... (same as before)
}
div#fillbar{
background-color: green;
height: 50px;
margin: 0px 0px -35px 30px;
}
div#pbartext{
float: left;
margin-left: 48px;
}
.pbar{
transform: rotate(270deg);
margin-right:2px;
margin-top:250px;
text-align:center;
font-size:20px;
font-weight:900;
}


Then you just change the width style of the fillbar to match whatever percent you want at run-time.

(Since this is hacked together, it looks like width=0 to width=2 are effectively 0%, and width=268 to width=270 is effectively 100%. So, percentage * 2.7 gets a pretty good scaling.)

Some easier-to-miss changes:

• pbar's margin-right is 2px instead of 4px.
• Changed pbar from a paragraph tag to a div.

Since this is an html5 game then I guess you are already using canvas or at least you know about it. I think this might help.

There are 2 ways I see this could be done: (i) Using a progress tag. (ii)Or you could do this using the canvas tag.

I don't know how to use the former, but I do know how to use the latter.

/* Get the canvas element */
var c = document.getElementById('canvas');

/* Get the canvas' context */
var ctx = c.getContext('2d');

/* Variables used for bar fill */
var total = 100,
hatched = 0;

/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,0,c.height);

/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);
}

function inc () {
hatched += 10;
/* Perc (or percentage) takes the answer from hatched/total... */
var perc = hatched / total;
/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
var filled;
filled = perc * c.width;

ctx.clearRect(0,0,c.width,c.height);

/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,filled,c.height);

if (hatched >= total) {
hatched = total;
}

/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);

}

function dec () {
hatched -= 10;
/* Perc (or percentage) takes the answer from hatched/total... */
var perc = hatched / total;
/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
var filled;
filled = perc * c.width;

ctx.clearRect(0,0,c.width,c.height);

/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,filled,c.height);

if (hatched <= 0) {
hatched = 0;
}

/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);
}
<!DOCTYPE html>
<html>
<title>Progress bar example</title>
<body>
<!-- Use Canvas to draw bar. -->
<canvas id="canvas" width='700px' height='50px' style="border: 2px solid black">
<p>Your computer doesn't support the canvas tag</p>
</canvas><br>
<br>

<!-- Buttons to increase and decrease values -->
<button type="button" onclick="inc();">Increase!</button>
<button type="button" onclick="dec();">Decrease!</button>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

This will be easy to implement into a canvas game and if you are using the DOM then my guess is the progress tag will be much more better.