JSFiddle - React, Tailwind, and code Playground

by Knibber4

HTML

<html>
<head>
<link rel="stylesheet" href="style/pogbar.css">
<script src="java/progress.js"></script>
</head>

<body>


<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>

<div class="buttonHold">
<input type="button" value="Update" onclick="update()" />
</div>

<form id="fruits">
<input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label>
<input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label>
<input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label>
<input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label>
<input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label>
</form>


</body>
</html>

CSS

h1 {
  text-align: center;
}

#myProgress {
  margin: auto;
  width: 50%;
  background-color: black;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
}

.buttonHold {
  text-align: center;
}

JavaScript

function update() {
   var checked = 0;
   var myBar = document.getElementById("myBar");
   //Reference the Form.
   var fruits = document.getElementById("fruits");
 
   //Reference all the CheckBoxes in Table.
   var chks = fruits.getElementsByTagName("INPUT");


 
   //Loop and count the number of checked CheckBoxes.
   for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
                checked++;
      }
   }
   if (checked > 0) {
     myBar.style.width = ((checked / 151) * 100) + "%";
        return true;
   } else {
         alert("Please select CheckBoxe(s).");
           return false;
   }
}