Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local storage, but it seems local storage doesn't offer an expiration feature. Another thought was to utilize setTimeout, but I'm not certain how to implement it in this specific scenario. It's important that this functionality is achieved solely through JavaScript without relying on any external libraries or frameworks. You can find a working example on JSFiddle.
<section class="newsletter">
<div id="newsletter_container" class="newsletter_class"gt;
<h1>Panel Title
<button id="close_btn">close</button>
</h1>
<h3>Panel content</h3>
</div>
</section>
To achieve the desired effect, we can make use of CSS animations along with JavaScript event listeners. Below you will find relevant code snippets for styling, animation, and interaction:
.newsletter {
position: fixed;
bottom: 0;
}
@keyframes Slide_down {
0% { transform: translateY(0); }
100% { transform: translateY(250px); }
}
#newsletter_container {
display: block;
background-color: rgb(0, 122, 193, 0.7);
width: 500px;
}
// More CSS styles...
const newsletter = document.getElementById("newsletter_container");
const closeBtn = document.getElementById("close_btn");
closeBtn.addEventListener("click", () => {
newsletter.classList.add("slide_down");
newsletter.addEventListener("webkitAnimationEnd", function() {
newsletter.remove();
});
});
If you encounter issues with elements reappearing after reloading, consider implementing a solution using localStorage as demonstrated here: JSFiddle. Here's a snippet from the implementation:
let removeNewsletter = localStorage.getItem('removeNewsletter');
const closeNewsLetter = () => {
newsletter.classList.add("close");
localStorage.setItem('removeNewsletter', 'enabled');
}
// Additional scripting...