This content originally appeared on DEV Community and was authored by Emmanuel Os
Building the count app with JavaScript, but before that, I will highlight the steps we will be taking.
- write our html code
- write our css for styling
- write our JavaScript, to manipulate the data and give us a countdown App.
HTML CODE
<h1>Countdown to 2022</h1>
<div class="countdown-container">
<div class="countdown-value days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-value hour-c">
<p class="big-text" id="hour">0</p>
<span>hours</span>
</div>
<div class="countdown-value minute-c">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="countdown-value seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
from the above code, you can see, how we have written our html code. Now we move to our css for styling.
CSS CODE
* {
box-sizing: border-box;
}
body {
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0;
color: #f4f4f4;
}
h1 {
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
text-transform: uppercase;
font-family: sans-serif;
}
.countdown-container {
display: flex;
}
.big-text {
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 0 2rem;
}
.countdown-value {
text-align: center;
}
.countdown-value span {
font-size: 1.3rem;
}
Now we will move to JavaScript, so we manipulate the data in the html code and make it dynamic.
JavaScript
we will get all the html element using there Id.
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');
then we will choose the date we want to countdown too
const countdown = "1 Jan 2022";
then write our function, where we will bring in our current date and the date will want to countdown too. Do some maths(remember JavaScript have numbers and math object.
function countdownApp() {
const countdownDate = new Date(countdown);
const currentDate = new Date();
const totalseconds = (countdownDate - currentDate) / 1000;
const days = Math.floor(totalseconds / 3600 / 24);
const hour = Math.floor(totalseconds / 3600) % 24;
const mins = Math.floor(totalseconds / 60) %60;
const seconds = Math.floor(totalseconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hour);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
we will format the time, so as to start the countdown accurate
function formatTime(time) {
return time < 10? `0${time}` : time;
}
then we will call the function to kick start and set our interval for the countdown
countdownApp();
setInterval(countdownApp, 1000);
Your code is suppose to look like this in the complete version
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');
const countdown = "1 Jan 2022";
function countdownApp() {
const countdownDate = new Date(countdown);
const currentDate = new Date();
const totalseconds = (countdownDate - currentDate) / 1000;
const days = Math.floor(totalseconds / 3600 / 24);
const hour = Math.floor(totalseconds / 3600) % 24;
const mins = Math.floor(totalseconds / 60) %60;
const seconds = Math.floor(totalseconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hour);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time) {
return time < 10? `0${time}` : time;
}
countdownApp();
setInterval(countdownApp, 1000);
And our countdown App is up and running, counting down to Jan 2022.
*Oh we need to make it responsive for mobile devices
Adding more code to our CSS code
@media screen and (max-width: 600px) {
body {
overflow: hidden;
}
h1 {
font-size: 1.5rem;
font-weight: 800;
}
.countdown-container {
display: flex;
flex-direction: column;
}
.big-text {
font-size: 4rem;
font-weight: normal;
}
.countdown-value span {
margin: 1rem;
}
}
Now is responsive and running.
Thank you
I wish to bring more, as I journey.
This content originally appeared on DEV Community and was authored by Emmanuel Os
Emmanuel Os | Sciencx (2021-04-17T20:10:25+00:00) Building a Countdown App. Retrieved from https://www.scien.cx/2021/04/17/building-a-countdown-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.