Progressbar - measuring delta

- for welliba

by Ercan Cicek

HTML

<div id="progressbar-container">
  <div id="progressbar-fill"></div>
</div>
<br><br><br><br>
<button id="step-forward">stepforward</button>
<br>
<span>Next step in percent: </span><strong id="next-step-in-percent"></strong>
<br><br><br><br>
<button id="increase-questions-count">increase questions count</button>
<br>
<span>Questions left: </span><strong id="questions-count"></strong>

SCSS

#progressbar-container {
  width: 500px;
  height: 16px;
  border: 1px solid gray;
  > #progressbar-fill {
    width: 0;
    height: 100%;
    background-color: red;
    transition: width .33s ease;
  }
}

JavaScript

var questionsCount = 10,
    currentFillInPercent = 0,
    nextStepInPercent = 0;

document.addEventListener("DOMContentLoaded", function(event) { 
	printQuestionsCount();
	calcNextStepInPercent();
});

document.getElementById('step-forward').addEventListener('click', function() {
  addProgress();
});

document.getElementById('increase-questions-count').addEventListener('click', function() {
	increaseQuestionsCount();
});

function calcNextStepInPercent() {
  nextStepInPercent = (100 - currentFillInPercent) / questionsCount;
	document.getElementById('next-step-in-percent').innerText = nextStepInPercent.toFixed(2) + "%";
}

function addProgress() {
	if(questionsCount === 0) {
    restartProgress();
  }
	calcNextStepInPercent();
  currentFillInPercent += nextStepInPercent;
  document.getElementById('progressbar-fill').style.width = currentFillInPercent + '%';
  questionsCount--;
  document.getElementById('questions-count').innerText = questionsCount;
}

function increaseQuestionsCount() {
	questionsCount++;
  printQuestionsCount();
  calcNextStepInPercent();
}

function printQuestionsCount() {
  document.getElementById('questions-count').innerText = questionsCount;
}

function restartProgress() {
	questionsCount = 10;
	currentFillInPercent = 0;
  document.getElementById('questions-count').innerText = questionsCount;
}