JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
    <body>
        <h1>Homework : Write a Javascript algorithm to encrypt plaintext using the Vigenère cipher</h1>
        *key word and plain text need to match the length<br/>
        key<input id="inputKey" size="50" onkeyup="vgEncrypt()" />
        length=<span id="keyLength">0</span><br/>
        plain text<input id="inputText" size="50" onkeyup="vgEncrypt()"/>
        length=<span id="textLength">0</span><br/>
        <div>cipher text:<span id="result"></span></div>
        
    </body>
</html>

CSS

body{
    font-size:150%;
}

JavaScript

function vgEncrypt() {    
    //puuga
    //alert();
    // get plain text and key
    var inputText = $("#inputText").val().toUpperCase();
    var inputKey = $("#inputKey").val().toUpperCase();
    
    //alert();
    //updateKeyWordLength
    $("#keyLength").html(inputKey.length);
    //updatePlainTextLength
    $("#textLength").html(inputText.length);
    
    //do nothing if key word and plain text are not match the length
    if(inputKey.length != inputText.length) {
        return;
    }
    //alert();
    //init output
    var output = "";
    for(i=0; i<inputText.length; i++) {
        //def key at i
        var key = inputKey.charCodeAt(i)-65;
        if(inputText.charCodeAt(i)+key > 90)
            output += String.fromCharCode(inputText.charCodeAt(i)-26+key);
        else
            output += String.fromCharCode(inputText.charCodeAt(i)+key);
    }
    //sent output to..
    $("#result").html(output);
}