प्रोग्रेस बार तत्वों के केंद्र में प्रगति बार मान जोड़ें

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //Use parse() method to convert JSON string to JSON object
    var responseJsonObj = JSON.parse(this.responseText);
    // console.log(responseJsonObj);

    for (let p = 0; p < responseJsonObj.bars.length; p++) {
      //Create Progress Bars
      // Create a wrapper div
      var wrapper = document.createElement('div');
      wrapper.className = 'wrapper';
      var Progressbar = document.createElement('PROGRESS');
      Progressbar.className = 'progress-bar';
      var idTag = 'Progress' + p.toString();
      Progressbar.setAttribute('id', idTag);
      Progressbar.setAttribute('value', responseJsonObj.bars[p]);
      Progressbar.setAttribute('max', responseJsonObj.limit);
      // Make sure to change the color on start if needed!
      changeColors(Progressbar);
      // add progress bar to wrapper
      wrapper.appendChild(Progressbar);
      //Create a span to contain the number
      var number = document.createElement('span');
      number.innerText = responseJsonObj.bars[p];
      // add number span to wrapper
      wrapper.appendChild(number);
      var br = document.createElement('br');
      // add wrapper to document.
      document.body.appendChild(wrapper);
      document.body.appendChild(br);
    }

    //Create Drop Down
    var Select = document.createElement('SELECT');
    Select.setAttribute('id', 'selectElement');
    document.body.appendChild(Select);
    var opt = null;
    for (o = 0; o < responseJsonObj.bars.length; o++) {
      // alert(o);
      opt = document.createElement('option');
      opt.value = 'Progress' + o;
      opt.innerHTML = '#Progress' + o;
      Select.appendChild(opt);
    }
    for (let b = 0; b < responseJsonObj.buttons.length; b++) {
      //Create Buttons
      var Button = document.createElement('BUTTON');
      Button.innerHTML = responseJsonObj.buttons[b];
      Button.addEventListener('click', function(event) {
        //Button Event handling
        var selected_PB_Element = document.getElementById(
          'selectElement'
        );
        var selected_PB_Value = selected_PB_Element.value;
        let currentNode = document.getElementById(selected_PB_Value);

        // Get the next sibling ( the number span)
        let nextSibling = currentNode.nextElementSibling;
        currentNode.value +=
          responseJsonObj.buttons[b];

        // Also set the text of the number span
        nextSibling.innerText = currentNode.value;

        changeColors(currentNode);

      });
      document.body.appendChild(Button);
    }
  }
};

function changeColors(progressNode) {
  const {
    value,
    max
  } = progressNode;

  // If value is greater than a certain amount, set a class
  // otherwise remove that class - Can do ranges of values here.
  if (value >= .75 * max) {
    progressNode.classList.add('green');
  } else {
    progressNode.classList.remove('green');
  }
}
xmlhttp.open('GET', 'http://pb-api.herokuapp.com/bars', true);
xmlhttp.send();

.wrapper {
  width: 250px;
  display: grid;
  grid-template-columns: 1fr;
  /* make the text centered vertically and horizontally in the cell */
  justify-items: center;
  align-items: center;
}

.wrapper>* {
  /* All children of the wrapper should share the same grid area! */
  grid-area: 1 / 1;
}

.progress-bar {
  /* Make the progress bar expand to fill the whole cell */
  width: 100%;
  /* Make it a tad taller - Could make this 100% as well and set the height in the wrapper */
  height: 30px;
}


/* Attempt to get the appearances to look like the example */

.progress-bar {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #cccbcd;
}


/* These will only work on safari/chromium */

progress[value]::-webkit-progress-bar {
  background-color: white;
  border-radius: 2px;
  /*   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; */
}

progress[value]::-webkit-progress-value {
  /*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; */
  background-color: #b2d7e6;
}


/* -moz-progress-bar changes the color of the filled part - REALLY inconsistent here */

progress[value]::-moz-progress-bar {
  background-color: #b2d7e6;
  border-radius: 2px;
  /*   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; */
}


/* Make the bar green */

progress[value].green::-webkit-progress-value {
  background-color: lightgreen;
}

progress[value].green::-moz-progress-bar {
  background-color: lightgreen;
}

<!DOCTYPE html>
<html>

<head>
  <title>Optus FrontEnd Assignment</title>
</head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" />

<body>
  <p id="demo"></p>
  <div class="w3-container">
    <h2>Progress Bars Demo</h2>
  </div>
  <br />
</body>

</html>