JSFiddle - React, Tailwind, and code Playground

by Knibber4

HTML

<!--progress bar-->
<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>

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

<table class="numbers">
  <tbody>
    <tr>
      <td>#001-030</td>
    </tr>
  </tbody>
</table>

<table class="hometable">
  <tbody>
    <tr>
      <td>
        <p class="id">#001</p>
      </td>
      <td>
        <p class="name">Bulbasaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Bulbasaur.PNG" alt="Bulbasaur" width="180" height="180"></td>

      <td>
        <p class="id">#002</p>
      </td>
      <td>
        <p class="name">Ivysaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Ivysaur.PNG" alt="Ivysaur" width="180" height="180"></td>

      <td>
        <p class="id">#003</p>
      </td>
      <td>
        <p class="name">Venusaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Venusaur.PNG" alt="Venusaur" width="180" height="180"></td>
    </tr>

    <tr>
      <td>
        <form id="check1">
          <input id="chk1" type="checkbox" value="1" /></form>
      </td>
      <td>

        <a href="Bulbasaur.html">
          <p class="location">Location</p>
        </a>
      </td>
      <td>
        <form id="check2">
          <input id="chk2" type="checkbox" value="2" /></form>
      </td>
      <td><a href="Ivysaur.html">
          <p class="location">Location</p>
        </a></td>
      <td>
        <form>
          <input id="chk3" type="checkbox" value="3" />
        </form>
      </td>
      <td><a href="Venusaur.html">
          <p class="location">Location</p>
        </a></td>
    </tr>
  </tbody>
</table>

CSS

* {
  background-color: white;
}


#myProgress {
  margin: auto;
  width: 50%;
  background-color: white;
  border: 3px solid black;
  border-radius: 5px;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: red;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}

.buttonHold {
  text-align: center;
}

.numbers {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

JavaScript

function update() {
   var checked = 0;
   var myBar = document.getElementById("myBar");
   //Reference the Form.
   var checks = document.getElementsById("check1", "check2", "check3");
 
   //Reference all the CheckBoxes in Table.
   var chks = checks.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).toFixed(2) + "%";
     myBar.innerHTML =((checked / 151) * 100).toFixed(2) + "%";
        return true;
   } else {
         myBar.style.width = ((0 / 151) * 100) + "%";
         myBar.innerHTML = "0%";
           return false;
   }
}