JavaScript Trying to change my countdown timer

[ChristmasRocks]

I have a Christmas countdown and would like to change the timer to a July 4th timer. I've tried to change the dates in the script but haven't had any luck. Was wondering if someone could give me a hand. Thanks!

const days = document.getElementById('days'),
      hours = document.getElementById('hours'),
      minutes = document.getElementById('minutes'),
      seconds = document.getElementById('seconds');

setInterval(() => {
    findDate();
});

function findDate () {
    let currentTime = new Date(),
    christmasYear = currentTime.getFullYear();

    //getMonth() method returns the month from 0 to 11
    if(currentTime.getMonth() == 11 && currentTime.getDate() > 25){
        christmasYear += 1;
    }
    let christmasTime = new Date(christmasYear, 11, 25);
    let dateDiff = Math.floor(christmasTime - currentTime);

    let DAYS = 0 , HOURS = 0, MINUTES = 0, SECONDS = 0;

    if(currentTime.getMonth( ) !== 11 || (currentTime.getMonth() == 11 && currentTime.getDate() !== 25)) {
        DAYS = Math.floor(dateDiff / (1000 * 60 *60 *24));
        HOURS = Math.floor((dateDiff) % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
        MINUTES = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
        SECONDS = Math.floor((dateDiff) % (1000 * 60) / 1000);
    }
   displayDate(setZero(DAYS), setZero(HOURS),setZero(MINUTES),setZero(SECONDS))
}

function displayDate(d,h,m,s) {
    days.innerHTML = d;
    hours.innerHTML = h;
    minutes.innerHTML = m;
    seconds.innerHTML = s;
}

function setZero(timeValue) {
    if(timeValue < 10){
        timeValue = "0" + timeValue;
    }
    return timeValue;
}

 

[Johna]

Hi there, you need to change the date in both the christmasTime variable and the conditional before it:

if(currentTime.getMonth() >= 6 && currentTime.getDate() > 4){
    christmasYear += 1
}
let christmasTime = new Date(christmasYear, 6, 4);

Here's a more generalised version of your code:

function setZero(timeValue) {
  if(timeValue < 10){
    timeValue = "0" + timeValue;
  }
  return timeValue;
}

function displayDate(d,h,m,s) {
  document.getElementById("days").innerHTML = d;
  document.getElementById("hours").innerHTML = h;
  document.getElementById("minutes").innerHTML = m;
  document.getElementById("seconds").innerHTML = s;
}

function findDate(eventMonth, eventDay) {
  const currentDate = new Date();
  const eventYear = currentDate.getMonth() >= eventMonth
                    && currentDate.getDate() >= eventDay
                    ? currentDate.getFullYear() + 1
                    : currentDate.getFullYear();
  const eventDate = new Date(eventYear, eventMonth, eventDay);
  const dateDiff = Math.floor(eventDate - currentDate);

  let DAYS = 0 , HOURS = 0, MINUTES = 0, SECONDS = 0;

  if (currentDate.getMonth() !== eventMonth
      || (currentDate.getMonth() === eventMonth
          && currentDate.getDate() !== eventDay)) {
    DAYS = Math.floor(dateDiff / (1000 * 60 *60 * 24));
    HOURS = Math.floor((dateDiff) % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
    MINUTES = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
    SECONDS = Math.floor((dateDiff) % (1000 * 60) / 1000);
  }
  displayDate(setZero(DAYS), setZero(HOURS),setZero(MINUTES),setZero(SECONDS))
}

setInterval(() => {
  findDate(6, 4);
}, 1000);

 

[Zakwan@MTH]

you just need to change the target date for the counter

const days = document.getElementById('days'),
      hours = document.getElementById('hours'),
      minutes = document.getElementById('minutes'),
      seconds = document.getElementById('seconds');

setInterval(() => {
    findDate();
});

function findDate() {
    let currentTime = new Date(),
    julyFourthYear = currentTime.getFullYear();

    // Check if July 4th has already passed this year
    if(currentTime.getMonth() == 6 && currentTime.getDate() > 4){
        julyFourthYear += 1;  // Move to next year if already passed
    }
    let julyFourthTime = new Date(julyFourthYear, 6, 4); // Month 6 is July (0-based indexing)
    let dateDiff = Math.floor(julyFourthTime - currentTime);

    let DAYS = 0, HOURS = 0, MINUTES = 0, SECONDS = 0;

    if(currentTime.getMonth() !== 6 || (currentTime.getMonth() == 6 && currentTime.getDate() !== 4)) {
        DAYS = Math.floor(dateDiff / (1000 * 60 * 60 * 24));
        HOURS = Math.floor((dateDiff) % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
        MINUTES = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
        SECONDS = Math.floor((dateDiff) % (1000 * 60) / 1000);
    }
    displayDate(setZero(DAYS), setZero(HOURS), setZero(MINUTES), setZero(SECONDS));
}

function displayDate(d, h, m, s) {
    days.innerHTML = d;
    hours.innerHTML = h;
    minutes.innerHTML = m;
    seconds.innerHTML = s;
}

function setZero(timeValue) {
    if(timeValue < 10){
        timeValue = "0" + timeValue;
    }
    return timeValue;
}