script.js

let header = document.querySelector('h2')
const progressBar = document.querySelector('.progress-bar')
const percentage = document.querySelector('.percentage')
let statusBar = document.querySelector('.status')
const downloadButton = document.querySelector('.download-btn')
const progressSection = document.querySelector('.progress-section')

let seconds = 5;
let counter = 0;



downloadButton.addEventListener('click', showProgress)

function showProgress(){
    downloadButton.style.display = 'none'
    progressSection.style.display = 'block'

    let interval = setInterval(() => {
        if (counter < 100){
            counter++
            progressBar.style.width = `${counter}%`
            percentage.textContent = `${counter}%`
            statusBar.textContent = 'Downloading...'
        }else {
            statusBar.textContent = 'Completed'
            header.textContent = 'Completed'
            clearInterval(interval)
        }

    }, seconds * 1000 / 100)

    counter = 0
progressBar.style.width = '0%'
percentage.textContent = '0%'

}