-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (110 loc) · 5.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="es">
<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">
<title>Sprint 01 - Encriptador v1</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="Container">
<img src="img/Logo.png" alt="Logo">
<textarea type="submit" id="textarea-1" cols="30" rows="10" placeholder="Ingrese el texto aqui"></textarea>
<button class="cut-text" id="cut-text">Cortar texto</button>
<div class="Frame-1">
<h5><strong>Solo letras minúsculas y sin acentos</strong></h5>
</div>
<div class="Frame-3">
<button class="encrypt" id="encrypt"><span>Encriptar</span></button><button class="decrypt" id="decrypt"><span>Desencriptar</span></button>
</div>
<div class ="display" id="display">
<div class="Rectangle-1">
<img src="img/Muñeco.png" alt="Muñeco" id="display.imagen">
</div>
<div class="Frame-5" id="display.mensajes">
<p class="Mensaje_1">Ningún mensaje fue <br> encontrado</p>
<p class="Mensaje_2">Ingresa el texto que desees encriptar o desencriptar.</p>
</div>
</div>
<div class="not-display" id="not-display" style="display: none">
<button class="copy-ciphertext" id="copy-ciphertext"><span>Copiar</span></button>
</div>
</div>
<script>
function encryptor(textUser){
textUser = textUser.split("");
for (var i =0; i < textUser.length; i++){
if (textUser[i] == "e"){textUser[i] = "enter"}
if (textUser[i] == "i"){textUser[i] = "imes"}
if (textUser[i] == "a"){textUser[i] = "ai"}
if (textUser[i] == "o"){textUser[i] = "ober"}
if (textUser[i] == "u"){textUser[i] = "ufat"}
}
var textServer = [...textUser].join("");
var p = document.createElement("p");
p.setAttribute("id", "ciphertext");
var ciphertext = document.createTextNode(textServer);
p.appendChild(ciphertext);
document.getElementById("not-display").appendChild(p);
user = true;
}
function decryptor(textUser){
var textServer = textUser;
if (textServer.includes("enter")){textServer = textServer.replace(/enter/gi, "e");}
if (textServer.includes("imes")){textServer = textServer.replace(/imes/gi, "i");}
if (textServer.includes("ai")){textServer = textServer.replace(/ai/gi, "a");}
if (textServer.includes("ober")){textServer = textServer.replace(/ober/gi, "o");}
if (textServer.includes("ufat")){textServer = textServer.replace(/ufat/gi, "u");}
var p = document.createElement("p");
p.setAttribute("id", "ciphertext");
var ciphertext = document.createTextNode(textServer);
p.appendChild(ciphertext);
document.getElementById("not-display").appendChild(p);
user = true;
}
var user = false;
function conection() {
var comprobation = false;
while (comprobation != true){
if (user == true) {
var div = document.getElementById("not-display");
var p = document.getElementById("ciphertext");
div.removeChild(p);
}
var textUser = document.getElementById('textarea-1').value.toString();
if (textUser != textUser.toLowerCase() || textUser != textUser.normalize("NFD").replace(/[\u0300-\u036f]/g, "")){ //|| (/^[ÁÉÍÓÚáéíóúñÑ]+$/g.test(textUser))
alert("Solo letras minúsculas y sin acentos")
user = false;
break;
}
else {
comprobation = true;
document.getElementById("display.imagen").style.visibility = "hidden";
document.getElementById("display.mensajes").style.visibility = "hidden";
if (button == 0){encryptor(textUser);}
else {decryptor(textUser);}
document.getElementById("not-display").style.display = "initial";}
}
}
function copyToClipBoard(text) {
const input = document.createElement("input");
input.setAttribute('value', text.innerText);
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
}
function cutToClipBoard(text) {
text.select();
document.execCommand("cut");
}
//Botones
var button;
document.querySelector("#encrypt").addEventListener("click", ()=>{button = 0; conection()})
document.querySelector("#decrypt").addEventListener("click", ()=>{button = 1; conection()})
document.querySelector("#copy-ciphertext").addEventListener("click", ()=>{copyToClipBoard(document.querySelector("#ciphertext"));})
document.querySelector("#cut-text").addEventListener("click", ()=>{cutToClipBoard(document.querySelector("#textarea-1"));})
</script>
</body>
</html>