Drop Cookie for Popup

by James Hooper

HTML

<div class="wrapper">
<h1></h1>
    <p>I am going to show you a pop up where you can enter your Dino Name :) well why wouldn't you want to do it. once you have filled in your name this will show as a H1 Tag!!! DAMN.... your name as the king header of tag... life goals complete.</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>
    
    <p class="dino_name_injection">My Name Is <strong></strong></p>
    
    <a class="reopen button green">Change Name</a>
</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;
    }
    
    &.red {
        background-color:red;
    }
  }
  
  input {
      display:inline-block;
      text-align:center;
  }
  
  .row {
      margin-bottom:10px;
  }
}

  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;
    }
    
    &.red {
        background-color:red;
        &.dino_cancel {
            float:right;
            position:relative;
            top:-30px;
        }
    }
  }

JavaScript

(function($) {

    $.fn.cookieConsent = function(action) {

        function createDiv() {
            $('.wrapper').append($("<div>").attr('id', 'dino_wrap').addClass('dino-bar').html('<div class="row inner"><div class="row"><a class="dino_cancel button red"><strong>X</strong></a></div>			<div class="dino_inner"><h3>Are you a dinosaur?</h3><p>If you are a dinosaur let us hear your RAWR!</p><div class="row"><input class="dino_name" type="text" label="dino_name" placeholder="Enter your Dino Name"/></div><div class="row"><a class="dino_rawr button">RAWR, I am a dinosaur!</a></div></div></div>'));
            $('a.dino_cancel').on('click', function() {
                 $("#dino_wrap").remove();
             });
                
            $('#dino_wrap a.dino_rawr').on('click', function() {
                var dino_check = $("input").val();
                var dino_name = $("input").val();
                $(".dino_inner").remove();
                $("p.dino_name_injection strong").html("");
                $("p.dino_name_injection strong").html(dino_name);
                $("h1").html("Hi my name is " + dino_name);
                $(".dino-bar .row.inner").append('<div class="row"><h3>I am ' + dino_name + ' the dinosaur, HEAR ME RAWR!!</h3></div><div class="row"><a class="button dino_rename">Rename My Dino</a></div></div>');

                $('#dino_wrap a.dino_rename').on('click', function() {
                    $("#dino_wrap").remove();
                    createDiv();
                });
               
            });
            

        }
        createDiv();
        
         $('.reopen').on('click', function() {
                    createDiv();
                });
    };
 
  $(window).cookieConsent();

})(jQuery);