encriptador/index.html at master · EstebanSMS/encriptador · GitHub

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
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>

<html>
    <head lang="es">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Encriptador ONE</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="estilos.css">
    </head>

    <body>
        <header>
            <div>
                <img src="imagenes/Logo.png" alt="logo-alura" class="logo">
            </div>

        </header>
        <main>
            <div class="caja">
                <textarea id="texto" placeholder="Ingrese el texto aquí" pattern="^[a-zA-Z\s]*$"></textarea>
                <!-- <input type="text" id="texto" value="Ingrese el texto aquí"> -->
            </div>

            <div class="container">
                <img src="imagenes/Muñeco.png" id="imagen-muneco" alt="Muñeco buscador" class="muneco">
                <h1 id="mensaje-no-encontrado" class="textmen" >Ningún mensaje fue<br> encontrado</h1>
                <h1 id="mensaje-ingreso" class="texting">Ingresa el texto que desees encriptar o<br> desencriptar.</h1>
                <textarea id="texto-desencriptado" class="textresult" style="display: none;" readonly></textarea>
                <button id="boton-copiar" class="copy">Copiar</button>
            </div>

            <div class="nota">
                <p>Solo letras minúsculas y sin acentos.</p>
            </div>
            <div class="boton">
                <button id="encriptar" class="encrip" onclick="ocultarelementos()">
                    <h1>Encriptar</h1>
                </button>
                <button id="desencriptar" class="desencrip" onclick="ocultarelementos()">
                    <h1>Desencriptar</h1>
                </button>
            </div>
        </main>
        <footer class="rodapie">
            <p>&copy Copyrihgt - Desarrollado por Esteban Muñoz - 2023</p>
            <p>Quito, Ecuador</p>
        </footer>
        <script>
            function ocultarelementos() {
                var imagenmuneco = document.getElementById("imagen-muneco");
                var textoDesencriptado = document.getElementById("texto-desencriptado");
                var mensajeNoEncontrado = document.getElementById("mensaje-no-encontrado");
                var mensajeIngreso = document.getElementById("mensaje-ingreso");
                var botonCopiar = document.getElementById("boton-copiar");
                var textoingreso = document.getElementById("texto");

                if (textoingreso.value === "") {
                    imagenmuneco.style.display = "inline";
                    textoDesencriptado.style.display = "none";
                    mensajeNoEncontrado.style.display = "block";
                    mensajeIngreso.style.display = "block";
                    botonCopiar.style.display = "none";
                } else {
                    imagenmuneco.style.display = "none";
                    textoDesencriptado.style.display = "inline";
                    mensajeNoEncontrado.style.display = "none";
                    mensajeIngreso.style.display = "none";
                    botonCopiar.style.display = "inline";
                }
            }

            function encriptarTexto(texto) {
                var textoEncriptado = texto.replace(/e/g, "enter");
                textoEncriptado = textoEncriptado.replace(/i/g, "imes");
                textoEncriptado = textoEncriptado.replace(/a/g, "ai");
                textoEncriptado = textoEncriptado.replace(/o/g, "ober");
                textoEncriptado = textoEncriptado.replace(/u/g, "ufat");
                return textoEncriptado;
            }

            function desencriptarTexto(textoEncriptado) {
                var texto = textoEncriptado.replace(/ufat/g, "u");
                texto = texto.replace(/ober/g, "o");
                texto = texto.replace(/ai/g, "a");
                texto = texto.replace(/imes/g, "i");
                texto = texto.replace(/enter/g, "e");
                return texto;
            }

            // Obtener referencias a los elementos HTML necesarios
            var inputTexto = document.getElementById("texto");
            var botonEncriptar = document.getElementById("encriptar");
            var botonDesencriptar = document.getElementById("desencriptar");
            var resultado = document.getElementById("texto-desencriptado");

            // Agregar un controlador de eventos al botón "Encriptar"
            botonEncriptar.addEventListener("click", function() {
                var texto = inputTexto.value;
                var textoEncriptado = encriptarTexto(texto);
                resultado.value = textoEncriptado;
            });

            // Agregar un controlador de eventos al botón "Desencriptar"
            botonDesencriptar.addEventListener("click", function() {
                var textoEncriptado = inputTexto.value;
                var texto = desencriptarTexto(textoEncriptado);
                resultado.value = texto;
            });

            function copy() {
                let copyText = document.querySelector("#texto-desencriptado");
                copyText.select();
                document.execCommand("copy");
            }

            document.querySelector("#boton-copiar").addEventListener("click", copy);

            // Obtener el elemento de textarea y agregar un escuchador de eventos 'input'
            const textarea = document.getElementById('texto');
            textarea.addEventListener('input', function() {
            // Obtener el texto actual dentro del textarea
            const texto = textarea.value;
            // Convertir el texto a minúsculas y establecer el valor del textarea
            textarea.value = texto.toLowerCase();
            });

        </script>
    </body>
</html>