I am currently working on a timer with a progress bar. The timer itself is functioning properly, but I am facing an issue with syncing the progress bar with the timer. I am utilizing the bootstrap progress bar for this project. If I remove the 'bar' variable from the function, the timer works perfectly fine, however, when the progress bar is included, it stops working. Any suggestions or recommendations would be greatly appreciated. Thank you :)
function startTimer(duration, display, bar) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
bar.css('width', minutes + '%');
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var minutes = 60 * 15,
display = document.querySelector('#time');
bar = document.querySelector('#progressBar');
startTimer(minutes, display, bar);
};<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="progress mx-auto mb-2" style="max-width: 300px;">
<div class="progress-bar bg-success" role="progressbar" id="progressBar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span id="time">15:00</span>