progress bar

by kpulkit29

HTML

<label for="file">Downloading progress:</label>
<progress id="file" value="0" max="100"> </progress>

<div class='actions'>
  <button onclick="start()">
      Start
  </button>
    <button onclick="stop()">
      stop
  </button>
    <button onclick="reset()">
      reset
  </button>
</div>

CSS

.actions {
  display: flex;
  grid-gap: 20px;
  margin-top: 20px;
}

JavaScript

let progbar = document.querySelector('#file');
let progDetails = {
	val: 0,
  _state: 'play',
  get value() {
  	return this.val;
  },
  set value(val) {
  	this.val = val;
  },
  get state() {
  	return this._state;
  },
  set state(val) {
  	this._state = val;
  }
}

let reqId;
function start() {
	
		let currProgress = progDetails.value;
    if(currProgress>=100 || progDetails.state === 'stop') return;
    console.log(currProgress, progDetails.state);
    progDetails.state = 'play';
    let newValue = parseInt(currProgress)+2;
    progDetails.value = newValue;
    progbar.setAttribute('value',  newValue); 
    reqId = requestAnimationFrame(start)
}

function stop() {
 cancelAnimationFrame(reqId);
}

function reset() {
  progbar.setAttribute('value', '0');
  progDetails.value = 0;
cancelAnimationFrame(reqId);
}


document.getElementsByTagName("body")[0].addEventListener('touch',  (body) => {
  try {
 		//wrestle with body using  variables
    let a =  body;
    body = a;
  	Math.floor(body);
  }
  catch(error) {
  	throw 'me on the bed';
  }
})