Hi i have a project whereby onclick of a griD advent windows show. I want to save the ones opened from the previous session. I'm using local storage saving the HTML div (child of container class). When I invoke the function it stops the other windows from opening. All HTML within the container is generated by JS.
const calendarContainer = document.querySelector(".container");
const calendarDays = 24;
const d = new Date();
const todaysDate = d.getDate();
const todaysDatePlusOne = todaysDate + 1;
const openDoor = (path, event) => {
const dayClicked = event.target.innerHTML;
if (dayClicked < todaysDatePlusOne) {
event.target.parentNode.style.backgroundImage = `url(${path})`; //binds calendar door click listener
event.target.style.opacity = "0";
event.target.style.backgroundColor = "#521751";
} else {
//modal pop up with Giff
const modal = document.getElementById("myModal");
modal.style.display = "block";
setTimeout(function() {
modal.style.display = "none";
}, 2250);
return;
}
let calendarHTML = calendarContainer.innerHTML;
// Save the HTML to localStorage to keep doors open on next
session
localStorage.setItem("doorsOpenedPreviously", calendarHTML);
};
const createCalendar = () => {
for (let i = 0; i < calendarDays; i++) {
const calendarDoor = document.createElement("div");
const calendarDoorText = document.createElement("div");
calendarDoor.classList.add("image");
calendarDoor.style.gridArea = "door" + (i + 1);
calendarContainer.appendChild(calendarDoor);
calendarDoorText.classList.add("text");
calendarDoorText.innerHTML = i + 1;
calendarDoor.appendChild(calendarDoorText);
adventWindowNumber = i + 1;
let adventPath = `/Images/xmas-images/xmas-${adventWindowNumber}.jpg`;
calendarDoorText.addEventListener("click", openDoor.bind(null,
adventPath));
}
};
const loadPreviousOpenedDoor = () => {
// Check for saved wishlist items
let saved = localStorage.getItem("doorsOpenedPreviously");
calendarContainer.innerHTML = saved;
};
createCalendar();
loadPreviousOpenedDoor();<h1>Xmas Advent Calendar 2021</h1>
<div class="container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Too early Heidi!!</p>
<iframe src="https://giphy.com/embed/LIhO05Vq0d9XqDg2tw" width="480" height="269" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
</div>
</div>
<script src="app.js"></script>