JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
    <body>
        <h1>Exercise 1: Caesar Encrypt</h1>
        key<input id="inputKey"/><br/>
        plain text<input id="inputText" size="50" onkeyup="ceasarEncrypt()"/><br/>
        <div>cipher text:<span id="result"></span></div>
        <br/><br/><br/><br/>
        
        <h1>Exercise 2: Caesar Decrypt</h1>
        <div id ="test"></div>
        <!--QBLBHGUVAXGUNGRATYNAQJVYYJVARHEBGUVFLRNE  UBYYNAQUNFONQYLCYNLRQVAGURRHEBGUVFLRNE-->
        <!--<div>cipher text:<span id="input2">VGUVAXGURJVAAREVFFCNVA</span></div>-->
        <div>cipher text:<span id="input2">QBLBHGUVAXGUNGRATYNAQJVYYJVARHEBGUVFLRNE</span></div>
        <button id="decrypt" onclick="ceasarDecrypt()">Decrypt</button>
        <div id="result3"></div>
    </body>
</html>

CSS

body{
    font-size:150%;
}

JavaScript

function ceasarEncrypt() {    
    //puuga
    //init output
    var output = "";

    // get plain text
    var input = $("#inputText").val().toUpperCase();
    //alert(input);
    
    // get key
    var key = parseInt($("#inputKey").val());
    //alert(key);
        
    //do encrypt
    // support only uppercase
    for(i=0; i<input.length; i++) {
        if(input.charCodeAt(i)+key > 90)
            output += String.fromCharCode(input.charCodeAt(i)-26+key);
        else
            output += String.fromCharCode(input.charCodeAt(i)+key);
    }
    //sent output to..
    $("#result").html(output);
}

function ceasarDecrypt() {
    //puuga
    //test something
    /*
    var temp = ["a","z","A","Z"];
    var outTest = "";
    for(i=0; i<temp.length; i++)
        outTest += temp[i]+" = "+temp[i].charCodeAt(0)+"<br/>";
    $("#test").html(outTest);
    */
    
    //init output
    var output = "";

    // get cipher text
    var input = $("#input2").html().toUpperCase();

    // test key
    for(key=1; key<=25; key++) {
        
        output += "key["+key+"] = ";
        
        //do decrypt
        // support only uppercase
        for(i=0; i<input.length; i++) {
            if(input.charCodeAt(i)-key < 65)
                output += String.fromCharCode(input.charCodeAt(i)+26-key);
            else
                output += String.fromCharCode(input.charCodeAt(i)-key);
        }
        output += "<br/>";
        
        //sent output to..
        $("#result3").html(output);
    }
}