Uncategorized

How to create a Count Down Timer using Java Script

Tutorial Description :

In this Tutorial we will create a Count Down Timer using Java Script. As a example Web page I created the Landing page them of DOOM Eternal by using HTML and CSS.

Img:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Doom Eternal Count Down</title>
  </head>
  <body>
    <main>
      <section class="CountDown">
        <p class="Date">3.20.20</p>
        <p id="Timer" class="Date"></p>
      </section>
    </main>
    <script src="app.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}
main {
  background: url(/img/1025036.jpg) no-repeat center center/cover;
  height: 100vh;
  width: 100%;
}
.CountDown {
  position: relative;
  max-width: 600px;
  margin: auto;
  top: 15vh;
}
.Date {
  background-color: rgba(15, 15, 15, 0.8);
  color: white;
  font-size: 2rem;
  text-shadow: 2px 3px 10px red;
  width: 400px;
  margin: auto;
  padding: 0.5rem;
  letter-spacing: 12px;
  text-align: center;
  border-radius: 4px;
}
#Timer {
  text-align: center;
  border-radius: 3px;
  border-top: 1px solid red;
}

JS:

// Set the date we are counting down to

const countDownDate = new Date("Mar 18, 2020 20:00:00").getTime();

// Update the count down timer 1 sec

const time = setInterval(function() {
  // get today date and time
  const now = new Date().getTime();

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

  // Calculate time for Days , hours , minutes and sec

  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
  document.getElementById("Timer").innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  // if the Countdown is over , display text

  if (distance < 0) {
    clearInterval(time);
    document.getElementById("Timer").innerHTML = "The Doom Slayer has Arrived";
  }
}, 1000);

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

  • Basic PC/Mac Knowledge
  • Beginner Curiosity

Description

This is a beginner friendly course. This course will tech you the Foundations of Web Development. This a more practical orientate Course. Aldo we will start up slow with some basic definitions, the main focus here is to have as much as possible hands on experience. Learning by doing is the key word. That means Examples, Assignments and Exercises!

At this point I would like to invite you to join me on this journey and enrich yourself with the foundations of web development. In this Course You will learn Modern HTML 5, CSS 3, and JavaScript, and through applying them you will be able to building from Easy to progressively more complex responsive Responsive Web Pages.

Throughout the course we cover tons of tools and technologies including:

  • HTML5
  • CSS3
  • CSS FelxBox
  • CSS Grid Layout
  • Projects
  • SASS
  • JavaScript
  • DOM Manipulation
  • JSON
  • Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

1. This is a hands-on Learning by doing Course. This means that we are going to start up Slowly with basic definitions in HTML and CSS and then we will combine them together by building the structure and applying design to our sites. After that we will apply JS in order to make the Site do Thinks.

2. Is that I will be constantly Updating the Content with New Documentation, Examples and Exercises in order to bring you as much value as possible. So you can always lean beck on this Course if you want to refresh your memory about something.

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

  • Beginner Web Developers
  • Beginner Web Designers
  • Beginner HTML
  • Beginner CSS
  • Beginner SASS / SCSS
  • Beginner JavaScript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: