How to display a DIV during a period of time? Javascript

Question

I have a query in Django that shows all the posts of the current user Ordered by the starting date of the post.

I want to display a DIV in the HTML template that says: <div>“Will start soon”</div> ,15 minutes before the Starting time of the post.

Does anybody knows in Javascript how can I display that HTML div During the last 15 minutes before the post starts?

I have two fields for making this script works: Start_date and start_time

Thank you very much! Any idea is welcome!

<div class="publish-reminder invisibles" data-publish-time="{{ post.date_start }} {{ post.start_time }}">Will start soon</div>

for (let publishReminder of document.querySelectorAll("div.publish-reminder.invisibles")){
          setTimeout(function() {
              publishReminder.classList.remove("invisibles");
          },  new Date(publishReminder.getAttribute("data-publish-time") - new Date()));
     }

Answer 1

There are two things to consider here:

Hidden div

You could have a hidden div like

<div class="publish-reminder invisible" data-publish-time="2020-10-08 01:07:00"><!-- Some content here --></div>

And CSS

.invisible {
    display: none;
}

HTML generation on server

Your server generates some HTML and you need to check on page load whether the post is to be published in less than 15 minutes. If the post is to be published in less than 15 minutes, then don't generate the invisible class into the div . Since this is a question that focuses on Javascript, I will not share much detail about server-side rendering.

Client-side rendering

Let's do something like this:

for (let publishReminder of document.querySelectorAll("div.publis-reminder.invisible")) {
    setTimeout(function() {
        publishReminder.classList.remove("invisible");
    }, new Date(publishReminder.getAttribute("data-publish-time") - new Date()));
}

Explanation:

• we get all publish reminders which are (still invisible)
• we loop them
• we compute the time when they should be shown by subtracting the current date from the publish date and passing the resulting milliseconds as the second parameter of setTimeout
• in the callback we remove the invisible class

EDIT

After testing, I realized there are problems in the implementation. Here is a proof-of-concept:

function getDateString(dt) {
    return `${dt.getFullYear()}-${(dt.getMonth() + 1)}-${dt.getDate()} ${dt.getHours()}:${dt.getMinutes()}:${dt.getSeconds()}`;
}

var dateStrings = [];

var dt;
dt = new Date();
dt.setMinutes(dt.getMinutes() + 5);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes() + 15);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes() + 16);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes() + 17);
dateStrings.push(getDateString(dt));

var divs = `
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[0]}">First article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[1]}">Second article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[2]}">Third article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[3]}">Fourth article</div>

`;

document.body.innerHTML += divs;

for (let publishReminder of document.querySelectorAll("div.publish-reminder.invisible")) {
    setTimeout(function() {
        publishReminder.classList.remove("invisible");
    }, ((new Date(publishReminder.getAttribute("data-publish-time"))) - (new Date())) - (15 * 60 * 1000));
}

Fiddle: https://jsfiddle.net/Lp02h5u4/2/

Answer 2

You can use setTimeOut function it will display div after time given to it

setTimeout(function()

{

$('.publish-reminder').show();// or fade, css display however you'd like.

}, 5000);

it will display div after 5 seconds