Build an eCommerce Countdown TIMER using HTML CSS and JavaScript

In this web development tutorial we are goin to build a eCommerce Countdown timer using HTML5 CSS3 & JavaScript. This countdown timer is trying to simulate a promotion on the website witch will expire after a designated time.

This Web application will use the following javascript technologies :

DOM Selectors:

• getElementsById
• querySelector
• querySelectorAll

DOM elements:

• element.innerHTML
• element.style
• element.classList.toggle
• element.classList.remove

Variables

• let
• const

You can copy the entire code for this project here>

Source Code:

Copy in the code in you code editor. You should also watch video in order to get a better understanding over project!

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-worning">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">eCommerce</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a
                class="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
                >Disabled</a
              >
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
    <header>
      <div class="offer-container">
        <h2 class="offer-title">Winter is over, come on Summer !</h2>
        <p class="offer-description">
          Every thing must go starting from as low as $9.99
        </p>
        <button class="btn btn-danger">Buy now</button>
      </div>
      <div class="countdown-container">
        <h6>
          Last day to save!| Don’t miss out on special savings — shirts start at
          just €12.99.
        </h6>
        <p id="offer"></p>
      </div>
    </header>

CSS

* {
  margin: 0;
  padding: 0;
}
.navbar {
  overflow: hidden;
}
header {
  height: 94vh;
  background-color: red;
  background: url(/img/woman.jpg) center/cover no-repeat;
  position: relative;
}
.offer-container {
  width: 300px;
  background-color: #fff;
  padding: 1rem 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: absolute;
  top: 10vh;
  right: 10vw;
}
.btn:hover {
  background-color: pink;
}
.countdown-container {
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  font-size: 2rem;
  text-align: center;
}
#offer {
  background-color: #fff;
  width: 100%;
  font-weight: 600;
  animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 401px) {
  .offer-container {
    display: none;
  }
}

JS

const countDownDate = new Date("Feb 10, 2021 07:37:25").getTime();


const time = setInterval(() => {
  // *Get today's date and time
  const now = new Date().getTime();

  // *Find the distance between now and the count down date
  const distance = countDownDate - now;


  
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element 
  let offer = document.getElementById("offer");
  offer.innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
  //   offer.style.color = "red";
  // If the count down is over, write some text
  if (distance < 0) {
    clearInterval(time);
    document.getElementById("offer").innerHTML = "Offer EXPIRED";
  }
}, 1000);

Below you can find the video for this tutorial fi you wish to get more detailed information abut this project.

Full Course!

This project is part of the : ” 30 HTML, CSS & JavaScript projects in 30 Days for Beginners” course. Click the link!

If you like this project then try out the next one: https://wp.me/pakj3t-156