JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box hidden" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box hidden" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<div class="counter"></div>

CSS

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

.counter {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 8em;
}

.hidden {
  display: none;
}

JavaScript

$(document).ready(function() {

  // Add hours function
  Date.prototype.addHours = function(h) {
    this.setTime(this.getTime() + 5000); // 5 seconds for testing
    return this;
  }

  //Hide div click
  $('#alert-box-news').click(function() {
    //Get time after 24 hours
    var after24 = new Date().addHours(10).getTime();
    //Hide div
    $(this).hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime', after24);

    //Start Counter, up to 5 seconds after click
    counter(5);
  });


  //If desired time >= currentTime, based on that HIDE / SHOW
  function checkStorage() {
    var currentTime = new Date().getTime();
    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }
  }

  //Check logic on load
  checkStorage();

  // Counter function, demo purposes
  function counter(s) {
    var counter = 0;
    var interval = setInterval(function() {
      counter++;
      $(".counter").text(counter);
      if (counter === s) {
        clearInterval(interval);
        /* Check Logic */
        checkStorage();
      }
    }, 1000);
  }
});