wlib · September 23, 2017 02:52
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Zalgo Generator</title>
    <script src="./zalgo.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <section class="hero is-info is-fullheight is-bold">
      <section class="section">
        <input id="input" class="input" autofocus>
        <section class="section has-text-centered">
          <input id="level" type="range" min="0" max="20" step="1">
        </section>
      </section>
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 id="output" class="title is-1"></h1>
        </div>
      </div>
    </section>
    
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 const input = document.querySelector("#input");
 const level = document.querySelector("#level");
 const output = document.querySelector("#output");

 input.onkeydown = (e) => {
  if (e.keyCode === 13) {
    output.innerText = zalgo(input.value, level.value);
  }
 }

 level.onchange = () => output.innerText = zalgo(input.value, level.value);
diff --git a/zalgo.js b/zalgo.js
 // Draw a random value from an array
 function randItem(array) {
  return array[Math.floor(Math.random() * array.length)];
 }

 // Random unicode zalgo characters
 // prettier-ignore
 const up = [
  "\u030d", /*     Ì     */ "\u030e", /*     ÌŽ     */ "\u0304", /*     Ì„     */ "\u0305", /*     Ì…     */
  "\u033f", /*     Ì¿     */ "\u0311", /*     Ì‘     */ "\u0306", /*     Ì†     */ "\u0310", /*     Ì     */
  "\u0352", /*     Í’     */ "\u0357", /*     Í—     */ "\u0351", /*     Í‘     */ "\u0307", /*     Ì‡     */
  "\u0308", /*     Ìˆ     */ "\u030a", /*     ÌŠ     */ "\u0342", /*     Í‚     */ "\u0343", /*     Ì“     */
  "\u0344", /*     ÌˆÌ     */ "\u034a", /*     ÍŠ     */ "\u034b", /*     Í‹     */ "\u034c", /*     ÍŒ     */
  "\u0303", /*     Ìƒ     */ "\u0302", /*     Ì‚     */ "\u030c", /*     ÌŒ     */ "\u0350", /*     Í     */
  "\u0300", /*     Ì€     */ "\u0301", /*     Ì     */ "\u030b", /*     Ì‹     */ "\u030f", /*     Ì     */
  "\u0312", /*     Ì’     */ "\u0313", /*     Ì“     */ "\u0314", /*     Ì”     */ "\u033d", /*     Ì½     */
  "\u0309", /*     Ì‰     */ "\u0363", /*     Í£     */ "\u0364", /*     Í¤     */ "\u0365", /*     Í¥     */
  "\u0366", /*     Í¦     */ "\u0367", /*     Í§     */ "\u0368", /*     Í¨     */ "\u0369", /*     Í©     */
  "\u036a", /*     Íª     */ "\u036b", /*     Í«     */ "\u036c", /*     Í¬     */ "\u036d", /*     Í     */
  "\u036e", /*     Í®     */ "\u036f", /*     Í¯     */ "\u033e", /*     Ì¾     */ "\u035b", /*     Í›     */
  "\u0346", /*     Í†     */ "\u031a" /*     Ìš     */
 ];

 // prettier-ignore
 const down = [
  "\u0316", /*     Ì–     */ "\u0317", /*     Ì—     */ "\u0318", /*     Ì˜     */ "\u0319", /*     Ì™     */
  "\u031c", /*     Ìœ     */ "\u031d", /*     Ì     */ "\u031e", /*     Ìž     */ "\u031f", /*     ÌŸ     */
  "\u0320", /*     Ì      */ "\u0324", /*     Ì¤     */ "\u0325", /*     Ì¥     */ "\u0326", /*     Ì¦     */
  "\u0329", /*     Ì©     */ "\u032a", /*     Ìª     */ "\u032b", /*     Ì«     */ "\u032c", /*     Ì¬     */
  "\u032d", /*     Ì     */ "\u032e", /*     Ì®     */ "\u032f", /*     Ì¯     */ "\u0330", /*     Ì°     */
  "\u0331", /*     Ì±     */ "\u0332", /*     Ì²     */ "\u0333", /*     Ì³     */ "\u0339", /*     Ì¹     */
  "\u033a", /*     Ìº     */ "\u033b", /*     Ì»     */ "\u033c", /*     Ì¼     */ "\u0345", /*     Í…     */
  "\u0347", /*     Í‡     */ "\u0348", /*     Íˆ     */ "\u0349", /*     Í‰     */ "\u034d", /*     Í     */
  "\u034e", /*     ÍŽ     */ "\u0353", /*     Í“     */ "\u0354", /*     Í”     */ "\u0355", /*     Í•     */
  "\u0356", /*     Í–     */ "\u0359", /*     Í™     */ "\u035a", /*     Íš     */ "\u0323" /*     Ì£     */
 ];

 // prettier-ignore
 const mid = [
  "\u0315", /*     Ì•     */ "\u031b", /*     Ì›     */ "\u0340", /*     Ì€     */ "\u0341", /*     Ì     */
  "\u0358", /*     Í˜     */ "\u0321", /*     Ì¡     */ "\u0322", /*     Ì¢     */ "\u0327", /*     Ì§     */
  "\u0328", /*     Ì¨     */ "\u0334", /*     Ì´     */ "\u0335", /*     Ìµ     */ "\u0336", /*     Ì¶     */
  "\u034f", /*     Í     */ "\u035c", /*     Íœ     */ "\u035d", /*     Í     */ "\u035e", /*     Íž     */
  "\u035f", /*     ÍŸ     */ "\u0360", /*     Í      */ "\u0362", /*     Í¢     */ "\u0338", /*     Ì¸     */
  "\u0337", /*     Ì·     */ "\u0361", /*     Í¡     */ "\u0489" /*     Ò‰_     */
 ];

 // Generate zalgo text
 function zalgo(input = "", level = 1, targetChars = 0) {
  // Default zalgo level is just level 1, but level 0 is minimum possible
  level = level < 0 ? 1 : parseInt(level);
  // Maximum character count minimum is based on input length
  targetChars =
    targetChars < input.length ? input.length * (level + 5) : parseInt(targetChars);

  // This will hold our new zalgo generated string
  let zalgo = "";

  const zalgoToAdd = Math.floor((targetChars - input.length) / input.length);
  const remainder = (targetChars - input.length) % input.length;

  for (let i in input) {
    // Add the original input's character before the zalgo characters
    zalgo += input[i];

    // Add random zalgo characters
    for (let j = 0; j < zalgoToAdd; j++) {
      const chars = randItem([up, mid, down]);
      zalgo += randItem(chars);
    }
    // Account for remainder
    zalgo += Array(remainder + 1).join(randItem(mid));
  }

  // Return generated zalgo
  return zalgo;
 }
	<html>
	<head>
	<title>Zalgo Generator</title>
	<script src="./zalgo.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css" rel="stylesheet" type="text/css">
	</head>

	<body>
	<section class="hero is-info is-fullheight is-bold">
	<section class="section">
	<input id="input" class="input" autofocus>
	<section class="section has-text-centered">
	<input id="level" type="range" min="0" max="20" step="1">
	</section>
	</section>
	<div class="hero-body">
	<div class="container has-text-centered">
	<h1 id="output" class="title is-1"></h1>
	</div>
	</div>
	</section>

	<script src="index.js"></script>
	</body>
	</html>
	const input = document.querySelector("#input");
	const level = document.querySelector("#level");
	const output = document.querySelector("#output");

	input.onkeydown = (e) => {
	if (e.keyCode === 13) {
	output.innerText = zalgo(input.value, level.value);
	}
	}

	level.onchange = () => output.innerText = zalgo(input.value, level.value);
	// Draw a random value from an array
	function randItem(array) {
	return array[Math.floor(Math.random() * array.length)];
	}

	// Random unicode zalgo characters
	// prettier-ignore
	const up = [
	"\u030d", /* Ì / "\u030e", / ÌŽ / "\u0304", / Ì„ / "\u0305", / Ì… */
	"\u033f", /* Ì¿ / "\u0311", / Ì‘ / "\u0306", / Ì† / "\u0310", / Ì */
	"\u0352", /* Í’ / "\u0357", / Í— / "\u0351", / Í‘ / "\u0307", / Ì‡ */
	"\u0308", /* Ìˆ / "\u030a", / ÌŠ / "\u0342", / Í‚ / "\u0343", / Ì“ */
	"\u0344", /* ÌˆÌ / "\u034a", / ÍŠ / "\u034b", / Í‹ / "\u034c", / ÍŒ */
	"\u0303", /* Ìƒ / "\u0302", / Ì‚ / "\u030c", / ÌŒ / "\u0350", / Í */
	"\u0300", /* Ì€ / "\u0301", / Ì / "\u030b", / Ì‹ / "\u030f", / Ì */
	"\u0312", /* Ì’ / "\u0313", / Ì“ / "\u0314", / Ì” / "\u033d", / Ì½ */
	"\u0309", /* Ì‰ / "\u0363", / Í£ / "\u0364", / Í¤ / "\u0365", / Í¥ */
	"\u0366", /* Í¦ / "\u0367", / Í§ / "\u0368", / Í¨ / "\u0369", / Í© */
	"\u036a", /* Íª / "\u036b", / Í« / "\u036c", / Í¬ / "\u036d", / Í */
	"\u036e", /* Í® / "\u036f", / Í¯ / "\u033e", / Ì¾ / "\u035b", / Í› */
	"\u0346", /* Í† / "\u031a" / Ìš */
	];

	// prettier-ignore
	const down = [
	"\u0316", /* Ì– / "\u0317", / Ì— / "\u0318", / Ì˜ / "\u0319", / Ì™ */
	"\u031c", /* Ìœ / "\u031d", / Ì / "\u031e", / Ìž / "\u031f", / ÌŸ */
	"\u0320", /* Ì / "\u0324", / Ì¤ / "\u0325", / Ì¥ / "\u0326", / Ì¦ */
	"\u0329", /* Ì© / "\u032a", / Ìª / "\u032b", / Ì« / "\u032c", / Ì¬ */
	"\u032d", /* Ì / "\u032e", / Ì® / "\u032f", / Ì¯ / "\u0330", / Ì° */
	"\u0331", /* Ì± / "\u0332", / Ì² / "\u0333", / Ì³ / "\u0339", / Ì¹ */
	"\u033a", /* Ìº / "\u033b", / Ì» / "\u033c", / Ì¼ / "\u0345", / Í… */
	"\u0347", /* Í‡ / "\u0348", / Íˆ / "\u0349", / Í‰ / "\u034d", / Í */
	"\u034e", /* ÍŽ / "\u0353", / Í“ / "\u0354", / Í” / "\u0355", / Í• */
	"\u0356", /* Í– / "\u0359", / Í™ / "\u035a", / Íš / "\u0323" / Ì£ */
	];

	// prettier-ignore
	const mid = [
	"\u0315", /* Ì• / "\u031b", / Ì› / "\u0340", / Ì€ / "\u0341", / Ì */
	"\u0358", /* Í˜ / "\u0321", / Ì¡ / "\u0322", / Ì¢ / "\u0327", / Ì§ */
	"\u0328", /* Ì¨ / "\u0334", / Ì´ / "\u0335", / Ìµ / "\u0336", / Ì¶ */
	"\u034f", /* Í / "\u035c", / Íœ / "\u035d", / Í / "\u035e", / Íž */
	"\u035f", /* ÍŸ / "\u0360", / Í / "\u0362", / Í¢ / "\u0338", / Ì¸ */
	"\u0337", /* Ì· / "\u0361", / Í¡ / "\u0489" / Ò‰_ */
	];

	// Generate zalgo text
	function zalgo(input = "", level = 1, targetChars = 0) {
	// Default zalgo level is just level 1, but level 0 is minimum possible
	level = level < 0 ? 1 : parseInt(level);
	// Maximum character count minimum is based on input length
	targetChars =
	targetChars < input.length ? input.length * (level + 5) : parseInt(targetChars);

	// This will hold our new zalgo generated string
	let zalgo = "";

	const zalgoToAdd = Math.floor((targetChars - input.length) / input.length);
	const remainder = (targetChars - input.length) % input.length;

	for (let i in input) {
	// Add the original input's character before the zalgo characters
	zalgo += input[i];

	// Add random zalgo characters
	for (let j = 0; j < zalgoToAdd; j++) {
	const chars = randItem([up, mid, down]);
	zalgo += randItem(chars);
	}
	// Account for remainder
	zalgo += Array(remainder + 1).join(randItem(mid));
	}

	// Return generated zalgo
	return zalgo;
	}