JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
<body>
    <h1>Caesar Encrypt</h1>
    plain text<input id="inputS" size="50" onkeyup="operation()"/><br/>
    <div>cipher text sol1:<span id="result"></span></div>
    <div>cipher text sol2:<span id="result2"></span></div>
    <br/>
    <br/><br/>
    <h1>Caesar Decrypt</h1>
    <div>cipher text:<span id="input2">QBLBHGUVAXGUNGRATYNAQJVYYJVA
RHEBGUVFLRNE</span></div>
    <button id="decrypt" onclick="ceasarDecrypt()">Decrypt</button>
    <div id="result3"></div>
    
</body>
</html>

CSS

#inputList{
    font-size:120%;
}

#result {
    font-size:120%;
}

JavaScript

function operation() {
    //string input
    //var input = document.getElementById('inputS').value;
    var input = $("#inputS").val();
    //alert(input);
    
    
    //init output
    var output = "";
    
    //do summary
    for(i=0; i<input.length; i++) {
        //output += (input.charAt(i)++);
        if(input.charAt(i)=='z')
            output += 'a';
        else if(input.charAt(i)=='Z')
            output += 'A';
        else if(input.charAt(i)=='9')
            output += '0';
        else
            output += String.fromCharCode(input.charCodeAt(i)+1);
    }
    
    //sent output to..
    $("#result").html(output);
    
    
    //solution2
    var input2 = input.toLowerCase();
    var output2 = "";
    var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
    //alert();
    for(i=0; i<input2.length; i++) {
        var inputPossition = input2.charAt(i);
        var alphabetNewPossition = alphabet.indexOf(inputPossition);
        if(alphabet[alphabetNewPossition+1]==undefined)
            output2 += alphabet[0];
        else
            output2 += alphabet[alphabetNewPossition+1];
    }
    
    //sent output to..
    $("#result2").html(output2);
}

function ceasarDecrypt() {
    for() {}
    alert();
}