dynamically changing countdown value using moment.js

user_193133 0
Viewed 287

this is a code of countdown timer using moment.js library. the code is working without any issues. I am trying an additional feature but can't get it to work. while the countdown is running on the page. a button of Add30Sec when clicked should add 30 seconds to the current countdown . so if current value is 3 minutes 23 seconds when button is clicked it should become 3 minutes 53 seconds.

theCountDown(5);
document.getElementById("myBtn").addEventListener("click", function() {

});

function theCountDown(setMinutes) {
  const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;
  var newDateObj = moment(Date()).add(setMinutes, "m").toDate();
  let countDown = newDateObj.getTime(),
    x = setInterval(function() {
      let now = new Date().getTime(),
        distance = countDown - now;
      (document.getElementById("days").innerText = Math.floor(distance / day)),
      (document.getElementById("hours").innerText = Math.floor(
        (distance % day) / hour
      )),
      (document.getElementById("minutes").innerText = Math.floor(
        (distance % hour) / minute
      )),
      (document.getElementById("seconds").innerText = Math.floor(
        (distance % minute) / second
      ));
      //do something later when date is reached
      if (distance < 0) {
        clearInterval(x);
        $(".container").children().removeClass().addClass("dissappear");
        $(".container2").hide();
        $("body").addClass("green");
        // .removeClass()
        // .addclass('dissappear')
        // 'IT'S MY BIRTHDAY!;
      }
    }, second);
}
.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<button type="button" id="myBtn">Click</button>

<span id="days"></span>

<span id="hours"></span>

<span id="minutes"></span>

<span id="seconds"></span>

<div class="container">Container 1</div>

<div class="container2">Container 2</div>

countdown momentjs jquery javascript
1 Answers

Like this

I dropped the needless moment which gave console warnings anyway

var countDown;
theCountDown(5);
document.getElementById("myBtn").addEventListener("click", function() {
  countDown += 30000;
  console.log(new Date(countDown))
});

function theCountDown(setMinutes) {
  const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;
  let newDateObj = new Date();
  newDateObj.setMinutes(newDateObj.getMinutes()+setMinutes)
  countDown = newDateObj.getTime(),
    x = setInterval(function() {
      let now = new Date().getTime(),
        distance = window.countDown - now;
      (document.getElementById("days").innerText = Math.floor(distance / day)),
      (document.getElementById("hours").innerText = Math.floor(
        (distance % day) / hour
      )),
      (document.getElementById("minutes").innerText = Math.floor(
        (distance % hour) / minute
      )),
      (document.getElementById("seconds").innerText = Math.floor(
        (distance % minute) / second
      ));
      //do something later when date is reached
      if (distance < 0) {
        clearInterval(x);
        $(".container").children().removeClass().addClass("dissappear");
        $(".container2").hide();
        $("body").addClass("green");
        // .removeClass()
        // .addclass('dissappear')
        // 'IT'S MY BIRTHDAY!;
      }
    }, second);
}
.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<button type="button" id="myBtn">Click</button>

<span id="days"></span>

<span id="hours"></span>

<span id="minutes"></span>

<span id="seconds"></span>

<div class="container">Container 1</div>

<div class="container2">Container 2</div>

user_2957830
Related