Home
Programming

Countdown To New Year 2021 With Vanilla JavaScript

Syiainfoku make a Countdown To New Year 2021 With Vanilla JavaScript

Countdown To New Year 2021 with Vanilla JavaScript

Hello everyone, I am the founder of Syiainfoku. Today on hitoriblogging you will learn how to create a 2021 New Year Countdown With Vanilla JavaScript.

Countdown in vanilla JavaScript or JS is a Mini Project, and very useful to train you, if you are just starting to learn JS. And many people suggest you to practice creating some  Mini Projects JS so that you understand JS better.

Preview Countdown To New Year 2021

Preview Countdown To New Year 2021

In the Countdown design that I made, there will be several elements, namely:

  1. Background (can be changed according to your wishes)
  2. A few sentences
  3. Countdown to 2021
  4. Watermark
  5. Social Media Button
  6. And there is something special if the countdown has reached January 1, 2021
  7. This Countdown is also Responsive on all screen sizes of Mobile or Laptop.

Source Code and Brief Explanation

To make this program [Countdown To New Year 2021 with Vanilla JavaScript]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download this Countdown source code file from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Countdown New Year 2021 | hitoricoding</title>
  <link rel="stylesheet" href="./assets/style.css" />
  <script src="https://kit.fontawesome.com/11aee9d162.js"></script>
</head>

<body>
  <div class="main">
    <h1 id="title">&#8220;Get Ready For New Year 2021&#8221;</h1>

    <!-- timer area -->
    <ul>
      <li>
        <p id="days"></p>
      </li>
      <li>:</li>
      <li>
        <p id="hours"></p>
      </li>
      <li>:</li>
      <li>
        <p id="minutes"></p>
      </li>
      <li>:</li>
      <li>
        <p id="seconds">02</p>
      </li>
    </ul>

    <!-- footer area -->
    <div class="main-footer">
      <div class="brands">
        <p>Design by : <span><a href="https://hitoriblogging.blogspot.com" target="_blank">hitoricoding</a></span></p>
      </div>
      <div class="social">
        <a href="https://web.facebook.com/hitoricoding" target="_blank"><i class="fab fa-facebook-f"></i></a>
        <a href="https://hitoriblogging.blogspot.com/" target="_blank"><i class="fab fa-blogger-b"></i></a>
        <a href="https://github.com/hitoricoding" target="_blank"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </div>

  <script src="./assets/main.js" charset="utf-8"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  width: 100%;
  background-image: url("../image/bg.png");
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  z-index: 10;
  position: relative;
  height: 550px;
  width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(19, 19, 19, 0.35);
  box-shadow: 0.1px 4px 15px 2px rgba(221, 163, 54, 1);
}

.main #title {
  color: #ffffff;
  font-size: 50px;
  letter-spacing: 2px;
}

.main ul {
  margin-top: 80px;
  width: 80%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 20px 0;
  border: 3px solid rgba(213, 137, 66, 0.85);
}

.main ul li {
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  margin: 0 35px;
  letter-spacing: 1px;
}

.main ul li p {
  color: rgba(255, 171, 102, 0.75);
  font-size: 35px;
  font-weight: bold;
  text-transform: capitalize;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
  -moz-box-reflect: below 1px linear-gradient(transparent, #0004);
}

/* Footer Area */
.main-footer {
  position: relative;
  margin-top: 80px;
}

.brands {
  font-size: 20px;
  width: 100%;
  color: #fff;
}

.brands a {
  text-decoration: none;
  color: #ffa226;
}

.brands a:hover {
  text-decoration: underline;
}

.social a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  margin: 10px 10px 0 0;
  font-size: 15px
}

.social a:hover {
  color: #ffa226;
}

/* media styling */
@media screen and (max-width: 500px) {
  .main #title{
    text-align: center;
    font-size: 25px;
    letter-spacing: 2px;
  }
  .main ul{
    margin-top: 30px;
    flex-direction: column;
    width: 60%;
    height: 350px;
  }
  .main ul li{
    font-size: 15px;
    margin: 5px 0;
  }
  .main ul li p{
    font-size: 20px;
  }
  .brands{
    font-size: 15px;
  }
  .social a{
    font-size: 13px;
  }
}

Finally, create a JS file with the name main.js and paste the given code in your CSS file. Remember, you must create a file with a .js extension.

let days_show = document.querySelector('#days');
let hours_show = document.querySelector('#hours');
let minutes_show = document.querySelector('#minutes');
let seconds_show = document.querySelector('#seconds');
let ul = document.querySelector("ul");
let title = document.querySelector('#title');

//set time
let new_year_date = new Date('Jan 1, 2021 00:00:00').getTime();

//create a function (update)
let timer = setInterval(update, 1000);

//This function will updated every 1 second
function update() {

  //present time
  let present_time = new Date().getTime();

  //remaining time
  let remaining_time = new_year_date - present_time;

  //count remaining days, hours, minutes & seconds
  let days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
  let hours = Math.floor(remaining_time % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
  let minutes = Math.floor(remaining_time % (1000 * 60 * 60) / (1000 * 60));
  let seconds = Math.floor(remaining_time % (1000 * 60) / (1000));

  //checking odd number
  if (seconds % 2 !== 0) {
    seconds_show.style.color = "#fff";
  } else {
    seconds_show.style.color = "rgba(255, 171, 102, 0.75)";
  }

  //show time
  days_show.innerHTML = days + " d";
  hours_show.innerHTML = hours + " h";
  minutes_show.innerHTML = minutes + " m";
  seconds_show.innerHTML = seconds + " s";

  //function will run when time is done
  if (remaining_time <= 0) {
    clearInterval(timer);
    ul.style.display = "none";
    title.innerHTML = "Happy New Year 2021&nbsp;&#128522;";
  }

}

That's it, now you have successfully generated a Countdown To New Year 2021 with Vanilla JavaScript If your code is not working or you are facing any error/problem please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment