JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<div class="lock">
  Verschlüsseln
</div>

<p>
Erfolg hat er nicht. Der Zusteller fragt nach, an welchem Tag das Paket nicht gekommen sei, erklärt, dass montags und samstags andere Kollegen seine Tour fahren. "Sie kennen mich doch. Sie wissen, dass ich immer klingele."
</p>

<p>
Es scheint, als würde jeder, wirklich jeder diese Situation kennen: Man wartet zu Hause auf ein Paket, traut sich kaum die Musik aufzudrehen, um ja nicht das Klingeln des Zustellers zu überhören - und findet später eine Karte im Briefkasten, man möge sein Paket bitte bei der nächsten Postfiliale auflesen. Die ist natürlich zehn Kilometer weit weg und der früheste Abholtermin ist morgen, wenn man wieder arbeiten muss.
</p>

CSS

.lock {
  color: #ff0000;
  background: #ffffff;
  padding: 0.5em 1em;
  display: inline-block;
  cursor: pointer;
}

JavaScript

var unlock = "0";
jQuery(".lock").on("click", function() {
	if (unlock === "1") {
    jQuery(this).text("Verschlüsseln");
  	lockText("0");
  }
  else {
   	jQuery(this).text("Entschlüsseln");
  	lockText("1", "0");
    if (unlock === "0") {
    	lockText("1", "0");
    }
    else {
    	lockText("1", "9999");
    }
    unlock = "1";
  }
});

function lockText(u, p) {
	jQuery("p").each(function(index) {
  	if (p === "0") {
    	var strStore = jQuery(this).text();
    	var pageNumber = index.toString();
    }
    else {
    	var strStore = "";
    	var pageNumber = "9999";
    }
    
    var str = jQuery(this).text();
 
		try {
			// if (!jQuery(this).hasClass("locked")) {
				jQuery(this).addClass("locked");
				eval("var pContent" + pageNumber + " = " + "strStore");
         console.log("Test1: " + eval("pContent" + pageNumber));
    	// }
		}
		catch(err) {
			console.log(err.message);
    }
  
    if (u === "0") {
    
      if (jQuery(this).attr("data-text") === undefined) {
      	jQuery(this).attr("data-text", str);
      }
      
  		jQuery(this).text("");

			for (var i = 0, len = str.length; i < len; i++) {
    		var randomNumber = Math.floor((Math.random() * 10) + 1),
      			thisChar = str[i + randomNumber];
				jQuery(this).append(thisChar);
			}
    }
    else {
    	jQuery(this).text(eval("pContent" + pageNumber));
    }
	});
  unlock = u;
}