JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<Button class="social-btn" data-social="fb">
 FaceBook
</Button>

<Button class="social-btn" data-social="google">
Google
</Button>

<Button class="social-btn" data-social="twitter">
Twitter
</Button>

CSS

.social-btn {
display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 3px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.social-btn.active {
  border-color: green;
}

JavaScript

$(".social-btn").click(function(e){

	var socialData = $(this).data("social");

	//set cookie for 30 days
  setCookie("social",socialData,30);
  
  console.log("socialData: "+socialData);

});

$( document ).ready(function() {
    
    var socialData = getCookie("social");
    if(socialData) {
      
      if(socialData == "fb") {
          	alert("we have a FaceBook cookie");      
      } else if(socialData == "google") {
          	alert("we have a Google cookie");      
      } else if(socialData == "twitter") {
          	alert("we have a Twitter cookie");      
      }
      
    } else {
    	alert("no cookie found");
    }
    
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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