3 times a day for 3 days

by rwone

HTML

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div id="modal_bg">
  <div class="modal_content">
    <img src="http://lorempixel.com/400/200/abstract/">
    <div id="greeting"></div>
    <div class="close_button">X</div>
  </div>
</div>
<p>
  here is some content.
</p>

CSS

#modal_bg {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  position: absolute;
}

.modal_content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 400px;
  position: relative;
  padding: 20px;
  background: #fff;
}

.close_button {
  background: #dcdcdc;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 20px;
  font-family: arial;
  font-weight: bold;
}

.close_button:hover {
  cursor: pointer;
}

#greeting {
  background: #fff;
  position: absolute;
  bottom: 40px;
  padding: 2px 10px;
  font-family: arial;
  margin-left: 10px;
  right: 40px;
}

JavaScript

// get current time of client  
var client_time_now = new Date();
var client_time_now_hour = client_time_now.getHours();

console.log("client_time_now: " + client_time_now);
console.log("client_time_now_hour: " + client_time_now_hour);

// see if client has already visited the site  
var final_expiry_date_time = Cookies.get("final_expiry_date_time");

// if first visit  
if (final_expiry_date_time === undefined) {

  console.log("this is your first visit");

  // set the expiry date 3 days from now
  // see:  https://stackoverflow.com/a/56728401  
  var final_expiry_date_time_value = new Date(Date.now() + (3600 * 1000 * 72));
  // to test expiry works, uncomment below
  // var final_expiry_date_time_value = new Date();

  console.log("final_expiry_date_time_value: " + final_expiry_date_time_value);

  Cookies.set("final_expiry_date_time", final_expiry_date_time_value);

  var expired = "false";

  Cookies.set("expired", expired);

}
// if not first visit, check if 3 days has elapsed since first visit
else {

  console.log("this is not your first visit");

  // is current datetime greater than expiry datetime
  // see:  https://stackoverflow.com/a/493018  
  var expired = client_time_now.getTime() > new Date(Cookies.get("final_expiry_date_time")).getTime();

  // for consistency, cookies are stored as strings  
  expired = expired.toString();

  console.log("expired: " + expired);

  // if expired, remove cookies and set expired to true 
  if (expired === "true") {
    Cookies.set("expired", "true");
    Cookies.remove("morning");
    Cookies.remove("afternoon");
    Cookies.remove("night");
  } else {
    Cookies.set("expired", "false");
  }

}

if (expired === "false") {

  // see if visits have been completed during these times
  var already_visited_morning = Cookies.get("morning");
  var already_visited_afternoon = Cookies.get("afternoon");
  var already_visited_night = Cookies.get("night");

  // morning handling - 4am to 12pm
  if (client_time_now_hour > 3...