Countdown Timer | Cosas Learning

Source Code of Countdown Timer

Html, Source Code, Web Development / By

This web project features a countdown timer to the year 2024, providing a visual representation of the time remaining until the specified date. The project utilizes HTML, CSS, and JavaScript to create a visually appealing and dynamic user interface. Additionally, it includes confetti effects for a festive touch when the countdown reaches zero.

Folder Structure

Countdown Timer | Cosas Learning

Resources

Prerequisite Sites

Images

Countdown Timer | Cosas Learning

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>Countdown Timer | Cosas Learning</title>
    <!---------------  Importing the CSS file  --------------------->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="headings">
          <h1>2024</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>
   <!--------------- CDN Confetti --------------->
   <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>   
   <!---------------  Importing the JavaScript file  --------------------->
   <script src="script.js"></script>  
</body>   
</html>
  • The HTML file sets up the basic structure of the webpage using standard HTML5 markup.
  • It includes metadata in the head section, such as character set, viewport settings, and the title of the webpage.
  • External resources, like the CSS file and the confetti JavaScript library, are linked using <link> and <script> tags.
  • Within the body, there is a container division (<div class="container">) containing headings and countdown details.
  • Headings include the year (h1), a subtitle (h3), and a tagline (h4).
  • Countdown details are organized within a <div class="countdown"> container, where each detail (days, hours, minutes, seconds, and “LEFT”) has its own division.

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);
}
  • Importing Google Fonts to use the “PT Serif” font throughout the webpage.
  • CSS variables are declared in the :root selector to define colors used in the styling.
  • General styling rules include setting a background image and positioning the container in the center of the viewport.
  • The headings section is styled using the .headings class, with specific styles for h1, h3, and h4.
  • Each detail is styled using the .detail class, with specific styles for the number and subheading.
  • Style the countdown section using flexbox, setting the width, gap, and height of individual countdown details.
  • The span.number class is used to style the countdown numbers with a glass-like effect, a shadow, and a border radius.
  • Apply additional styles to enhance the overall visual appeal of the webpage.

JavaScript

script.js
/* --------------- Confetti Effects  --------------------- */

// Fireworks Effect
var fireworksEffect = function() {
var duration = 30 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
  
  function randomInRange(min, max) {
    return Math.random() * (max - min) + min;
  }
  
  var interval = setInterval(function() {
  var timeLeft = animationEnd - Date.now();
  
    if (timeLeft <= 0) {
      return clearInterval(interval);
    }
  
    var particleCount = 50 * (timeLeft / duration);
    // since particles fall down, start a bit higher than random
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
  }, 250);
};

// School Pride Effect
var schoolprideEffect = function() {
var end = Date.now() + (30 * 1000);

  // go Buckeyes!
  var colors = ['#bb0000', '#ffffff'];
  
  (function frame() {
    confetti({
      particleCount: 2,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      colors: colors
    });
    confetti({
      particleCount: 2,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      colors: colors
    });
  
    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  }());
};  

// Realistic Look Effect  
var realisticlookEffect = function() {
var count = 200;
var defaults = {
  origin: { y: 0.7 }
};

function fire(particleRatio, opts) {
  confetti(Object.assign({}, defaults, opts, {
    particleCount: Math.floor(count * particleRatio)
  }));
}

fire(0.25, {
  spread: 26,
  startVelocity: 55,
});
fire(0.2, {
  spread: 60,
});
fire(0.35, {
  spread: 100,
  decay: 0.91,
  scalar: 0.8
});
fire(0.1, {
  spread: 120,
  startVelocity: 25,
  decay: 0.92,
  scalar: 1.2
});
fire(0.1, {
  spread: 120,
  startVelocity: 45,
});
};

// Stars Effect
var starsEffect = function() {
var defaults = {
    spread: 360,
    ticks: 50,
    gravity: 0,
    decay: 0.94,
    startVelocity: 30,
    shapes: ['star'],
    colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
  };
  
  function shoot() {
    confetti({
      ...defaults,
      particleCount: 40,
      scalar: 1.2,
      shapes: ['star']
    });
  
    confetti({
      ...defaults,
      particleCount: 10,
      scalar: 0.75,
      shapes: ['circle']
    });
  }
  
  setTimeout(shoot, 0);
  setTimeout(shoot, 100);
  setTimeout(shoot, 200);
};

// Snow Effect   
var snowEffect = function() {
var duration = 30 * 1000;
var animationEnd = Date.now() + duration;
var skew = 1;

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

(function frame() {
  var timeLeft = animationEnd - Date.now();
  var ticks = Math.max(200, 500 * (timeLeft / duration));
  skew = Math.max(0.8, skew - 0.001);

  confetti({
    particleCount: 1,
    startVelocity: 0,
    ticks: ticks,
    origin: {
      x: Math.random(),
      y: (Math.random() * skew) - 0.2
    },
    colors: ['#ffffff'],
    shapes: ['circle'],
    gravity: randomInRange(0.4, 0.6),
    scalar: randomInRange(0.4, 1),
    drift: randomInRange(-0.4, 0.4)
  });

  if (timeLeft > 0) {
    requestAnimationFrame(frame);
  }
}());
};

/* --------------- 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(2024, 0, 1, 0, 0);
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;">2024</h1>`;
    fireworksEffect();
    schoolprideEffect();
    realisticlookEffect();
    starsEffect();
    snowEffect();

  } 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  --------------------- */
  • The JavaScript file includes functions for various confetti effects (fireworks, school pride, realistic look, stars, and snow).
  • The countdown function calculates and displays the time remaining until the specified end date. When the countdown reaches zero, it triggers confetti effects and displays celebratory messages.
  • The script utilizes setInterval to update the countdown every second and initially calls the countdown function.

This project creates an engaging New Year countdown timer with confetti effects for a festive touch. The combination of HTML, CSS, and JavaScript results in an interactive and visually appealing user experience. Users can witness a celebration on the arrival of the new year, complete with dynamic countdown updates and animated confetti effects.

YouTube Video

Download Source Code

Download Files

Don’t forget to share this post!

Follow by Email
Facebook
Twitter
Pinterest
LinkedIn
Share
Instagram
Telegram
WhatsApp

Click Here : To Show Your Support! 😍

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *