jquery-cookies top bar hide

by Adam Calihman

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  </head>

  <body>
    <div id="top-bar">
      <p><span>Shipping worldwide</span><span style="float: right;"><button id="top-bar-close">X</button></span></p>
    </div>
    <div id="clear-cookie"><button>clear cookies</button></div>
    <script src="script.js"></script>
  </body>

</html>

CSS

#top-bar {
  background-color: yellow;
  min-height: 50px;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}

JavaScript

// Will not work on repl without opening the rednered page in new tab
(function($) {
  $(document).ready(function() {
    // check if cookie is Not set
    //if($.cookie('top_bar_cookie') == 'undefined' || 'null') {
    if ($.cookie('top_bar_cookie') === 'undefined' || $.cookie('top_bar_cookie') === '') {
      alert('Cookie not set: ' + $.cookie('top_bar_cookie'));
    } else {
      // use random number for cookie value for testing
      var num = Math.random();
      $("#top-bar-close").click(function() {
        $.cookie('top_bar_cookie', num); // change num as desired   
        alert('You have set the cookie: ' + $.cookie('top_bar_cookie'));
        $("#top-bar").css({
          "display": "none"
        });
      });
    }
    $("#clear-cookie").click(function() {
      $.removeCookie('top_bar_cookie');
      $("#top-bar").css({
        "display": "inline-block"
      });
      alert('You have cleared cookies. Current value: ' + $.cookie('top_bar_cookie'));
      // update num variable with new random number for testing
      num = Math.random();
    });
  });
})(jQuery);