How can I set a countdown timer to business close and if closed set a count down timer to business open?

Question

I can't quite figure this logic out....I'm trying to show a count down for "time left until business closed (ie: 7pm PST)....if its passed 7PM i want to show a "time until business open" timer at 10am PST.

The isOpen logic works but I can't figure out how to set the timer countdown thing.

<script>
  function getHourAtLoc(loc, date = new Date()) {
    let f = new Intl.DateTimeFormat("en", {
      hour: "2-digit",
      hour12: false,
      timeZone: loc
    });

    return f.formatToParts(date)[0].value;
  }

  let hour = getHourAtLoc("America/Los_Angeles");
  let isOpen = hour >= 10 && hour < 19;
  let total;
  let hours;
  let minutes;
  let seconds;

  function doCountDownToClose() {
    const endtime = new Date(new Date().setHours(19));
    total = Date.parse(endtime) - Date.parse(new Date());
    seconds = Math.floor((total / 1000) % 60);
    minutes = Math.floor((total / 1000 / 60) % 60);
    hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  }

  function doCountDownToOpen() {
    const endtime = new Date(new Date().setHours(10));
    total = Date.parse(endtime) - Date.parse(new Date());
    seconds = Math.floor((total / 1000) % 60);
    minutes = Math.floor((total / 1000 / 60) % 60);
    hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  }

  let intv;

  if (isOpen) {
    clearInterval(intv);
    intv = setInterval(doCountDownToClose, 1000);
  } else {
    clearInterval(intv);
    intv = setInterval(doCountDownToOpen, 1000);
  }
</script>


<div class="banner">
  {#if isOpen}
    <strong>We are open</strong>
    ...call now for a free consultation:
    <a href="tel:+14086562473">+1 (408) 656-2473</a>
  {:else}
    <strong>We are closed</strong>
    ...call back later for a free consultation:
  {/if}
  {hours}:{minutes}:{seconds}
</div>

Answer 1

Looks like you forgot to set minutes and seconds to 0 for the target datetime ie. when store will open/close

doCountDownToOpen() {
    let t = new Date();
    t.setHours(10);
    t.setMinutes(0)
    t.setSeconds(0)
    const endtime = new Date(t);
    this.total = Date.parse(endtime) - Date.parse(new Date());
    ...
    ..

Same in doCountDownToClose()

---

UPDATE

I was wrong actually we missed the fact that the 2nd date in counter function was a local datetime and not a datetime in destination timezone

total = Date.parse(endtime) - Date.parse(new Date());

Try this instead

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div class="banner" id="app">

  <strong v-if="isOpen">We are open</strong>
  <span v-if="isOpen">...call now for a free consultation:</span>
  <a v-if="isOpen" href="tel:+14086562473">+1 (408) 656-2473</a>

  <strong v-if="!isOpen">We are closed</strong>
  <span v-if="!isOpen">...call back later for a free consultation:</span>


  <span v-if="isOpen">Store closes in : {{hours}}:{{minutes}}:{{seconds}}</span>
  <span v-if="!isOpen">Store opens in : {{hours}}:{{minutes}}:{{seconds}}</span>
</div>




<script>
  new Vue({
    el: '#app',
    data: {
      total: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      intv: 0,
      isOpen: false
    },
    mounted() {
      this.hour = this.getHourAtLoc("America/Los_Angeles");

      this.isOpen = this.hour >= 10 && this.hour < 19;

      if (this.isOpen) {
        clearInterval(this.intv);
        this.intv = setInterval(this.doCountDownToClose, 1000);
      } else {
        clearInterval(this.intv);
        this.intv = setInterval(this.doCountDownToOpen, 1000);
      }
    },
    methods: {
      getHourAtLoc(loc, date = new Date()) {
        let f = new Intl.DateTimeFormat("en", {
          hour: "2-digit",
          hour12: false,
          timeZone: loc
        });

        return f.formatToParts(date)[0].value;
      },

      //GETS DATETIME IN DESTINATION TIMEZONE
      getDateAtLoc(loc, date = new Date()) {
        let f = new Intl.DateTimeFormat("en", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
          timeZone: loc
        });

        var l = f.formatToParts(date);

        var d = new Date(l[4].value, l[0].value - 1, l[2].value, l[6].value, l[8].value, l[10].value);
        return d;
      },

      doCountDownToClose() {
        let a = new Date();
        a.setHours(19);
        a.setMinutes(0)
        a.setSeconds(0)
        const endtime = new Date(a);

        this.total = Date.parse(a) - Date.parse(this.getDateAtLoc("America/Los_Angeles")); // How many ms till 7 PM in LA

        this.seconds = Math.floor((this.total / 1000) % 60);
        this.minutes = Math.floor((this.total / 1000 / 60) % 60);
        this.hours = Math.floor((this.total / (1000 * 60 * 60)) % 24);
      },

      doCountDownToOpen() {
        let a = new Date();

        a.setDate(a.getDate() + 1); //wrap to next day's 10 O'clock
        a.setHours(10);
        a.setMinutes(0)
        a.setSeconds(0)
        const endtime = new Date(a);

        this.total = Date.parse(endtime) - Date.parse(this.getDateAtLoc("America/Los_Angeles")); // How many ms till 10 AM in LA
        this.seconds = Math.floor((this.total / 1000) % 60);
        this.minutes = Math.floor((this.total / 1000 / 60) % 60);
        this.hours = Math.floor((this.total / (1000 * 60 * 60)) % 24);
      }

    }
  })
</script>