JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="buttn"></div>

<div id="scoreBoard">
<b>Score:<div id="score"></div></b>
<b>Value:<div id="clickVal"></div></b>
</div>

CSS

#buttn{
  border:solid black .2em;
  background:blue;
  height:5em;
  width:5em;
  border-radius:50%;
  cursor:pointer;
}
#buttn:active{
  height:4.8em;
  width:4.8em;
}

#scoreBoard{
  position:absolute;
  top:.5em;
  right:.5em;
  border:solid 2px gray;
  width:9em;
  height:14em;
  background:rgba(0,0,0,0.5);
  text-align:center;
  padding:.5em;
  color:white;
}

JavaScript

$(document).ready(function(){
	var $buttn = $('#buttn');
  var $score = $('#score');
  var $value = $('#clickVal');
  
  var varArray=['score','value'];
  
  var score = 0;
  var value = 1;
   
  //main element
  $buttn.click(function(){
  	score += value;
    updateScore();
  });
  
  //Yummy cookies!
  function loadCookies(){
    for(var i = 0; varArray.length > i; i++){
      $.cookie(varArray[i]);
      console.log('loaded cookie '+varArray[i]+', with value of '+eval(varArray[i]));
    }
  }
  
  //Lets save these cookies for later!
  function saveCookies(){
    setTimeout(function(){
        for(var i = 0; varArray.length > i; i++){
          $.cookie(varArray[i], eval(varArray[i]));
          console.log('cookie '+varArray[i]+', was saved, with value of '+eval(varArray[i]));
        }
        saveCookies();
      },5000);
    }
  
	function updateScore(){
  	$score.html(score);
  	$value.html(value);
  }
    
    
  //Let there be light
  function startGame(){
  	console.clear();
    loadCookies();
    updateScore();
    saveCookies();
  }
  
  startGame();
});