Progress Bar
This is an example of a progress bar you can add to any application.
I made this with a combination of HTML, CSS and JS.
You can see the JavaScript by clicking the button below.
const usrIn = document.querySelector('.usrIn');
const enterBtn = document.querySelector('.enterBtn');
const clickBtn = document.querySelector('.clickBtn');
const resetBtn = document.querySelector('.resetBtn');
const info = document.querySelector('.info');
let num = 0;
let total = 10;
const progressBarFill = () => {
let increment = 100 / total;
let progress = document.querySelector('.progress-bar');
let width = progress.style.width.replace('%', '');
width = parseInt(width) + increment;
width = (num / total) * 100+'%';
progress.style.width = width;
info.textContent = `${num} / ${total}`;
if(num == total) {
reset();
};
};
const reset = () => {
usrIn.value = 10;
num = 0;
};
clickBtn.addEventListener('click', () => {
num++
progressBarFill();
});
resetBtn.addEventListener('click', () => {
reset();
progressBarFill();
});
enterBtn.addEventListener('click', () => {
if(usrIn.value === total) {
reset();
}else {
total = usrIn.value;
info.textContent = `${num} / ${total}`;
}
});
usrIn.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
if(usrIn.value === total) {
reset();
}else {
total = usrIn.value;
info.textContent = `${num} / ${total}`;
}
}
});