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