Website working

Alex-Turing · Aug 14, 2024 · e776ce2 · e776ce2
commit e776ce2
Show file tree

Hide file tree

Showing 9 changed files with 485 additions and 0 deletions.
diff --git a/encrypter.js b/encrypter.js
@@ -0,0 +1,99 @@
+/*
+   Author: Jeisson Alexander Hernandez
+   Date:   August, 2024
+   Encriptador de texto
+   Filename: encrypter.js
+*/
+window.onload = function(){
+    document.getElementById("user_input").value = "";
+    document.getElementById("user_output").value = "";
+}
+function encryptText(text) {
+    const encryption_map = {
+        'e': 'enter',
+        'i': 'imes',
+        'a': 'ai',
+        'o': 'ober',
+        'u': 'ufat'
+    };
+    return text.replace(/[eiaou]/g, match => encryption_map[match]);
+}
+
+function decryptText(text) {
+    const decryption_map = {
+        'enter': 'e',
+        'imes': 'i',
+        'ai': 'a',
+        'ober': 'o',
+        'ufat': 'u'
+    };
+    return text.replace(/enter|imes|ai|ober|ufat/g, match => decryption_map[match]);
+}
+
+function removeAccents(str) {
+    const accents_map = {
+        'á': 'a', 'é': 'e', 'í': 'i', 'ó': 'o', 'ú': 'u',
+        'Á': 'A', 'É': 'E', 'Í': 'I', 'Ó': 'O', 'Ú': 'U',
+        'à': 'a', 'è': 'e', 'ì': 'i', 'ò': 'o', 'ù': 'u',
+        'ã': 'a', 'õ': 'o', 'â': 'a', 'ê': 'e', 'î': 'i',
+        'ô': 'o', 'û': 'u', 'ä': 'a', 'ë': 'e', 'ï': 'i',
+        'ö': 'o', 'ü': 'u', 'ÿ': 'y'
+    };
+    return str.replace(/[áéíóúÁÉÍÓÚàèìòùãõâêîôûäëïöüÿ]/g, match => accents_map[match]);
+}
+
+function encrypt() {
+    let user_input = document.querySelector("#user_input");
+    let user_output = document.querySelector("#user_output");
+
+    let lower_case_text = user_input.value.toLowerCase(); 
+    let text_without_accents = removeAccents(lower_case_text); 
+    let encrypted_text = encryptText(text_without_accents);
+
+    document.getElementById("overlay-container").style.display = "none";
+    document.getElementById("message").innerHTML = "";
+    user_output.value = encrypted_text;
+
+}
+
+function decrypt() {
+    let user_input = document.querySelector("#user_input");
+    let user_output = document.querySelector("#user_output");
+
+    let encrypted_text = user_input.value.toLowerCase();
+    let text_without_accents = removeAccents(encrypted_text);
+    let decrypted_text = decryptText(text_without_accents);
+
+    user_output.value = decrypted_text;
+}
+
+function copy(){
+    let user_output = document.querySelector('#user_output');
+    let message = document.querySelector("#message");
+    if(user_output.value.trim() === '')
+    {
+        message.textContent = "There is no text to copy";
+        setTimeout(() => {
+            message.textContent = "";
+        }, 2000);
+    }    
+    else
+    {
+        user_output.select();
+        user_output.setSelectionRange(0, 99999);
+
+        navigator.clipboard.writeText(user_output.value)
+        .then(() => {
+            message.textContent = "text copied successfully";
+            setTimeout(() => {
+                message.textContent = '';
+            }, 2000);
+        })
+        .catch(error => {
+            message.textContent = "Error while copying text: " + error.message;
+            setTimeout(() => {
+                message.textContent = "";
+            }, 2000);
+        });
+    }
+}
diff --git a/images/AlexHeadshot.jpg b/images/AlexHeadshot.jpg
diff --git a/images/alura-logo.png b/images/alura-logo.png
diff --git a/images/github-logo.png b/images/github-logo.png
diff --git a/images/info.png b/images/info.png
diff --git a/images/linkedin-logo-.png b/images/linkedin-logo-.png
diff --git a/images/no_message.png b/images/no_message.png
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--
+        Author: Jeisson Alexander Hernandez
+        Desafio Encriptador de Texto
+        Date: August, 2024
+    -->
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+    <script src="encrypter.js"></script>
+    <title>Encriptador de Texto</title>
+    <link href="indexstyles.css" rel="stylesheet">
+</head>
+<body>
+  <header>
+    <h1 class="typing-finished">Text Encryptor</h1>
+    <div><a href="https://www.aluracursos.com/"><img src="images/alura-logo.png" alt="alura"></a></div>
+  </header>
+  <div class="container-fluid">
+    <div class="row custom-center">
+      <div class="col-sm-6 button-container">
+        <div class="card shadow-lg cardheight" style="width: 100%;">
+          <div class="card-body">
+            <textarea class="container-fluid" id="user_input" rows="8" placeholder="Insert text here"></textarea>
+            <div>
+              <p class="button-container"><img src="images/info.png" alt="informacion" style="width: 15px; height: 15px; vertical-align: middle;">&nbsp;Only lowercase letters and no accents</p>
+            </div>
+            <div class="row encrypt-container">
+              <div class="col-sm-6 button-container">
+                <button id="encrypt-button" onclick="encrypt()">Encrypt</button>
+              </div>
+              <div class="col-sm-6 button-container">
+                <button class="decrypt-button" onclick="decrypt()">Decrypt</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="card shadow-lg cardheight">
+          <div class="card-body position-relative" style="max-height: 95%;">
+            <div id="overlay-container">
+              <img src="images/no_message.png" alt="overlay image">
+            </div>
+            <textarea class="container-fluid" rows="8" readonly id="user_output"></textarea><br>
+            <p id="message" class="message">No message to decrypt was found</p>
+            <div class="row">
+              <div class="col-sm-12 button-container">
+                <button class="decrypt-button" onclick="copy()">Copy</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</body>
+<div class="separator"></div>
+<footer>
+  <div class="container-fluid">
+    <div class="d-flex justify-content-around align-items-center flex-wrap">
+      <div class="footer-item">
+        <img class="img-fluid rounded-circle shadow mx-auto" src="images/linkedin-logo-.png" alt="linkedin" style="width: 50px; height: 50px;">
+        <a href="https://www.linkedin.com/in/alexander-hernandez-software-developer/" target="_blank" style="color: #ffffff; text-decoration: none; background-color: transparent; display: block; text-align: center;">
+          https://www.linkedin.com/in/alexander-hernandez-software-developer/
+        </a>
+      </div>
+      <div class="footer-item text-center">
+        <img class="img-fluid rounded-circle shadow mx-auto" src="images/AlexHeadshot.jpg" alt="alex" style="width: 80px; height: 80px;">
+        <p class="card-text text-white fs-8" style="background-color: transparent;">Alexander Hernandez</p>
+        <p class="card-text text-white fs-8" style="background-color: transparent;">2024</p>
+      </div>
+      <div class="footer-item">
+        <img class="img-fluid rounded-circle shadow mx-auto" src="images/github-logo.png" alt="github" style="width: 50px; height: 50px;">
+        <a href="https://github.com/dashboard" target="_blank" style="color: #ffffff; text-decoration: none; background-color: transparent; display: block; text-align: center;">
+          https://github.com/dashboard
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>
+</html>