Remember closed alert box with local storage

by Jordan Dayton

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-box" id="alert-box-intro">
  <span class="alert-box-close" id="close-alert-box-info" onclick="this.parentElement.style.display='none';">&times;</span>
  <p>Welcome to the most comprehensive online <span style="font-weight:bold;">Tax & Accounting Community!</span> Our community has a variety of participating members from aspiring accountants, to industry experts who have been practicing for more than 25
    years! Whether you're here to learn, or to share and help others, click "Log In" and you'll be able to set up a free Community account. Then check out some of the excitng things going on...</p>
  <div style="margin-left: 60px;">
    <li><a href="https://community.canopytax.com/community-central/">Get started</a> with a quick introduction video.</li>
    <li><a href="https://community.canopytax.com/questions-discussions/">Ask questions or start a discussion.</a></li>
    <li><a href="https://community.canopytax.com/community-central/f/forum/3/just-getting-started-introduce-yourself/">Introduce yourself</a> and tell us why you're here.</li>
    <li><a href="https://community.canopytax.com/resources-shared-practices/">Download & Share Resources</a> with other community members.</li>
  </div>
  <p>Before joining, please review the <a href="https://opencourse.canopytax.com/pages/terms-of-service#one">Canopy Community Guidelines</a>. These guidelines apply to all activity on our forums and are actively enforced.</p>
  <br />
</div>

CSS

/* The alert message box */

.alert-box {
  padding: 10px;
  background-color: #d3ffe4;
  /* Red */
  color: #52555A;
  margin-bottom: 15px;
  margin-top: 2px;
  margin-right: 4px;
  margin-left: 4px;
  box-shadow: 0 2px 4px -1px;
}

#alert-box-intro {
  display: none;
}

/* The close button */

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

/* When moving the mouse over the close button */

.alert-box-close:hover {
  color: #52555A;
}

p {
  margin-left: 30px;
  margin-right: 30px;
}

JavaScript

$(document).ready(function() {
  var nd = new Date(); // initial values for date variables
  var md = nd;
  // check if localStorage item regarding info element exists
  if (!localStorage.getItem("introclicked")) {
    $("#alert-box-intro").show(800);
  } else {
    var oldnd = new Date(localStorage.getItem("introclicked")); // retrieve the time that the element was hidden and calculate difference from date and time now. if comparison result is bigger than 1 day then show info box.
    var nddiff = (nd.getTime() - oldnd.getTime()) / (60 * 60 * 24 * 1000);
    if (nddiff >= 1) {
      $("#alert-box-intro").show(800);
    }
  }
  // check if localStorage item regarding maintenance element exists
  $("#close-alert-box-intro").click(function() {
    $("#alert-box-intro").hide(800);
    nd = new Date(); // get the current date and time that close-alert-box-info was clicked and store it to localStorage
    localStorage.setItem("introclicked", nd);
  });
});