how to show months in countdown timer and then change the format using simple js for a webpage

Question

I have to Make a countdown page for the upcoming ICC cricket world cup event that shows remaining days in below format.

Format #1: 01 months 10 days 10 hours

Format 2: 01 hours 20 minute 10 seconds (If <2 days remaining)

and the below code is what i have right now. How do i solve this, please help:

body {
   background-image: url("https://www.somersetcountycc.co.uk/wp-content/uploads/2018/09/getimage.png");
   background-size: 100%;
  
  }

  .countdownContainer{
   position: absolute;;
   top: 50%;
   left: 50%;
   transform : translateX(-50%) translateY(-50%);
   text-align: center;
   background: rgba(221, 221, 221, 0.8);
   border: 1px solid #999;
   padding: 10px;
   box-shadow: 0 0 5px 3px #ccc;
  }

  .info {
   font-size: 50px;
  }

<!DOCTYPE html>
<html>
 <head>
  <title>ICC World cup 2019 countdown</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <table class="countdownContainer" id="mytable">
   <tr class="info">
    <td colspan="5">Countdown to ICC World Cup 2019:</td>
   </tr>
   <tr class="info">
    <td id="months"></td>
    <td id="days"></td>
    <td id="hours"></td>
    <td id="minutes"></td>
    <td id="seconds"></td>
   </tr>
   <tr>
    <td>Months</td>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td>Seconds</td>
   </tr>
  </table>
  <script type="text/javascript">

   function countdown(){
    let now = new Date();
    let eventDate = new Date("May 30, 2019 15:00:00");

    let currentTiime = now.getTime();
    let eventTime = eventDate.getTime();

    let remTime = eventTime - currentTiime;

    let s = Math.floor(remTime / 1000);
    let m = Math.floor(s / 60);
    let h = Math.floor(m / 60);
    let d = Math.floor(h / 24);
    let mo = Math.floor(d / 30);

    mo %= 30;
    h %= 24;
    m %= 60;
    s %= 60;

    mo = (mo < 10) ? "0"+mo : mo;
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    if(d>2){
     document.getElementById("months").textContent = mo;
     document.getElementById("days").textContent = d;
     document.getElementById("hours").textContent = h;
    }
    else{
     document.getElementById("hours").textContent = h;
     document.getElementById("minutes").textContent = m;
     document.getElementById("seconds").textContent = s;
    }

    setTimeout(countdown, 1000);
   }

   countdown();
  </script>
 </body>
</html>

I have modified the code again...

Hello oswald, your calculation is just wrong. See [https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript](https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript) for examples of how to get the difference between two dates. — Olafant, Feb 22 '19 at 09:46
@Olafant Thanks for the link, but i dont think my calculation is entirely wrong, i have got the number of days correct only when i am including the number of months. — oswald, Feb 22 '19 at 10:03
@Olafant could you help me out with calculation part... i didn't quite understand what was done from the link you provided... I am bound by condition that i cannot use any third party library, only pure js — oswald, Feb 22 '19 at 10:29

Constantin Chirila · Answer 1 · 2019-02-22T09:46:02.670

Here is my solution! You will have to use MomentJS and Moment.js Date Range Plugin: http://momentjs.com/

https://github.com/codebox/moment-precise-range

In the example below they are imported but you can go to those links and find CDNs or minified versions of the library.

Here is also the codesandbox of the LIVE example: https://codesandbox.io/s/98y5800y34

import moment from "moment";
import { preciseDiff } from "moment-precise-range-plugin";

function countdown() {
  var now = new Date();
  var eventDate = new Date(now.getFullYear(), 1, 23);

  var currentTiime = now.getTime();
  var eventTime = eventDate.getTime();

  var remTime = eventTime - currentTiime;

  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  var d = Math.floor(h / 24);
  var starts = moment(eventDate);
  var ends = moment(now);
  var duration = moment.duration(ends.diff(starts));
  var diff = moment.preciseDiff(starts, ends, true);

  h %= 24;
  m %= 60;
  s %= 60;

  h = h < 10 ? "0" + h : h;
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;

  if (d >= 2) {
    document.querySelector(".info1").style.cssText = "display:none";
    document.querySelector(".descrip1").style.cssText = "display:none";
    document.getElementById("f1months").textContent = diff.months;
    document.getElementById("f1days").textContent = diff.days;
    document.getElementById("f1hours").textContent = diff.hours;
  } else {
    document.querySelector(".info2").style.cssText = "display:none";
    document.querySelector(".descrip2").style.cssText = "display:none";
    document.getElementById("days").textContent = d;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;
  }

  // setTimeout(countdown, 1000);
}

countdown();

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <table class="countdownContainer">
      <tr class="info">
        <td colspan="4">Countdown to ICC World Cup 2019:</td>
      </tr>
      <tr class="info1">
        <td id="days">120</td>
        <td id="hours">4</td>
        <td id="minutes">12</td>
        <td id="seconds">22</td>
      </tr>
      <tr class="descrip2">
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
      </tr>

      <tr class="info2">
        <td id="f1months">120</td>
        <td id="f1days">4</td>
        <td id="f1hours">12</td>
        <td></td>
      </tr>
      <tr class="descrip2">
        <td>months</td>
        <td>days</td>
        <td>hours</td>
        <td></td>
      </tr>
    </table>

    <script src="src/index.js"></script>
  </body>
</html>

thanks for the code, but it still does not show the number of months left. In the first format, i need to show month, days and hours and once the number of days reaches to less than two days, then the format should change to hours, minutes, seconds. — oswald, Feb 22 '19 at 08:51
You need to post your html code. Because the function above it returns what it needs too, but i dont have the html to see what is wrong from that point of view. — Constantin Chirila, Feb 22 '19 at 08:54
I have updated the question with the html code also. Can you please look into it ? — oswald, Feb 22 '19 at 09:09
@oswald I have updated the answer and it should have both formats. Just change the date of the `eventDate` accordingly to test it :) — Constantin Chirila, Feb 22 '19 at 09:49
Thank you for the code, but i am not allowed to use any third party library, only pure javascript... can this be done using only pure javascript ? — oswald, Feb 22 '19 at 09:59
It can, it is just a longer time, mainly because you have to calculate time depending of what months are in-between, because you cant just assume a month has 31 days. It is a bit more time consuming, so maybe others will be able to provide an answer. — Constantin Chirila, Feb 22 '19 at 10:06
Thanks for your help btw! you really helped me to progress ! — oswald, Feb 22 '19 at 10:27

how to show months in countdown timer and then change the format using simple js for a webpage

1 Answers1