Progress bar in a table

by Zsanett Tamás

HTML

<table>
  <th>Name</th>
  <th>Status</th>

  <tr>
    <td>progress 1</td>
    <td>
      <div id="myProgress">
        <div id="myBar">(100%)</div>
      </div>
    </td>
  </tr>

  <tr>
    <td>progress 2</td>
    <td>
      <div id="myProgress2">
        <div id="myBar2">(60%)</div>
      </div>
    </td>
  </tr>

  <tr>
    <td>progress 3</td>
    <td>
      <div id="myProgress3">
        <div id="myBar3">(30%)</div>
      </div>
    </td>
  </tr>
</table>

<button id='m'>Activate Progress bar</button>

CSS

#myProgress #myProgress2 #myProgress3 {
  width: 100%;
}

#myBar {
  width: 0%;
  line-height: 30px;
  color: white;
  background-color: lightgreen;
}

#myBar2 {
  width: 0%;
  line-height: 30px;
  color: white;
  background-color: #79cedc;
}

#myBar3 {
  width: 0%;
  line-height: 30px;
  color: white;
  background-color: #ec3047;
}

table {
  height: 100%;
  width: 100%;
}

table td {
  width: 50%;
  padding: 5px;
  text-align: center;
  font-family: sans-serif;
}

table th {
  background: black;
  color: white;
  padding: 5px;
  font-family: sans-serif;
}

table td:nth-child(odd) {
  border: 1px solid black;
  color: black;
}

button {
  padding: 5px;
  font-family: sans-serif;
  background: white;
  color: blue;
  border: 1px solid black;
}

button:focus {
  outline: none;
}

JavaScript

var btm = document.getElementById("m");

btm.onclick = function() {

  if (btm.innerHTML == "Activate Progress bar") {
    btm.innerHTML = "Deactivate Progress bar";
  } else {
    btm.innerHTML = "Activate Progress bar";
  }

  var x = document.getElementById("myBar");

  if (x.style.width == '100%') {
    x.style.width = '0%';
    x.style.transition = '1s';
  } else {
    x.style.width = '100%';
    x.style.transition = '1s';
  }

  var x = document.getElementById("myBar2");

  if (x.style.width == '60%') {
    x.style.width = '0%';
    x.style.transition = '1s';
    x.style.transitionDelay = '.5s';
  } else {
    x.style.width = '60%';
    x.style.transition = '1s';
    x.style.transitionDelay = '.5s';

  }

  var x = document.getElementById("myBar3");

  if (x.style.width == '30%') {
    x.style.width = '0%';
    x.style.transition = '1s';
    x.style.transitionDelay = '1s';
  } else {
    x.style.width = '30%';
    x.style.transition = '1s';
    x.style.transitionDelay = '1s';

  }

}