Source Code Of Countdown Function

Page Contents

Source Code Of Countdown Function Using HTML, CSS And JavaScript. Learn How To Make Countdown Function And Get Free Source Code.

Folder Structure

Resources

Prerequisite Sites

https://fonts.google.com/

Images

Codes

HTML

index.html
<!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>Source Code Of Countdown Function</title>
    <!---------------  CSS  --------------------->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="headings">
          <h1>2023</h1>
          <h3>New Year Countdown</h3>
          <h4>LET'S COUNTDOWN TOGETHER</h4>
        </div>
        <div class="countdown">
          <div class="detail">
            <span class="number" id="day">00</span>
            <span class="sub_heading">Days</span>
          </div>
          <div class="detail">
            <span class="number" id="hr">00</span>
            <span class="sub_heading">Hours</span>
          </div>
          <div class="detail">
            <span class="number" id="min">00</span>
            <span class="sub_heading">Minutes</span>
          </div>
          <div class="detail">
            <span class="number" id="sec">00</span>
            <span class="sub_heading">Seconds</span>
          </div>
          <div class="detail">
            <span class="number">LEFT</span>
          </div>
        </div>
      </div>
   <!---------------  SCRIPT  --------------------->
   <script src="script.js"></script>  
</body>   
</html>

CSS

style.css
/*-----------------  GOOGLE FONTS  -----------------*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

/*-----------------  VARIABLES  -----------------*/
:root {
    /* Colors */ 
    --gold_color: rgb(255, 191, 0);
    --glass_color: rgba(255, 255, 255, 0.05);
    --shadow_color: 0 0 25px rgba(0, 0, 0, 0.5);
}
/*-----------------  Base  -----------------*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'PT Serif', serif;
    color: var(--gold_color);
}
body {
  background: url(background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
/*-----------------  Styling Start  -----------------*/
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 1rem;
}
.headings {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
}
.headings h1 {
  text-shadow: var(--shadow_color);
  font-size: 6.2rem;
  font-weight: 800;
  letter-spacing: 0.15rem;
  display: inline-block;
}
.headings h3 {
  font-size: 3.5rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 2rem;
  display: inline-block;
}
.headings h4 {
  font-size: 4rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 2rem;
  display: inline-block;
}
.countdown {
  width: 95vw;
  display: flex;
  justify-content: space-around;
  gap: 0.6rem;
}
.detail {
  width: 28vmin;
  height: 29vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
span.number {
  background-color: var(--glass_color);
  backdrop-filter: blur(7.5rem);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 4rem;
  box-shadow: var(--shadow_color);
  border-radius: 0.1rem;
}
span.number:after {
  content: "";
  position: absolute;
  background-color: var(--glass_color);
  height: 100%;
  width: 50%;
  left: 0;
}
span.sub_heading {
  font-size: 1.5rem;
  background-color: var(--glass_color);
  backdrop-filter: blur(7.5rem);
  display: block;
  width: 100%;
  position: relative;
  text-align: center;
  padding: 0.7rem 0;
  font-weight: 600;
  border-radius: 0.1rem;
  box-shadow: var(--shadow_color);
}

JavaScript

script.js
/* --------------- Countdown Function  --------------------- */
let day = document.getElementById("day");
let hr = document.getElementById("hr");
let min = document.getElementById("min");
let sec = document.getElementById("sec");
let endDate = new Date(2023, 0, 1, 00, 00);
let endTime = endDate.getTime();

function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;

  let addZero = (num) => (num < 10 ? `0${num}` : num);

  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(
      ".headings"
    ).innerHTML = `<h1>Happy New Year</h1>`;
    document.querySelector(
      ".countdown"
    ).innerHTML = `<h1 style="font-size:6em;">2023</h1>`;

  } else {
    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);

    day.textContent = addZero(daysLeft);
    hr.textContent = addZero(hrsLeft);
    min.textContent = addZero(minsLeft);
    sec.textContent = addZero(secsLeft);
  }
}

let i = setInterval(countdown, 1000);
countdown();

/* --------------- End Countdown Function  --------------------- */