JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<link href='https://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<div id="advent-calendar"></div>
<span id="reset">reset</span>

CSS

body{
    background-color: #900;
}
#advent-calendar{
    margin: auto auto;
}
.tuerchen_wrapper{
    float: left;
    cursor: pointer;
    line-height: 130px;
    text-align: center;   
    font-size: 60px;
    font-family: 'Lobster Two', cursive;
}
.tuerchen_content:hover{
    color: #900;
}
.tuerchen_wrapper.active{
    background-color: transparent !important;
    color: white;
}

JavaScript

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

function createCalender(){
    
    var door = 24; // wie viele Türchen
    var doors_random = false; // Türchen zufällig anordnen
    var door_width = 130; // Türchen breite
    var door_height = 130; // Türchen höhe
    var doors_col = 6; // Spalten (muss mit Zeilen die anzahl von door ergeben)
    var doors_row = 4; // Zeilen
    var door_wrapper_class = 'tuerchen_wrapper'; // CSS Klasse der Türchen
    var door_content_class = 'tuerchen_content'; // CSS Klasse der Türchen
    var door_class_open = 'active';
    var container = 'advent-calendar'; // HTML ID des Kalender Elementes
    // range 0 bis door
    var doors_temp = Array.apply(null, Array(door)).map(function (_, i) {return i;});
    // randomize der Türchen
    if(doors_random){var doors = shuffle(doors_temp);}else{doors = doors_temp;}
	// Container prifilaktisch leeren :-)
    $("#"+container).html("");
    // erstellen des Kalender Containers (breite & höhe)
    $("#"+container).css({width: doors_col*door_width+"px",height: doors_row*door_height+"px"});

    $("#"+container).after("<div id='"+container+"_tage'>XXXXXXXXXX</div>");
    
    // erzeugen der Türchen
    $.each(doors, function( index, value ) {
      // Türchennummer 
      var tuerchen = parseInt(value)+parseInt(1);
      // random Color
      var color = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
      // check ob das Türchen geöffnet wurde  
      var wurde_schon_geoeffnet = localStorage['tuerchen_'+tuerchen+'_geoeffnet'];
      // wenn nicht setze 0
      if(typeof(wurde_schon_geoeffnet) == 'undefined'){wurde_schon_geoeffnet = 0; var class_open = '';}else{var class_open = door_class_open; door_wrapper_class = door_wrapper_class}
      // erstellen der Türchen Elemente
      $("#"+container).append("<div class='"+door_wrapper_class+" "+class_open+"'...