비전공자 개발일기

DOWNLOAD BUTTON COUNTDOWN TIMER 본문

Javascript

DOWNLOAD BUTTON COUNTDOWN TIMER

HiroDaegu 2022. 5. 22. 00:28
728x90
SMALL

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOWNLOAD BUTTON COUNTDOWN TIMER</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
  />
</head>
<body>
  <div class="download-container">
    <a href="#" class="download-btn">DOWNLOAD FILES <i class="fas fa-download"></i></a>
    <div class="countdown"></div>
    <div class="pleaseWait-text">Please Wait....</div>
    <div class="manualDownload-text">
      If the download did't start automatically, 
      <a href="#" class="manualDownload-link" target="_top">CLICK here</a>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.download-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 .5rem;
}

.download-btn {
  background-color: #4285f4;
  color: #fff;
  text-decoration: none;
  width: 260px;
  padding: 18px 0;
  text-align: center;
  font-weight: 400;
  border-radius: 5px;
  box-shadow: 0 5px 25px rgba(1, 1, 1, .15);
}

.download-btn:hover {
  background-color: #2345f4;
}

.download-btn i {
  margin-left: 5px;
}

.countdown {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 700;
}

.countdown span {
  color: #0693f6;
  font-size: 1.5rem;
  font-weight: 800;
}

.pleaseWait-text, .manualDownload-text {
  font-size: 1.1rem;
  font-weight: 600;
  display: none;
}

.manualDownload-link {
  text-decoration: none;
  color: #0693f6;
  font-weight: 800;
}
const download = document.querySelector(".download-btn");
const conutdown = document.querySelector(".countdown");
const pleaseWaitText = document.querySelector(".pleaseWait-text");
const manualDownloadText = document.querySelector(".manualDownload-text");
const manualDownloadlink = document.querySelector(".manualDownload-link");

let timeleft = 10;
download.addEventListener("click", () => {
  download.style.display ="none";
  conutdown.innerHTML = `Download will begin automatically in <span>${timeleft}</span> seconds`;
  let downloadTimer = setInterval(function timeCount() {
    timeleft--;
    conutdown.innerHTML = `Download will begin automatically in <span>${timeleft}</span> seconds`;
    if(timeleft <= 0){
      clearInterval(downloadTimer);
      pleaseWaitText.style.display = 'block';
      let download_href = 'https://drive.google.com/file/d/11v_10nZ7ha2H-S2KP1nFcZQA1OS6PrXe/view?usp=sharing';
      
      window.location.href = download_href;
      manualDownloadlink.href = download_href;
      setTimeout(() => {
        pleaseWaitText.style.display = 'none';
        manualDownloadText.style.display = 'none';
      },1000);
    }
  }, 1000);
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Download Button Animation  (0) 2022.05.25
DETECT USER BROWSER  (0) 2022.05.24
Height Converter  (0) 2022.05.17
Light AND Dark Mode Toggle  (0) 2022.05.16
Random Color Generator  (0) 2022.05.15
'Javascript' Related Articles more