HARUN PEHLİVAN

Caesar Cipher

HARUN PEHLİVAN's photo
HARUN PEHLİVAN
·

2 min read

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Caesar Cipher</title>
</head>
<body>
<h1>Caesar Cipher</h1>
<form id="fid1">
<label for="entry">Enter Text/Code:</label><br>
<textarea style="color:#fff;" name="entry" id="entry" rows="10" placeholder="Enter Text/Code here" value=""></textarea><br>
<label for="key">Key Value:</label>
<input style="color:#fff;" type="number" id="key" name="key" value=""></input><br>
</form>
<div class="button-flex">
<button type="button" form="fid1" id="encrypt" name="encrypt" onClick="main(1)">Encrypt</button>
<button type="button" form="fid1" id="decrypt" name="decrypt" onClick="main(2)">Decrypt</button>
</div>
<output id="output"></output>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

html{
    display: table;
    margin: auto;
}
body{
    width: 80vw;
    display: flex;
    flex-direction: column;
    background-color:#000;
}
h1{
    color: #fff;
    font-size: 2.5rem;
    margin:10px 0px;
    text-align: center;
}
form{
    color: #fff;
    text-align: center;
}
#entry{
    width: 100%;
    margin: 10px 0px;
    background-color: maroon;
    border: 3px solid #fff;
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
}
#key{
    margin: 10px 10px;
    background-color: maroon;
    border: 3px solid #fff;
    border-radius: 10px;
    font-size: 1rem;
    padding: 5px;
}
form label{
    font-size: 1.3rem;
}

.button-flex{
    display: flex;
    justify-content: center;
}

button{
    margin: 10px 0px;
    padding: 12px 15px;
    color: #fff;
    background-color: blue;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
}
button:hover{
    background-color: darkblue;

}
#decrypt{
    margin-left: 5px;
}
output{
    width: 100%;
    margin: 10px 0px;
    background-color: maroon;
    border: 3px solid #fff;
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
    display: none;
    color:#fff;
}

function main(x) { // x identifies from which button call is being made: Encrypt or Decrypt
    var entry_text = document.getElementById('entry').value
    var key_val = parseInt(document.getElementById('key').value) // Reading and storing both the inputs

    // if (key_val < 0) {
    //     alert("Key value cannot be negative")
    // }
    key_val = key_val % 26
    if (x === 2) {
        key_val = (-1) * key_val  // If call is for Decrypt then key value entered becomes negative
    }
    var final_string = ""
    for (var i = 0; i < entry_text.length; i++) {
        final_string = final_string + change(entry_text.charAt(i), key_val)
    }
    out_ele = document.getElementById('output')
    out_ele.style.display = final_string === "" ? "none" : "flex"
    out_ele.innerHTML = final_string
}

function isUpperCase(str) { // function to check if letter/word is uppercase or not
    return str === str.toUpperCase()
}

function change(ch, key) {  // function to shift alphabets according to the key value
    if (!(/[a-zA-Z]/).test(ch)) { // checks for symbol and returns without any change if found
        return ch
    }
    if (isUpperCase(ch)) {
        let no = (ch.charCodeAt(0) + key - 65) % 26 + 65
        if (no < 65) {
            return (String.fromCharCode(no + 26))
        }
        else {
            return (String.fromCharCode(no))
        }
    }
    else {
        let no = (ch.charCodeAt(0) + key - 97) % 26 + 97
        if (no < 97) {
            return (String.fromCharCode(no + 26))
        }
        else {
            return (String.fromCharCode(no))
        }
    }

}