Skip to content

Commit

Permalink
Subiendo los archivos al repositorio. El archivo html, css y js es nc…
Browse files Browse the repository at this point in the history 
…esario para el funcionamiento de la página, por otro lado, los elementos dentro de la carpeta 'Recursos' son todos aquellos que no son código, por ejemplo, las imagenes utilizadas o llamadas en el archivo html
  • Loading branch information
@Alri-Ez
Alri-Ez committed Aug 25, 2024
0 parents commit 14b7f41
Show file tree
Hide file tree
Showing 6 changed files with 380 additions and 0 deletions.
Binary file added Recursos/Logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Recursos/Muñeco.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Recursos/bi_exclamation-circle-fill.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="es-mx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Challenge 1: Encriptador de texto</title>
</head>
<body>
<header></header>
<main class="principal">
<div class="principal_logo">
<img class="logo" src="Recursos/Logo.png" alt="Logo de alura Latam">
</div>
<section class="principal-contenido">
<textarea name="campo_cifrar_descifrar" id="campo_cifrar_descifrar" class="principal-campo-escribir" placeholder="Ingresa el texto aquí"></textarea>
<div class="principal_contenido_advertenciaboton">
<p class="presentacion-advertencia"> <img src="Recursos/bi_exclamation-circle-fill.png" alt="Solo minúsculas y sin acentos" class="presentacion-advertencia-imagen"> Solo letras minúsculas y sin acentos.</p>
<div class="principal_contenido_advertenciaboton_botones">
<button style="background-color:#0A3871; color: #FFFFFF;" onclick="cifrar()" name="Cifrar" class="principal-boton">Cifrar</button>
<button style="background-color:#D8DFE8;" onclick="decifrar()" name="Descifrar" class="principal-boton">Descifrar</button>
</div>
</div>
</section>
<div class="pricipal-resultado">
<div class="resultado-antes" id="resultado-antes">
<img class="principal-resultado-muñeco" src="Recursos/Muñeco.png" alt="Dibujo de chico revisando un diamante con una lupa">
<div class="principal-resultado-texto" id="principal-resultado-texto">
<p class="principal-resultado-texto-resaltado"><strong class="resaltar-texto">Ningún mensaje fue encontrado</strong></p>
<p class="principal-resultado-texto-normal">Ingresa el texto que desees encriptar o desencriptar.</p>
</div>
</div>
<div class="resultado-despues" id="resultado-despues">
<p id="resultado" class="resultado"></p>
<button style="background-color:#D8DFE8;" name="Copiar" class="boton-copiar" onclick="copiar()">Copiar</button>
</div>
</div>
</main>
<footer class="pie">
<p>2024 Alberto Rivera Enriquez</p>
<p>Contacto: <a href="alberto.rivera.en@gmail.com">alberto.rivera.en@gmail.com</a></p>
<a href="https://github.com/Alri-Ez">Github</a>
</footer>
<script src="script.js"></script>
</body>
</html>
100 changes: 100 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
//Función para codificar
function codificar(mensaje){
let array = mensaje.split("");
let arraycod = [];
for (let i = 0; i <= array.length - 1; i++){
if ((array[i] != 'a') && (array[i] != 'e') && (array[i] != 'i') && (array[i] != 'o') && (array[i] != 'u')){
arraycod.push(array[i]);
} else{
if (array[i] == 'a'){
arraycod.push('ai');
}else if (array[i] == 'e'){
arraycod.push('enter');
}else if (array[i] == 'i'){
arraycod.push('imes');
}else if (array[i] == 'o'){
arraycod.push('ober');
}else if (array[i] == 'u'){
arraycod.push('ufat');
}
}
}
return arraycod.join('');
}

//Función para decodificar
function decodificar(mensaje){
let array = mensaje.split("");
let arraydec = [];
for (let i = 0; i <= array.length - 1; i++){
if ((array[i] != 'a') && (array[i] != 'e') && (array[i] != 'i') && (array[i] != 'o') && (array[i] != 'u')){
arraydec.push(array[i]);
}else{
if (array[i] == 'a'){
arraydec.push('a');
i+=1;
}else if (array[i] == 'e'){
arraydec.push('e');
i+=4;
}else if (array[i] == 'i'){
arraydec.push('i');
i+=3;
}else if (array[i] == 'o'){
arraydec.push('o');
i+=3;
}else if (array[i] == 'u'){
arraydec.push('u');
i+=3;
}
}
}
return arraydec.join('');
}

//Función para ocultar la pantalla principal y poner el resultado
function ocultar(){
var inicio = document.getElementById('resultado-antes');
var resultado = document.getElementById('resultado-despues');
if (inicio.style.display === 'block') {
resultado.style.display = 'block';
inicio.style.display = 'none';
return;
} else {
resultado.style.display = 'none';
inicio.style.display = 'block';
return;
}
}

//Función para el texto del resultado
function asignarTextoElemento(elemento, texto) {
return document.getElementById(elemento).innerHTML = texto;
}

//Función para copiar
function copiar(){
return navigator.clipboard.writeText(document.getElementById('resultado').innerHTML);
}

//Función para validar que no está vacío el campo de escritura.
function validar(funcion){
if (document.getElementById("campo_cifrar_descifrar").value.length == 0){
return asignarTextoElemento('resultado', 'Ningún mensaje fue encontrado');
}else{
return funcion;
}
}

//Función para boton cifrar
function cifrar(){
ocultar();
validar(asignarTextoElemento('resultado', codificar(document.getElementById('campo_cifrar_descifrar').value)))
return;
}

//Función para boton descifrar
function decifrar(){
ocultar();
validar(asignarTextoElemento('resultado', decodificar(document.getElementById('campo_cifrar_descifrar').value)));
return;
}
234 changes: 234 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
padding: 0;
margin: 0;
}

/*Body*/

body{
background-color: #F1E6CC;
box-sizing: border-box;
height: 100%;
width: 100%;
}

.resaltar-texto{
color: #0F1C50;
}

.principal{
padding: 2.5%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5%;
}

/*------Logo section------*/

.principal_logo{
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 10%;
}

.logo{
padding: 0% 0% 750%;
}

/*------Input------*/

.principal-contenido{
display: flex;
flex-direction: column;
width: 65%;
height: 100%;
justify-content: space-between;
gap: 41rem;
}

.principal-campo-escribir{
width: 100%;
height: 50%;
font-family: "Inter", sans-serif;
font-size: 32px;
background-color: transparent;
border: none;
}

.principal_contenido_advertenciaboton{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}

.presentacion-advertencia-imagen{
width: 16px;
}

.presentacion-advertencia{
font-family: "Inter", sans-serif;
font-size: 12px;
gap: 8px;
}

.principal_contenido_advertenciaboton_botones{
display: flex;
width: 100%;
justify-content: space-between;
gap: 24px;
}

.principal-boton{
width: 45%;
margin: 3% 0%;
padding: 3% 0%;
text-align: center;
border-radius: 24px;
font-family: "Inter", sans-serif;
font-size: 16px;
}

/*------Output------*/

.pricipal-resultado{
width: 25%;
height: 100%;
box-sizing: border-box;
background-color: #5c7391;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
border-radius: 32px;
}

.principal-resultado-muñeco{
padding: 100% 0% 0% 0%;
width: 95%;
}

.principal-resultado-texto{
width: 95%;
padding: 0% 0% 100% 0%;
display: flex;
gap: 16px;
flex-direction: column;
align-items: center;
justify-items: center;
}

.principal-resultado-texto-resaltado{
font-family: "Inter", sans-serif;
font-size: 24px;
font-weight: bold;
text-align: center;
}

.principal-resultado-texto-normal{
font-family: "Inter", sans-serif;
font-size: 16px;
text-align: center;
}

/*Resultado*/

.resultado-despues{
height: 100%;
margin: 5%;
display: none;
}

.resultado{
height: 100%;
padding-bottom: 15%;
font-family: "Inter", sans-serif;
font-size: 24px;
color: #ffffff;
}

.boton-copiar{
width: 100%;
padding: 5%;
text-align: center;
border-radius: 24px;
font-family: "Inter", sans-serif;
font-size: 16px;
}

/*footer*/

.pie{
background-color: #b4b5b7;
display: flex;
padding: 10px;
margin: 25px;
align-items: center;
flex-direction: column;
box-sizing: border-box;
gap: 10px;
}

/*Responsividad*/

@media (max-width: 770px){

.principal{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10% 5%;
}

.principal_logo{
width: 2%;
height: 10%;
}

.principal-contenido{
width: 100%;
height: 65%;
}

.pricipal-resultado{
width: 100%;
height: 25%;
display: flexbox;
flex-direction: column;
align-items: center;
margin: 5% 5% 0% 0%;
gap: 5%;
}
.principal-resultado-muñeco{
display: none;
}
.principal-resultado-texto{
width: 100%;
padding: 5%;
}
.principal-resultado-texto-resaltado{
font-size: 24px;
}
.principal-resultado-texto-normal{
font-size: 16px;
}
}

@media (max-width: 380px){

.principal_contenido_advertenciaboton_botones{
display: flex;
flex-direction: column;
align-items: center;
gap: 3%;
}
.principal-boton{
width: 100%;
height: 100%;
}
}

0 comments on commit 14b7f41

Please sign in to comment.