Drop Cookie for Popup

by James Hooper

HTML

<div class="wrapper">
<h1>Some Dinosaurs can not even hold cookies!</h1>
<p>When you click RAWR I am going to drop a cookie on your PC (other makes of computer systems are available). Currently i have set this to have a duration of 1 day, so tomorrow, when ou wake up, and obviously the first thing you are going to do is come back here and see if you can show us your RAWR once more.</p>
<p>Hey mum.... look at me ... I wrote the styling in SASS</p>
<p>This will pop up and depending when someone clicks the No Thanks button it will dissapear, this is great for customer surveys, Cookie policies, and pop ups on page. </p>
</div>

SCSS

#dino_wrap.dino-bar .row.inner {
  position:fixed;
  top:0;
  width:75%;
  background:#000;
  background-color:rgba(0,0,0,.8);
  text-align:center;
  padding:40px 10px;
  margin:10% 12.5% 0;
  border-radius:10px;

  h3 {
    color:#fff;
    margin:0;
    width:100%;
    display:inline-block;
    font-size:24px;
    text-transform:uppercase;
    line-height:1;
  }
  
  p {
    color:#fff;
    display:inline-block;
    margin:12px 0;
    width:100%;
    line-height:1;
  }
  
  a.button {
    display:inline-block;
    cursor:pointer;
    background-color:green;
    padding:10px;
    color:#fff;
    font-weight:bold;
    border-radius:5px;
    transition:1s;
    
    &:hover {
      background-color:darkgreen;
      transition:1s;
    }
  }
}

JavaScript

(function($){
    
    $.fn.cookieConsent = function(action) {
        
        var dropCookie = true;          // false disables the Cookie, allowing you to style the banner
        var cookieDuration = 1;       // Number of days before the cookie expires, and the banner reappears
        var cookieName = 'dino-cookie';   // Cookiename
        var cookieValue = '1';          // Value of cookie
        var act = action || 'init';
     
        function createDiv(){
            $('.wrapper').append($("<div>").attr('id','dino_wrap').addClass('dino-bar').html('<div class="row 								inner"><h3>Are you a dinosaur?</h3><p>If you are a dinosaur let us hear your RAWR!</p> <a 					  						class="dino_rawr button">RAWR, I am a dinosaur!</a></div>'));
            $('#dino_wrap .dino_rawr').on('click', function() {
                $(window).cookieConsent('accept');
                $("#dino_wrap").remove();
            });
        }

        function createCookie(name,value,days) {
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000)); 
                expires = "; expires="+date.toGMTString(); 
             }
             if(dropCookie) { 
                  document.cookie = name+"="+value+expires+"; path=/"; 
             }
        }

        function checkCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

        function accept(){
            createCookie(cookieName, cookieValue, cookieDuration);
            $('#cookie-law').remove();
        }

        if (act == 'accept') {
            accept();
        } else {
           ...