-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Corregimos la version segun requerimentos del ejercicio
- Loading branch information
Mauricio Cox
committed
Feb 1, 2024
1 parent
832d32e
commit 499d76f
Showing
6 changed files
with
257 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| function encriptar(textoValor) { | ||
| // let textoValor = document.getElementById('caja-texto').value; | ||
| // let textoMod = document.getElementById('texto-resultado'); | ||
| let cifrado = textoValor | ||
| .replace(/e/g, "enter") | ||
| .replace(/i/g, "imes") | ||
| .replace(/a/g, "ai") | ||
| .replace(/o/g, "ober") | ||
| .replace(/u/g, "ufat"); | ||
| // document.getElementById('caja-texto').value = ""; | ||
| // textoMod.innerHTML = cifrado; | ||
| return cifrado; | ||
| } | ||
|
|
||
| function desencriptar() { | ||
| let textoMod = document.getElementById('texto-resultado').value; | ||
| let cifrado = textoMod | ||
| .replace(/enter/g, "e") | ||
| .replace(/imes/g, "i") | ||
| .replace(/ai/g, "a") | ||
| .replace(/ober/g, "o") | ||
| .replace(/ufat/g, "u"); | ||
| document.getElementById('texto-resultado').innerHTML = cifrado; | ||
| return | ||
| } | ||
|
|
||
| function copiar() { | ||
| let textoCopiar = document.getElementById("texto-resultado"); | ||
| let copiarAlPortaPapel = async str => { | ||
| try { | ||
| await navigator.clipboard.writeText(str); | ||
| alert("copiado"); | ||
| } catch (error) { | ||
| alert(error); | ||
| } | ||
| }; | ||
| copiarAlPortaPapel(textoCopiar.textContent); | ||
|
|
||
| textoCopiar.value = ""; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| // <Darkmode | ||
| const themeButton = document.getElementById('theme_button'); | ||
| const darkTheme = 'dark-theme'; | ||
| const selectedTheme = localStorage.getItem('selected-theme'); | ||
| const userHasDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'; | ||
| // </Darkmode | ||
|
|
||
| let inputTxt = document.getElementById('input_txt'); | ||
| let btnEncript = document.getElementById('btn_encript'); | ||
| let btnDecript = document.getElementById('btn_decrypt'); | ||
| let encryptedMessage = document.getElementById('encrypted_message'); | ||
| let btnCopy = document.getElementById('btn_copy'); | ||
| let emptyMessage = document.querySelector('.empty-message'); | ||
| let displayMessage = document.querySelector('.display-message'); | ||
| let form = document.querySelector('form'); | ||
| let passCrypto = "Clave_cifrado_y_descifrado@123#"; | ||
|
|
||
| // <Darkmode | ||
| if (selectedTheme) { | ||
| document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme); | ||
| } else { | ||
| if (userHasDarkTheme) document.body.classList.add(darkTheme); | ||
| } | ||
|
|
||
| themeButton.addEventListener('click', () => { | ||
| document.body.classList.toggle(darkTheme); | ||
| localStorage.setItem('selected-theme', getCurrentTheme()); | ||
| }); | ||
| // </Darkmode | ||
|
|
||
| btnEncript.addEventListener("click", function(event) { | ||
| event.preventDefault(); | ||
| if (/[A-ZÁÉÍÓÚÜÑ]/.test(inputTxt.value) || /[^a-z\s]/i.test(inputTxt.value) || inputTxt.value == "") { | ||
| alert('El texto NO debe contener Mayúsculas ni Carateres especiales\nni estar vacío, intentalo nuevamente') | ||
| emptyMessage.classList.remove('hide-content'); | ||
| displayMessage.classList.add('hide-content'); | ||
| } else { | ||
| encryptedMessage.textContent = encriptMessage(inputTxt.value); | ||
|
|
||
| emptyMessage.classList.add('hide-content'); | ||
| displayMessage.classList.remove('hide-content'); | ||
| decryptText(encryptedMessage.textContent) | ||
| } | ||
|
|
||
| form.reset(); | ||
| }); | ||
|
|
||
| btnDecript.addEventListener('click', function(event){ | ||
| event.preventDefault(); | ||
| console.log('click en desencriptar: '+decryptText(encryptedMessage.textContent)) | ||
| encryptedMessage.innerText = decryptText(encryptedMessage.textContent); | ||
| form.reset() | ||
| }); | ||
|
|
||
| btnCopy.addEventListener('click', function() { | ||
| copyTextContent(); | ||
| }); | ||
|
|
||
| // Función para encriptar texto con AES | ||
| function encriptMessage(txt) { | ||
| let encrypted = CryptoJS.AES.encrypt(txt, passCrypto); | ||
| return encrypted.toString(); | ||
| } | ||
|
|
||
| // Función para desencriptar texto con AES | ||
| function decryptText(encryptedText) { | ||
| var decrypted = CryptoJS.AES.decrypt(encryptedText, passCrypto).toString(CryptoJS.enc.Utf8); | ||
| return decrypted; | ||
| } | ||
|
|
||
| // Usar el API de Clipboard para copiar el texto | ||
| function copyTextContent() { | ||
| navigator.clipboard.writeText(encryptedMessage.textContent).then(function () { | ||
| console.log(`Texto copiado (${encryptedMessage.textContent}) al porta papeles`); | ||
| }).catch(function (err) { | ||
| console.error('No se pudo copiar el texto al portapapeles', err); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="es-AR"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>v0.0.2</title> | ||
| <link rel="stylesheet" href="./css/style.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> | ||
| <link rel="shortcut icon" href="#" type="image/x-icon"> | ||
| </head> | ||
|
|
||
| <body class="dark-theme"> | ||
| <!-- <body> --> | ||
| <header> | ||
| <div class="logo"> | ||
| <h1>txt</h1> | ||
| <small>Encrypt challenge</small> | ||
| </div> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="./index.html">v0.0.1</a></li> | ||
| <li class="active"><a href="./version-002.html">0.0.2</a></li> | ||
| </ul> | ||
| <!-- <select id="version"> | ||
| <a href="index.html"><option value="0.0.1"></option>0.0.1</option></a> | ||
| <option value="0.0.1"><a href="version-002.html">0.0.2</a></option> | ||
| </select> --> | ||
| <button class="change-theme-button" id="theme_button"></button> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <div> | ||
| <h2>Encypt txt challenge</h2> | ||
| <p>Ingresa el texto que desees encriptar o desencriptar.</p> | ||
| <p>Solo letras minúsculas, sin acentos, sin caracteres especiales y no puede estar vacío.</p> | ||
| </div> | ||
| <form> | ||
| <textarea id="input_txt" class="input-txt" placeholder="Ingresar texto" autofocus></textarea> | ||
| <div class="btn-group"> | ||
| <button id="btn_decrypt"> | ||
| <i class="bi bi-file-earmark-code"></i> | ||
| Desencriptar | ||
| </button> | ||
| <button id="btn_encript"> | ||
| <i class="bi bi-file-earmark-code-fill"></i> | ||
| Encriptar | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </main> | ||
| <section class="empty-message"> | ||
| <div> | ||
| <!-- <img src="./img/no-message-img.svg" alt="No message image"> --> | ||
| <i class="bi bi-exclamation-octagon-fill"></i> | ||
| <h2>Ningún mensaje fue encontrado</h2> | ||
| <p>Ingresa el texto que desees encriptar o desencriptar.</p> | ||
| </div> | ||
| </section> | ||
| <section class="display-message hide-content"> | ||
| <div> | ||
| <div> | ||
| <h2>Mensaje encriptado</h2> | ||
| <textarea id="encrypted_message" class="emcrypted-message" disabled>### #### #### #### ####</textarea> | ||
| </div> | ||
| <div class="copy-btn-content"> | ||
| <button id="btn_copy" title="Copiar mensaje"> | ||
| <i class="bi bi-floppy-fill"></i> | ||
| Copiar | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <footer> | ||
| <small>© Copyright - 2024 | Mauricio Cox</small> | ||
| <div class="social"> | ||
| <a href="https://github.com/coxmau77" target="_blank" rel="noopener noreferrer" | ||
| title="Visitar perfil en GitHub"> | ||
| <i class="bi bi-github"></i> | ||
| </a> | ||
| <a href="https://www.linkedin.com/in/coxmau77/" target="_blank" rel="noopener noreferrer" | ||
| title="Visitar perfil en Linkedin"> | ||
| <i class="bi bi-linkedin"></i> | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script> | ||
| <script src="./js/version-002.js"></script> | ||
| </body> | ||
|
|
||
| </html> |