function initProgressBarUI(arr) {
  setSequenceSize(arr);

  let out =
    '<div id="bar" class="bar"></div> \
  <span id="startText" class="progress-text">Start</span> ';
  let i;
  for (i = 0; i < arr.length; i++) {
    out +=
      '<div class="progress-bar progress-bar-striped \
          progress-bar-animated ' +
      arr[i].color +
      '" \
          role="progressbar" aria-valuemin="0" \
          aria-valuemax="' +
      totalDuration +
      '" \
          style="width:' +
      arr[i].durationPercent +
      "%; \
          background-color:" +
      arr[i].color +
      ';">' +
      arr[i].title +
      "<br/>(" +
      timeConversion(60000 * arr[i].duration) +
      ")</div>";
  }

  document.querySelector("#progress").innerHTML = out;


  setProgressBarProperties();
  setDate();
}
/**
 * Create the time progress bar view
 * Append progress bars in it according to the array
 * @param {array} arr
 */
Create the time progress bar view
Append progress bars in it according to the array
@param {array} arr
Create the time progress bar view Append progress bars in it according to the array @param { array } arr
function initProgressBarUI(arr) {
  setSequenceSize(arr);
  let out =
    '<div id="bar" class="bar"></div> \
  <span id="startText" class="progress-text">Start</span> ';
  let i;
  for (i = 0; i < arr.length; i++) {
    out +=
      '<div class="progress-bar progress-bar-striped \
          progress-bar-animated ' +
      arr[i].color +
      '" \
          role="progressbar" aria-valuemin="0" \
          aria-valuemax="' +
      totalDuration +
      '" \
          style="width:' +
      arr[i].durationPercent +
      "%; \
          background-color:" +
      arr[i].color +
      ';">' +
      arr[i].title +
      "<br/>(" +
      timeConversion(60000 * arr[i].duration) +
      ")</div>";
  }
  document.querySelector("#progress").innerHTML = out;
  setProgressBarProperties();
  setDate();
}
function initProgressBarUI ( arr ) { setSequenceSize ( arr ) ; let out = '<div id="bar" class="bar"></div> \
  <span id="startText" class="progress-text">Start</span> ' ; let i ; for ( i = 0 ; i < arr . length ; i ++ ) { out += '<div class="progress-bar progress-bar-striped \
          progress-bar-animated ' + arr [ i ] . color + '" \
          role="progressbar" aria-valuemin="0" \
          aria-valuemax="' + totalDuration + '" \
          style="width:' + arr [ i ] . durationPercent + "%; \
          background-color:" + arr [ i ] . color + ';">' + arr [ i ] . title + "<br/>(" + timeConversion ( 60000 * arr [ i ] . duration ) + ")</div>" ; } document . querySelector ( "#progress" ) . innerHTML = out ; setProgressBarProperties ( ) ; setDate ( ) ; }
Create the time progress bar view
 Append progress bars in it according to the array
 @param {array} arr
Create the time progress bar view Append progress bars in it according to the array @param { array } arr