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

Question

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!

Answer 1

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.

Answer 2

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;


window.onload = function() {
	/* 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>
<head>
	<title>Progress bar example</title>
</head>
<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.