initial commit

Challenge 01 - ONE Encriptador
FrancoBRB · Aug 9, 2022 · 6ef74b3 · 6ef74b3
commit 6ef74b3
Show file tree

Hide file tree

Showing 6 changed files with 457 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Encriptador</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+  </head>
+  <body class="grid-container">
+    <header class="header">
+      <div><img class="alura__logo" src="./static/alura.svg" /></div>
+      <div>
+        <a href="https://github.com/FrancoBRB" target="_blank"
+          ><img class="github__logo" src="./static/github.png"
+        /></a>
+      </div>
+    </header>
+    <aside class="sidebar">
+      <div class="output">
+        <div class="notfound">
+          <img class="doodle" src="./static/doodle.png" />
+          <p class="ntf__1">Ningún mensaje fue encontrado</p>
+          <p></p>
+          <p class="ntf__2">
+            Ingresa el texto que desees encriptar o desencriptar.
+          </p>
+        </div>
+      </div>
+    </aside>
+    <article class="main">
+      <textarea
+        placeholder="Ingrese un texto a aquí"
+        class="e__textarea"
+      ></textarea>
+      <p class="warning">
+        <i class="bi bi-exclamation-circle-fill"></i> Solo letras minúsculas y
+        sin acentos
+      </p>
+      <div class="div_btns">
+        <button class="encript__btn" role="button" onclick="encryptText()">
+          Encriptar
+        </button>
+        <button class="decript__btn" role="button" onclick="decryptText()">
+          Desencriptar
+        </button>
+      </div>
+    </article>
+    <script src="./main.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,86 @@
+const d = document;
+const txtarea = d.querySelector(".e__textarea");
+
+function encryptText() {
+  let key = txtarea.value.toLowerCase();
+  if (key.length === 0) {
+    txtarea.classList.add("animate__animated", "animate__shakeX");
+    setTimeout(resetTxtarea, 1000);
+    return false;
+  }
+  let output = "";
+  for (let i = 0; i < key.length; i++) {
+    if (key[i] === "a") output += "ai";
+    if (key[i] === "e") output += "enter";
+    if (key[i] === "i") output += "imes";
+    if (key[i] === "o") output += "ober";
+    if (key[i] === "u") output += "ufat";
+    if (
+      key[i] != "a" &&
+      key[i] != "e" &&
+      key[i] != "i" &&
+      key[i] != "o" &&
+      key[i] != "u"
+    )
+      output += key[i];
+  }
+  console.log(output); // CONSOLE LOG
+
+  return resetOutput(output);
+}
+
+function resetOutput(output) {
+  const parent = d.querySelector(".output");
+  const img = d.querySelector(".doodle");
+  const ntf1 = d.querySelector(".ntf__1");
+  const ntf2 = d.querySelector(".ntf__2");
+  if (img != null) {
+    img.style.display = "none";
+    ntf1.style.display = "none";
+    ntf2.style.display = "none";
+    parent.style.display = "block";
+  }
+  parent.innerHTML = `
+  <textarea class="d__textarea" id="output__text">${output}</textarea>
+  <p>
+  <div class="tooltip">
+  <button id="btn__copy" class="btn__copy" data-clipboard-action="copy" onclick="clickTooltip()" onmouseout="outTooltip()" data-clipboard-target="#output__text">
+      <span class="tooltiptext" id="myTooltip">Copiar texto</span>
+      <i class="bi bi-clipboard copyico"></i>
+    </button>
+  </div>
+  </p>
+  `;
+  let clipBoard = new ClipboardJS("#btn__copy");
+}
+
+function decryptText() {
+  let key = txtarea.value.toLowerCase();
+  if (key.length === 0) {
+    txtarea.classList.add("animate__animated", "animate__shakeX");
+    setTimeout(resetTxtarea, 1000);
+    return false;
+  }
+  let a = (key) => key.replaceAll("ai", "a");
+  let e = (key) => key.replaceAll("enter", "e");
+  let i = (key) => key.replaceAll("imes", "i");
+  let o = (key) => key.replaceAll("ober", "o");
+  let u = (key) => key.replaceAll("ufat", "u");
+  console.log(a(e(i(o(u(key)))))); // CONSOLE LOG
+
+  return resetOutput(a(e(i(o(u(key))))));
+}
+
+function clickTooltip() {
+  let tooltip = d.querySelector("#myTooltip");
+  tooltip.innerHTML = "Copiado!";
+}
+
+function outTooltip() {
+  let tooltip = d.querySelector("#myTooltip");
+  tooltip.innerHTML = "Copiar texto";
+}
+
+function resetTxtarea() {
+  txtarea.classList.remove("animate__animated", "animate__shakeX");
+}
diff --git a/static/alura.svg b/static/alura.svg
diff --git a/static/doodle.png b/static/doodle.png
diff --git a/static/github.png b/static/github.png