Drop Cookie for Popup

by James Hooper

HTML

<div id="gdpr_cont"></div>
<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>

<a class="button" sitegdpr="preflink">Set your preferences</a>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
}
#gdpr_cont{
  background-color:rgb(38, 38, 38);
  height:100%;
  width:100%;
  font-family:'Roboto', sans-serif;
}
#gdpr .row.inner {
  position:fixed;
  top:0;
  width:75%;
  background:#262626;
  text-align:center;
  padding:40px 10px;
  margin:10px;
  border-radius:10px;

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

JavaScript

(function($) {

function reload(){
				
function showGDPR(){
$("#gdpr_cont").append('<div id="gdpr"> <div class="row inner"><h3> GDPR Stuff</h3><p>I am going to make this easy for you to chose, I use Analytics to be able to see what pages are performing and what the user behaviour is so I can make better choices when amending my site. PLease help me to help you</p><a class="button decline" sitegdpr="decline">Decline</a> <a class="button accept" sitegdpr="accept">Accept</a></div><div>')
};

if (document.cookie.indexOf("_GDPR=") >= 0) {
}

else {
 showGDPR();
}

jQuery("#gdpr_cont .button").click(function(){
  var gdprClick = $(this).attr("sitegdpr")
  var gdprDate = new Date();
		gdprDate.setTime(gdprDate.getTime() + 34186669833);
		document.cookie = "_GDPR=" + gdprClick +"; expires=" + 						gdprDate.toUTCString();
  console.log(gdprDate);
  location.reload();
});

$("*[sitegdpr='preflink']").click(function(){
	showGDPR();
  reload();
});

    };
 
  reload();

})(jQuery);