Active list element depending on day of week

Question

I'm currently working on a website utilizing HTML, JavaScript and CSS(Big woop - I know).

I'm running bootstrap to learn how to make a website a bit more responsive. I'm currently trying to learn the different date functions in JavaScript and want my website to highlight different list-elements depending on what day of the week it is.

                <ul class="list-group">
                    <li class="list-group-item" >Mondays: 09:00 - 16:00</li>
                    <li class="list-group-item">Tuesdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Wednesdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Thursdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Fridays: 09:00 - 12:00</li>
                    <li class="list-group-item">Saturdays: Closed</li>
                    <li class="list-group-item">Sundays: Closed</li>
                </ul>

The list itself is a standard unordered list which displays opening hours and what I want to create through JavaScript is that if the website senses that today is Monday it'll highlight Monday.

I have written the following code to get the website to check date:

function daysOpen(){

let daysOfWeek = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dateObject = new Date()
let today = dateObject.getDay();
//console.log("Today is: " + today); // generates output to console
//console.log(daysOfWeek[today]) <- This is used for debugging

if(daysOfWeek[today] === 'Saturday' || daysOfWeek[today] ==='Sunday'){ // This piece of code lets me check date from
    //system time(?) and compare against my array to see if today is open or closed
    console.log("Store is closed")
}
else
{
    console.log("The store is open")
}

}

This is where I get stuck. I'm not sure how to use the if-statements to highlight the list elements and I haven't been able to find a good example or guide online. The most similar question I could find was this: text depend on time of day and day of week

But I'm still having troubles understanding how to continue.

Any help is greatly appreciated.

score 1 · Accepted Answer · edited Apr 26 '20 at 15:15

You can alter html like as follows.

function daysOpen() {
  let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  let dateObject = new Date()
  let today = dateObject.getDay();

  if (daysOfWeek[today] === 'Saturday' || daysOfWeek[today] === 'Sunday') {
    let elem = document.querySelector("li.day-" + today);
    elem.classList.add("highlight");
    console.log("Store is closed")
  } else {
    console.log("The store is open")
  }
}

daysOpen();

li.highlight {
  background-color: red;
}

<ul class="list-group">
  <li class="list-group-item day-1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item day-2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item day-3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item day-4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item day-5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item day-7">Saturdays: Closed</li>
  <li class="list-group-item day-0">Sundays: Closed</li>
</ul>

Changes added are

Added custom css for highlighted class

Added unique class name based on day code for each class

Added class highlight based on our If condition

Don't forget to initialize the function call when needed

Suggestion : If possible pass the date from back-end code would be more trusty. Plugin like jQuery helps us to reduce our efforts to write these kind of codes and reduces line of codes too.

Thank you Mohammed! This actually made it a lot easier to keep going. I was struggling to understand how get it all to work together. I'll use your answer and try to read a bit more documentation. Especially in regard of your suggestion with the back-end code. Thank you once again! — LukeRhinehart_, Apr 25 '20 at 21:00

Cyril Wallis-Davy · Answer 2 · 2020-04-26T23:17:15.723

A shorter way with a ternary operator. If you just need to retrieve the day you can chain Day() method like this.

Edit: I added a method if you want to set a style for the active day and another for all the inactive days

/*first method only highlight active day*/
let today = new Date().getDay();
let okDay = document.getElementById(today);

today !== 0 && today !== 6 ?
  okDay.classList.add("open-day") :
  okDay.classList.add("close-day");

/*********************
 *edit second method *
 *********************/
const weekDays = document.querySelectorAll("li[data-day]");

function getCurrentDay() {
  Array.prototype.map.call(weekDays, d => {
    +d.dataset.day === today && (today !== 0 || today !== 6) ?
      d.classList.add("open-day") :
      d.classList.add("close-day");
  });
}
getCurrentDay();

* {
  box-sizing: border-box;
}

.list-group-item {
  list-style: none;
  color: gray;
}

.open-day {
  width: 100%;
  padding: 5px;
  background-color: coral;
  color: white;
  font-size: 18px;
}

.close-day {
  width: 100%;
  padding: 5px;
  background-color: #333333;
  color: white;
  font-size: 18px;
}

<ul class="list-group">
  <li class="list-group-item" id="1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item" id="2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item" id="6">Saturdays: Closed</li>
  <li class="list-group-item" id="0">Sundays: Closed</li>
</ul>

<ul class="list-group">
  <li class="list-group-item" data-day="1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item" data-day="6">Saturdays: Closed</li>
  <li class="list-group-item" data-day="0">Sundays: Closed</li>
</ul>

Active list element depending on day of week

2 Answers2