Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this link: https://www.youtube.com/watch?v=QxQRtwAtqKE. I've been following along with it, but unfortunately, I encountered an error in my JavaScript code that the instructor did not face.
The issue seems to be revolving around the style method within the update function in the JavaScript section. I attempted to relocate the update function's position (even placing it above setValue() at one point) in case it wasn't being read correctly in its current placement. However, this adjustment didn't resolve the error. Since I meticulously followed the tutorial step-by-step, I'm puzzled as to where I might be going wrong. Could there be something crucial that I missed?
Below is the provided code with some minor modifications made by me: Javascript code:
// JavaScript source code
//creating a class for the progess bar (HP bar)
class ProgressBar {
constructor(element, initialValue = 0) {
this.valueElem = element.querySelector('.HP-value');
this.fillElem = element.querySelector('.HP-bar-fill');
this.setValue(initialValue);
}
setValue(newValue) {
if (newValue < 0) {
newValue = 0;
}
if (newValue > 100) {
newValue = 100;
}
this.value = newValue;
this.update();
}
update() {
const percentage = this.value + '%';
this.fillElem.style.width = percentage;
this.valueElem.textContent = percentage;
}
}
const pb1 = new ProgressBar(document.querySelector('.HP'), 80);
body
{
}
.HP {
position: relative;
width: 300px;
height: 40px;
border: 2px solid black;
}
.HP-bar-fill {
height: 100%;
background: #36ed1a;
transition: width 0.5s;
}
.HP-value {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>HealthBar</title>
</head>
<body>
<h1>Your HP</h1>
<div class="HP">
<div class="HP-value">50%</div>
<div class="HP-bar-fill"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>