Changing a HTML element at a certain time and date-CodePudding

I have an open and closed indicator (Thanks to those who helped me!) that shows I am open from 8:00 AM to 10:00 PM and from 10:00 PM to 8:00 AM I am closed, but it shows this even on a weekend when I am not open. Can you help me make the Javascript say I am closed when it is a weekend and on a holiday like December 24-25? Below will be my current code. Thanks!

Javascript:

var messageElement = document.getElementById("message");
var circleElement = document.getElementById("circle");

const refreshStatus = () => {
  // Set the current time
  let currentDate = new Date().getHours();
  // If the time is between 8 am and 10 pm
  if (currentDate >= 8 && currentDate <= 21) {
    // Update text and add classes
    messageElement.innerHTML = "We are open until 10 PM";
    circleElement.className = 'open-circle';
    messageElement.className = 'open-p';
  } else {
    // 21 pm to 8 am
    messageElement.innerHTML = "We are closed until 8 AM";
    circleElement.className = 'closed-circle';
    messageElement.className = 'closed-p';
  }
}

// run when starting
refreshStatus();

// updates every 8 seconds
setInterval(refreshStatus, 8000);

CSS:

/* Start indicator CSS */

.open-circle {
  position: relative;
  top: 23rem;
  height: 1.5625rem;
  width: 1.5625rem;
  background-color: #00BF13;
  border-radius: 50%;
  display: inline-block;
}

.open-p {
  position: relative;
  top: 23rem;
  color: #00BF13;
  font-weight: bold;
  display: inline-block;
  width: 8rem;
}

.closed-circle {
  position: relative;
  top: 23rem;
  height: 1.5625rem;
  width: 1.5625rem;
  background-color: #ea001d;
  border-radius: 50%;
  display: inline-block;
}

.closed-p {
  position: relative;
  top: 23rem;
  color: #ea001d;
  font-weight: bold;
  display: inline-block;
  width: 8rem;
}

/* End indicator CSS */

HTML:

<!-- Start status indicator -->

<div id="circle"></div>
<p id="message">We are open until 10 PM</p>
<script src="js/open-closed-indicator.js"></script>

<!-- End status indicator -->

CodePudding user response：

You can achieve this using getDate() method for the Christmas period and use getDay() to check if it's a weekend.

Days in JS are 0 = sunday and 6 = Saturday. Refer to the comments in each line for more info.

For Christmas period dates you need to check whether it's the 11 months which is December and the date is 24 or 25th December.

To show different closed messages I am using JS ternary operator which helps to write less code and get the same results.

Live working demo.

var messageElement = document.getElementById("message");
var circleElement = document.getElementById("circle");

const refreshStatus = () => {
  // Get dates/time/hours
  let today = new Date(); //today date
  let currentTime = today.getHours(); //get hours
  let areWeekends = (today.getDay() == 6 || today.getDay() == 0) //get weekends
  let santaDays = (today.getMonth() == 11 && (today.getDate() == 24 || today.getDate() == 25)) //get christmas dates

  //Show available if this matches
  if (currentTime >= 8 && currentTime <= 21 && !areWeekends && !santaDays) {
    // Update text and add classes
    messageElement.innerHTML = "We are open until 10 PM";
    circleElement.className = 'open-circle';
    messageElement.className = 'open-p';
  } else {
    //change text based on weekend / christmas or not - Using ternary operator Javascript
    messageElement.innerHTML = `We are closed  ${areWeekends ? ' - weekend' : santaDays ? 'Christmas' : 'until 8am'}`;
    circleElement.className = 'closed-circle';
    messageElement.className = 'closed-p';
  }
}

// run when starting
refreshStatus();

// updates every 8 seconds
setInterval(refreshStatus, 8000);

/* Start indicator CSS */

.open-circle {
  position: relative;
  top: 23rem;
  height: 1.5625rem;
  width: 1.5625rem;
  background-color: #00BF13;
  border-radius: 50%;
  display: inline-block;
}

.open-p {
  position: relative;
  top: 23rem;
  color: #00BF13;
  font-weight: bold;
  display: inline-block;
  width: 8rem;
}

.closed-circle {
  position: relative;
  top: 23rem;
  height: 1.5625rem;
  width: 1.5625rem;
  background-color: #ea001d;
  border-radius: 50%;
  display: inline-block;
}

.closed-p {
  position: relative;
  top: 23rem;
  color: #ea001d;
  font-weight: bold;
  display: inline-block;
  width: 8rem;
}


/* End indicator CSS */

<!-- Start status indicator -->

<div id="circle"></div>
<p id="message">We are open until 10 PM</p>
<!-- //<script src="js/open-closed-indicator.js"></script>
 -->
<!-- End status indicator -->

CodePudding user response：

try this


// set your holidays
const holidays = [
    {'2022-12-25' : 'christmas'},
    {'2022-01-29' : 'testHoliday'},
]

const refreshStatus = () => {


    // added code
    let date = new Date();
    let dayOfWeek = date.getDay(); // 6: saturday, 0: sunday
    let today = date.getFullYear()   '-'   String(date.getMonth() 1).padStart(2, '0')   '-'   date.getDate(); // 2022-01-29
    let isHoliday = holidays.filter(h => h[today]).length > 0 || dayOfWeek == 6 || dayOfWeek == 9;
    //

    // Set the current time
    let currentDate = date.getHours();
    // If the time is between 8 am and 10 pm

    if (currentDate >= 8 && currentDate <= 21 && !isHoliday) {
        // Update text and add classes
        messageElement.innerHTML = "We are open until 10 PM";
        circleElement.className = "open-circle";
        messageElement.className = "open-p";
    } else {
        // 21 pm to 8 am
        messageElement.innerHTML = "We are closed until 8 AM";
        circleElement.className = "closed-circle";
        messageElement.className = "closed-p";
    }
};