Hi there, today I made a reverse timer in JS that counts down to the end of my #100daysofcode challenge. The code is very simple:
function getTimeRemaining(endtime) {
let t = Date.parse(endtime) - Date.parse(new Date());
let seconds = Math.floor((t / 1000) % 60);
let minutes = Math.floor((t / 1000 / 60) % 60);
let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
let days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
days,
hours,
minutes,
seconds,
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
function updateClock() {
let t = getTimeRemaining(endtime);
clock.innerHTML = `
<p style="font-size: 1.2em; font-weight: 400">
${t.days}d ${t.hours}h ${t.minutes}m ${t.seconds}s
</p>
`;
if (t.total <= 0) {
clearInterval(interval);
}
}
updateClock();
let interval = setInterval(updateClock, 1000);
}
deadline = "April 10 2021 00:00:00 GMT+0300";
initializeClock("countdown", deadline);
getTimeRemaining uses JavaScript Date Object to evaluate, how much time is left on the date the endtime date and initializeClock function uses manipulates DOM to add these date to HTML. It has two arguments: id: the id of your HTML element that contains the timer and endtime: final date of timer.
Evening Update: Created list of latest blog posts using JS:
fetch("https://dev.to/api/articles?username=dartcoder").then(function (
response
) {
if (response.status !== 200) {
console.log(`Error! Status Code: ${response.status}`);
}
response
.json()
.then(function (data) {
let posts = [];
data.slice(0, 5).forEach((item) => {
posts.push({
title: item.title,
url: item.url,
date: item.readable_publish_date,
});
});
const postsSection = document.getElementById("posts");
postsSection.innerHTML = `
<p>
<span style="color: #808080">${posts[0].date}</span>
<a href="${posts[0].url}">${posts[0].title}</a>
</p>
<p>
<span style="color: #808080">${posts[1].date}</span>
<a href="${posts[1].url}">${posts[1].title}</a>
</p>
<p>
<span style="color: #808080">${posts[2].date}</span>
<a href="${posts[2].url}">${posts[2].title}</a>
</p>
<p>
<span style="color: #808080">${posts[3].date}</span>
<a href="${posts[3].url}">${posts[3].title}</a>
</p>
<p>
<span style="color: #808080">${posts[4].date}</span>
<a href="${posts[4].url}">${posts[4].title}</a>
</p>
`;
})
.catch((error) => console.log(`Error:\n${error}`));
});
P.S. Is there any way to do it shorter? Because I know only this way but it takes really much place.
Discussion (0)