switching or hide/show links after week completed-CodePudding

I have 4 links here and I want to show only one link(different lunch every week) at a time. Then showing first lunch after 4 weeks completed. Starting from Monday.

<div class="wrapper">
  <a href="#" class="collection-item item-menu" data-id="1">Lunch Menu (Week #1)</a>
  <a href="#" class="collection-item item-menu" data-id="2">Lunch Menu (Week #2)</a>
  <a href="#" class="collection-item item-menu" data-id="3">Lunch Menu (Week #3)</a>
  <a href="#" class="collection-item item-menu" data-id="3">Lunch Menu (Week #4)</a>
</div>

Any help is greatly appreciated.

CodePudding user response：

there is a function I have found in StackOverflow this link this function will give you the number of weeks in a month then you can decide to enable which link

function weekOfTheMonth(date) {
 const day = date.getDate()
 const weekDay = date.getDay()
 let week = Math.ceil(day / 7)

const ordinal = ['First', 'Second', 'Third', 'Fourth', 'Last']
const weekDays  = ['Sunday','Monday','Tuesday','Wednesday', 
 'Thursday','Friday','Saturday']


// Check the next day of the week and if it' on the same month, if not, 
   respond with "Last"
   const nextWeekDay = new Date(date.getTime()   (1000 * 60 * 60 * 24 * 7))
 if (nextWeekDay.getMonth() !== date.getMonth()) {
        week = 5
        }

return `${ordinal[week - 1]} ${weekDays[weekDay]}`
}

CodePudding user response：

I have figured out a simpler way to switch lunch menu based on week numbers

<div class="hidden">Week Number is : <span id="week_number">0</span></div>

<div class="wrapper">
    <a href="#" class="d-none collection-item item-menu" id="lunch1">Lunch Menu (Week #1)</a>
    <a href="#" class="d-none collection-item item-menu" id="lunch2">Lunch Menu (Week #2)</a>
    <a href="#" class="d-none collection-item item-menu" id="lunch3">Lunch Menu (Week #3)</a>
    <a href="#" class="d-none collection-item item-menu" id="lunch4">Lunch Menu (Week #4)</a>
</div>

css to do the following

/*to hide week number div*/
.hidden {
    visibility: hidden;
}
span {
  color : #e91e63;
}
/*to hide all the lunch variants*/
.d-none {
  display:none;
}
/*to show spesific lunch variant depend on week number*/
.d-block {
  display:block;
}

javascript code to complete the task

//init date
var date = new Date("2021-01-01");

document.getElementById("week_number").innerHTML =(getWeekOfMonth(date));

//get week number of date 

function getWeekOfMonth(date) {
    let adjustedDate = date.getDate()  date.getDay();
    let prefixes = ['0', '1', '2', '3', '4', '5'];
    return (parseInt(prefixes[0 | adjustedDate / 7]) 1);
}
// all the lunch variants

var lunch1 = document.getElementById("lunch1");

var lunch2 = document.getElementById("lunch2"); 

var lunch3 = document.getElementById("lunch3");

var lunch4 = document.getElementById("lunch4"); 

var value = document.getElementById("week_number").innerHTML;

// adding css class to specific variant depending on value

    if(value=="1")
    {
        lunch1.classList.add("d-block");
    }
    if(value=="2")
    {
        lunch2.classList.add("d-block");
    }
    if(value=="3")
    {
        lunch3.classList.add("d-block");
    }
    if(value=="4")
    {
        lunch4.classList.add("d-block");
    }
    if(value=="5")
    {
        lunch1.classList.add("d-block");
    }
    if(value=="6")
    {
        lunch2.classList.add("d-block");
    }