Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
kjarj54 committed Jan 25, 2024
1 parent 5654d9c commit 232c77b
Show file tree
Hide file tree
Showing 4 changed files with 319 additions and 27 deletions.
44 changes: 31 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<link rel="icon" type="image/svg" href="resources/logo-edited.svg" width="50" height="50">


<!-- bootstrap 5.3.2 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<!-- Enlace al conjunto de iconos Bootstrap desde CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

Expand All @@ -29,17 +24,41 @@

<body>
<header>
<img src="resources/Logo.svg" alt="">
<img src="resources/Logo.svg" alt="logo">
</header>

<main>
<i class="bi bi-info-circle"></i>
<section>

</section>
<section class="inputSection">
<div class="inputContainer">
<textarea class="textInput" id="textInput" placeholder="Ingrese el texto aqui"></textarea>
</div>

<div class="containerIcon">
<div class="warning">
<i class="bi bi-info-circle"></i>
<label>Usar letras minusculas y no usar acentos</label>
</div>

<section>
<div class="buttonContainer">
<button class="btn btn-primary" id="btnEncriptar">Encriptar</button>
<button class="btn btn-secondary" id="btnDesencriptar">Desencriptar</button>
</div>
</div>


</section>

<section class="outputSection">
<div class="outputContainer" id="outputContainer">
<div class="image" id="image">
<img class="muneco" src="resources/muneco.svg" alt="muneco">
<h2>Ningun mensaje fue encontrado</h2>
<p>Ingrese el texto que desees encriptar o desencriptar</p>
</div>
<textarea class="textOutput" id="textOutput" ></textarea>
<button class="btn btnCopy" id="buttonCopy">Copiar</button>
</div>
</section>
</main>

Expand All @@ -56,9 +75,8 @@
<i class="devicon-linkedin-plain"></i></a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src='scritp.js'></script>
</body>

Expand Down
Binary file added resources/favicon.ico
Binary file not shown.
105 changes: 105 additions & 0 deletions scritp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
document.addEventListener("DOMContentLoaded", function () {
const buttonEncrip = document.getElementById("btnEncriptar");
const buttonDesencrip = document.getElementById("btnDesencriptar");
const buttonCopy = document.getElementById("buttonCopy");
const textInput = document.getElementById("textInput");
const textInputProcess = document.getElementById("textOutput");

// Función para encriptar el texto
function btnEncriptar() {
let input = textInput.value.toLowerCase();
const matrizCodigo = [
["e", "enter"],
["i", "imes"],
["a", "ai"],
["o", "ober"],
["u", "ufat"],
];

for (let i = 0; i < matrizCodigo.length; ++i) {
if (input.includes(matrizCodigo[i][0])) {
input = input.replaceAll(matrizCodigo[i][0], matrizCodigo[i][1]);
}
}

textInputProcess.value = input;
textInputProcess.style.background = "white";
textInputProcess.click();

window.getSelection().removeAllRanges();
}

// Función para desencriptar el texto
function btnDesencriptar() {
let output = textInput.value.toLowerCase();
const matrizCodigo = [
["e", "enter"],
["i", "imes"],
["a", "ai"],
["o", "ober"],
["u", "ufat"],
];

for (let i = 0; i < matrizCodigo.length; ++i) {
if (output.includes(matrizCodigo[i][0])) {
output = output.replaceAll(matrizCodigo[i][1], matrizCodigo[i][0]);
}
}

textInputProcess.value = output;
textInputProcess.style.background = "white";
textInputProcess.click();
}

// Función para copiar el resultado
function copy() {
const aux = document.createElement("input");
aux.setAttribute("value", textInputProcess.value);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
showAlert();
}

// Event listeners
buttonEncrip.onclick = btnEncriptar;
buttonDesencrip.onclick = btnDesencriptar;
buttonCopy.onclick = copy;

// Alerta
function showAlert() {
swal("Copiado", "El mensaje se ha copiado", "success");
}

// Mostrar y ocultar elementos
const textProcess = document.getElementById("outputContainer");
const imagen = document.getElementById("image");

textProcess.addEventListener("mouseover", () => {
if (textInputProcess.value === "") {
textInputProcess.value = "";
}
textInputProcess.style.display = "inline";
imagen.style.display = "none";
buttonCopy.style.display = "inline";
});

textProcess.addEventListener("mouseleave", () => {
if (textInputProcess.value === "") {
textInputProcess.value = "";
imagen.style.display = "inline";
textInputProcess.style.display = "none";
buttonCopy.style.display = "none";
}
});

textProcess.addEventListener("click", () => {
if (textInputProcess.value.length === 0) {
textInputProcess.value = "";
}
textInputProcess.style.display = "inline";
imagen.style.display = "none";
buttonCopy.style.display = "inline";
});
});
197 changes: 183 additions & 14 deletions styles.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
* {
margin: 0;
padding: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
Expand Down Expand Up @@ -29,25 +30,193 @@ main {
}

footer {
height: auto;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
color: #0A3871;
padding-bottom: 1rem;
height: auto;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
color: #0a3871;
padding-bottom: 1rem;
}

section {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
height: auto;
}

.inputContainer {
width: 100%;
display: flex;
justify-content: center;
}

.textInput {
background-color: transparent;
border: none;
min-height: 150px;
width: 90%;
font-size: 25px;
font-weight: 500;
color: #0a3871;
}

.textInput:focus {
outline: none;
}

.containerIcon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.warning {
margin-left: 5%;
align-self: flex-start;
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 12px;
}

.warning > label {
margin-left: 5px;
}

.buttonContainer {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}

.btn {
border-radius: 25px;
font-size: 16px;
font-weight: 400;
border: none;
}

.btn-primary {
margin: 2%;
width: 340px;
height: 67px;
background-color: #0a3871;
color: #e5e5e5;
}

.btn-secondary {
margin: 2%;
width: 340px;
height: 67px;
border: 1px solid #0a3871;
color: #0a3871;
}

.outputContainer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 25px;
padding: 5px;
width: 90%;
height: 180px;
background: #ffffff;
}

.outputContainer h2 {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
}

.outputContainer p {
text-align: center;
}

.image {
position: relative;
}

.muneco {
width: 90%;
display: none;
}

.textOutput {
text-align: center;
font-size: 25px;
border: none;
border-radius: 25px;
height: 180px;
width: 90%;
display: none;
}

.textOutput:focus {
outline: none;
background-color: #ffffff;
}

.btnCopy {
height: 48px;
width: 80%;
background-color: white;
color: var(--azul-fuerte);
border-radius: 14px;
border: 1px solid #0a3871;
display: none;
}

.btnCopy:hover {
cursor: pointer;
}

@media (min-width: 600px) {
main {
width: 100%;
flex-wrap: nowrap;
}

.inputSection {
height: 70vh;
width: 60%;
}


}
.warning {
font-size: 14px;
}

.muneco {
display: inline;
}

.outputSection {
height: 70vh;
width: 40%;
}
.outputContainer {
height: auto;
}
.textOutput {
text-align: center;
border: none;
border-radius: 25px;
height: 90%;
width: 90%;
}
.textOutput::placeholder {
text-align: center;
padding-top: 100%;
font-size: 12px;
font-weight: bold;
color: black;
}
}

0 comments on commit 232c77b

Please sign in to comment.