JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<form method="get" action="#">
<p>
<input type="text" placeholder="Ransom Message"/>
    <input type="submit" value="Go"/>
</p>
</form>

<p class="out"></p>

CSS

input, .out {
    font-size: 18pt;
}

input[type=text] {
    width: 500px;
}

JavaScript

function String_RansomNote() {
  var fontList = new Array()
  fontList[0] = "Arial, Helvetica, sans-serif"
  fontList[1] = "Times New Roman, Times, serif"
  fontList[2] = "Courier New, Courier, monospace"
  fontList[3] = "comic sans ms, fantasy"
  fontList[4] = "Zapf-Chancery, cursive"
  // More fonts can be added by adding to this array

  var rndFont, rndSize
  var strLength = this.toString().length
  var outStr = ""
  var normal = false
  for (var i = 0 ; i < strLength; i ++) {  
    // Generate a random font-family
    rndFont = Math.round(Math.random() * (fontList.length-1))
    // Generate a random font-size
    rndSize = Math.round(Math.random() * 3) +2
    if (rndSize>0) rndSize="+" + rndSize
    // This randomizes sub and sup. Only add sub or sup if prior
    // text is on the baseline. This keeps text more legible.
    if (!normal)
      rndPos = Math.round(Math.random() * 2)
    else
      rndPos = -1
    outStr += "<FONT SIZE=\""+rndSize+"\" FACE=\"" + fontList[rndFont] + "\">" 
    normal = true
    if (rndPos==0) 
      outStr+="<SUP>"
    else 
      if (rndPos==1)
        outStr+="<SUB>"
      else
        normal = false;
    outStr += this.toString().substring(i,i+1)
    if (rndPos==0) 
      outStr+="</SUP>"
    else 
      if (rndPos==1)
        outStr+="</SUB>"
    outStr += "</FONT>"
  }
  // Return the modified string
  return outStr
}

String.prototype.ransomNote = String_RansomNote
        
$(function() {
        $("form").submit(function(e) {
            e.preventDefault();
            $(".out").html($("input[type=text]").val().ransomNote());
        });
            
});