timurbakibayev/cipher.html

## cipher.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alpha Substitution Cipher</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body style="margin: auto;">
<div style="padding: 2em; max-width: 800px; align-self: center">
    <form>
      <div class="form-group">
          <button class="btn btn-primary" onclick="alpha('en')" type="button">New key</button>
      </div>
      <div class="form-group">
        <label for="key1">Alphabet</label>
        <input class="form-control" id="key1" value="">
      </div>
      <div class="form-group">
        <label for="key2">Key</label>
        <input class="form-control" id="key2">
      </div>
      <div class="form-group">
        <label for="source_text">Исходный текст</label>
        <textarea class="form-control" id="source_text" rows="8">
On a dark desert highway
Cool wind in my hair
Warm smell of colitas
Rising up through the air
Up ahead in the distance
I saw a shimmering light
My head grew heavy and my sight grew dim
I had to stop for the night
There she stood in the doorway
I heard the mission bell
And I was thinkin' to myself
'This could be heaven or this could be hell
Then she lit up a candle
And she showed me the way
There were voices down the corridor
I thought I heard them say
        </textarea>
      </div>
      <div class="form-group">
          <button class="btn btn-primary" onclick="cipher()" type="button">Encrypt</button>
      </div>
      <div class="form-group">
        <label for="encrypted_text">Encrypted text</label>
        <textarea class="form-control" id="encrypted_text" rows="8"></textarea>
      </div>
    </form>
</div>
<script language="JavaScript">
    String.prototype.shuffle = function () {
        var a = this.split(""),
            n = a.length;

        for(var i = n - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var tmp = a[i];
            a[i] = a[j];
            a[j] = tmp;
        }
        return a.join("");
    };

    const cipher = ()=> {
        let source = document.getElementById("source_text").value.toLowerCase();
        document.getElementById("source_text").value = source;
        let key1 = document.getElementById("key1").value.toLowerCase();
        let key2 = document.getElementById("key2").value.toLowerCase();
        if (key1.length !== key2.length) {
            alert("Alphabet and the key lengths do not coincide!")
        } else {
            let dict = {};
            for (let i=0; i<key1.length; i++) {
                if (key1.substr(i,1).length > 0)
                    dict[key1.substr(i,1)] = key2.substr(i,1);
            }
            let result = "";
            for (let i = 0; i<source.length; i++) {
                if (source.substr(i,1) in dict)
                    result = result + dict[source.substr(i,1)];
                else
                    result = result + source.substr(i,1);
            }
            document.getElementById("encrypted_text").value = result;
        }
    };

    const alpha = (lang) => {
        if (lang === "en")
            document.getElementById("key1").value = "abcdefghijklmnopqrstuvwxyz";
        document.getElementById("key2").value = document.getElementById("key1").value.shuffle();
    };
    alpha("en");
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Alpha Substitution Cipher</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	</head>
	<body style="margin: auto;">
	<div style="padding: 2em; max-width: 800px; align-self: center">
	<form>
	<div class="form-group">
	<button class="btn btn-primary" onclick="alpha('en')" type="button">New key</button>
	</div>
	<div class="form-group">
	<label for="key1">Alphabet</label>
	<input class="form-control" id="key1" value="">
	</div>
	<div class="form-group">
	<label for="key2">Key</label>
	<input class="form-control" id="key2">
	</div>
	<div class="form-group">
	<label for="source_text">Исходный текст</label>
	<textarea class="form-control" id="source_text" rows="8">
	On a dark desert highway
	Cool wind in my hair
	Warm smell of colitas
	Rising up through the air
	Up ahead in the distance
	I saw a shimmering light
	My head grew heavy and my sight grew dim
	I had to stop for the night
	There she stood in the doorway
	I heard the mission bell
	And I was thinkin' to myself
	'This could be heaven or this could be hell
	Then she lit up a candle
	And she showed me the way
	There were voices down the corridor
	I thought I heard them say
	</textarea>
	</div>
	<div class="form-group">
	<button class="btn btn-primary" onclick="cipher()" type="button">Encrypt</button>
	</div>
	<div class="form-group">
	<label for="encrypted_text">Encrypted text</label>
	<textarea class="form-control" id="encrypted_text" rows="8"></textarea>
	</div>
	</form>
	</div>
	<script language="JavaScript">
	String.prototype.shuffle = function () {
	var a = this.split(""),
	n = a.length;

	for(var i = n - 1; i > 0; i--) {
	var j = Math.floor(Math.random() * (i + 1));
	var tmp = a[i];
	a[i] = a[j];
	a[j] = tmp;
	}
	return a.join("");
	};

	const cipher = ()=> {
	let source = document.getElementById("source_text").value.toLowerCase();
	document.getElementById("source_text").value = source;
	let key1 = document.getElementById("key1").value.toLowerCase();
	let key2 = document.getElementById("key2").value.toLowerCase();
	if (key1.length !== key2.length) {
	alert("Alphabet and the key lengths do not coincide!")
	} else {
	let dict = {};
	for (let i=0; i<key1.length; i++) {
	if (key1.substr(i,1).length > 0)
	dict[key1.substr(i,1)] = key2.substr(i,1);
	}
	let result = "";
	for (let i = 0; i<source.length; i++) {
	if (source.substr(i,1) in dict)
	result = result + dict[source.substr(i,1)];
	else
	result = result + source.substr(i,1);
	}
	document.getElementById("encrypted_text").value = result;
	}
	};

	const alpha = (lang) => {
	if (lang === "en")
	document.getElementById("key1").value = "abcdefghijklmnopqrstuvwxyz";
	document.getElementById("key2").value = document.getElementById("key1").value.shuffle();
	};
	alpha("en");
	</script>
	</body>
	</html>