Adventcalender, how to make it accessible on a specific date?-CodePudding

So I am making an advent calendar, and have already made the layout and made it possible to open the doors. But how do I set it to open on a specific date? I am pretty new to coding so I do not know where to start.

I have an index.html file an css file and a java file

const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");

const kalenderDage = 24;

const åbenLåge = (path, event) => {
event.target.parentNode.style.backgroundImage = `url(${path})`;
event.target.style.opacity = "0";
event.target.style.backgroundColor = "lightblue";
}

const startKalender = () => {
  for(let i = 0; i  < kalenderDage; i  ) {
    const kalenderLåge = document.createElement("div");
    const kalenderLågeTekst = document.createElement("div");

    kalenderLåge.classList.add("image");
    kalenderLåge.style.gridArea = "låge"   (i  1);
    kalenderContainer.appendChild(kalenderLåge);

    kalenderLågeTekst.classList.add("text");
    kalenderLågeTekst.innerHTML = i   1;
    kalenderLåge.appendChild(kalenderLågeTekst);

    lågeNummer = i   1;
    let coursePath = `./filer/låge${lågeNummer}.jpg`;

    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
  }
}

kalenderKnap.addEventListener("click", startKalender);

* {
  box-sizing: border-box;
}

.btn-start {
  background-color: darkred;
  color: white;
  border: 2px solid black;
  border-radius: 15px;
  margin: 15px auto;
  display: block;
  width: 10rem;
  height: 2rem;
}

.container {
  width: 800px;
  height: 900px;
  border: 5px solid black;
  margin: 15px auto;
  background-image: url("./filer/baggrund1.jpg");
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
      "låge7 låge8 låge2 låge6"
      "låge3 låge13 låge5 låge23"
      "låge17 låge21 låge19 låge14"
      "låge24 låge4 låge9 låge12"
      "låge10 låge15 låge1 låge18"
      "låge16 låge20 låge11 låge22";

}
.image {
  background-image: none;
  background-size: cover;
  background-position: center;
}

.text {
  height: 100%;
  width: 100%;
  color: solid black;
  padding: 10px;
  border: 2px solid black;
  transition: opacity 2s;
}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Julekalender</title>
  </head>

  <body>
    <button class="btn-start">Start Julekalender</button>
    <div class="container">
    </div>
    <script src="main.js"></script>

</div>

  </body>

</html>

so how do i make each door open on the specific date, and where do i put it?

CodePudding user response：

You can do this with the Date-Object. Just add this to your åbenLåge-Function:

const åbenLåge = (path, event) => {
    var date = new Date();
    if(date.getDate() == event.target.innerHTML)  {
        ...
    }
}

This checks if the selected number corresponds to today's date. So for example today you only can click on the door with number 7.

Here is the edited fiddle:

const kalenderKnap = document.querySelector(".btn-start");
const kalenderContainer = document.querySelector(".container");

const kalenderDage = 24;

const åbenLåge = (path, event) => {
    var date = new Date();
    if(date.getDate() == event.target.innerHTML)  {
        event.target.parentNode.style.backgroundImage = `url(${path})`;
        event.target.style.opacity = "0";
        event.target.style.backgroundColor = "lightblue";
    }
}

const startKalender = () => {
  for(let i = 0; i  < kalenderDage; i  ) {
    const kalenderLåge = document.createElement("div");
    const kalenderLågeTekst = document.createElement("div");

    kalenderLåge.classList.add("image");
    kalenderLåge.style.gridArea = "låge"   (i  1);
    kalenderContainer.appendChild(kalenderLåge);

    kalenderLågeTekst.classList.add("text");
    kalenderLågeTekst.innerHTML = i   1;
    kalenderLåge.appendChild(kalenderLågeTekst);

    lågeNummer = i   1;
    let coursePath = `./filer/låge${lågeNummer}.jpg`;

    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, coursePath));
  }
}

kalenderKnap.addEventListener("click", startKalender);

* {
    box-sizing: border-box;
  }
  
  .btn-start {
    background-color: darkred;
    color: white;
    border: 2px solid black;
    border-radius: 15px;
    margin: 15px auto;
    display: block;
    width: 10rem;
    height: 2rem;
  }
  
  .container {
    width: 800px;
    height: 900px;
    border: 5px solid black;
    margin: 15px auto;
    background-image: url("./filer/baggrund1.jpg");
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
        "låge7 låge8 låge2 låge6"
        "låge3 låge13 låge5 låge23"
        "låge17 låge21 låge19 låge14"
        "låge24 låge4 låge9 låge12"
        "låge10 låge15 låge1 låge18"
        "låge16 låge20 låge11 låge22";
  
  }
  .image {
    background-image: none;
    background-size: cover;
    background-position: center;
  }
  
  .text {
    height: 100%;
    width: 100%;
    color: solid black;
    padding: 10px;
    border: 2px solid black;
    transition: opacity 2s;
  }

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Julekalender</title>
  </head>

  <body>
    <button class="btn-start">Start Julekalender</button>
    <div class="container">
    </div>
    <script src="main.js"></script>

</div>

  </body>

</html>

CodePudding user response：

You can pass an object as a parameter like this:

const åbenLåge = (kalenderLågeTekst, event) => {
    var date = new Date();
    if(date.getDate() == kalenderLågeTekst.day)  {
        ...
    }

}

const startKalender = () => {
  for(let i = 0; i  < kalenderDage; i  ) {
    ....

    kalenderLågeTekst.path = coursePath;
    kalenderLågeTekst.day = lågeNummer;
    
    kalenderLågeTekst.addEventListener("click", åbenLåge.bind(null, kalenderLågeTekst));
  }
}