HTML5 – Example New Year – Countdown. – free-tutorials.org with free tutorials and source code

This simple tutorial comes with a simple example of New Year – Countdown.
The example uses the color of the year 2019 the PANTONE 16-1546 Living Coral.
The result of this example can be seen on my codepen account:

See the Pen New Year – Countdown by Catalin George Festila (@catafest) on CodePen.

The example uses the CSS file to change colors and align the text by tags.

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgb(0, 0, 0);
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 100%
  );
}
p {
  text-align: center;
  color:rgba(250, 114, 104, 0.92);
}
.label_year {
  color:rgba(250, 114, 104, 0.92);
  font-size: 3rem;
  justify-content: center;
  display: flex;
}

.countdown {
  color:rgba(250, 114, 104, 0.92);
  font-size: 1.5rem;
  text-align: center;
}

.countdown div{
    float:center;
}

body {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

background: rgb(0, 0, 0);

background: radial-gradient(

circle,

rgba(0, 0, 0, 0) 100%

);

}

p {

text-align: center;

color:rgba(250, 114, 104, 0.92);

}

.label_year {

color:rgba(250, 114, 104, 0.92);

font-size: 3rem;

justify-content: center;

display: flex;

}

.countdown {

color:rgba(250, 114, 104, 0.92);

font-size: 1.5rem;

text-align: center;

}

.countdown div{

float:center;

}

The HTML5 is a simple one:

<p>ANNOUNCING THE PANTONE COLOR OF THE YEAR 2019
PANTONE 16-1546 Living Coral</p>
<h1 class="label_year">New Year - Countdown</h1>
<div class="countdown">
  <div>Days left: </div>
  <div id="day">0</div>
  <div>Hours left: </div>
  <div id="hour">0</div>
  <div>Minutes left: </div>
	<div id="minute">0</div>
  <div>Seconds left: </div>
  <div id="second">0</div>
</div>

<p>ANNOUNCING THE PANTONE COLOR OF THE YEAR 2019

PANTONE 16-1546 Living Coral</p>

<h1 class="label_year">New Year - Countdown</h1>

<div>Hours left: </div>

<div>Minutes left: </div>

<div>Seconds left: </div>

</div>

The javascript source code can be a little more complicated but if you take a closer look then is not very hard to understand it.

const new_year = new Date("Jan 1, 2020 00:00:00");

const day = document.getElementById("day");
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");

let countdown = setInterval(() => {
  const now   = new Date();
  const des   = new_year.getTime() - now.getTime();
  const days  = Math.floor(des / (1000 * 60 * 60 * 24));
  const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
  const secs  = Math.floor((des % (1000 * 60)) / 1000);

  day.innerHTML = getTrueNumber(days);
  hour.innerHTML = getTrueNumber(hours);
  minute.innerHTML = getTrueNumber(mins);
  second.innerHTML = getTrueNumber(secs);

  if (countdown <= 0) clearInterval(countdown);
}, 1000);

const getTrueNumber = nr => (nr < 10 ? "0" + nr : nr);

const new_year = new Date("Jan 1, 2020 00:00:00");

const day = document.getElementById("day");

const hour = document.getElementById("hour");

const minute = document.getElementById("minute");

const second = document.getElementById("second");

let countdown = setInterval(() => {

const now = new Date();

const des = new_year.getTime() - now.getTime();

const days = Math.floor(des / (1000 * 60 * 60 * 24));

const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const mins = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));

const secs = Math.floor((des % (1000 * 60)) / 1000);

day.innerHTML = getTrueNumber(days);

hour.innerHTML = getTrueNumber(hours);

minute.innerHTML = getTrueNumber(mins);

second.innerHTML = getTrueNumber(secs);

if (countdown <= 0) clearInterval(countdown);

}, 1000);

const getTrueNumber = nr => (nr < 10 ? "0" + nr : nr);

Leave a Reply Cancel reply