Skip to content

Commit

Permalink
Encriptador de Challenge Alura
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jhonatan0124
Jhonatan0124 committed Feb 17, 2024
0 parents commit ed08e9b
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 0 deletions.
210 changes: 210 additions & 0 deletions encriptador.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
*{
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
body{
background-color: #f4f4fc;
}
header{
width: 100%;
height: 70px;
}

#video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

#video-background {
width: 100%;
height: 100%;
object-fit: cover;
}

.logo{
width: 100px;
height: 50px;
padding-top: 20px;
padding-left: 40px;

}

main{
position: absolute;
width: 100%;
height: 90%;
display: flex;
justify-content: space-between;
}

.contenedor-caja-texto{
position: absolute;
left: 200px;
top: 100px;
padding-left: 100px;
width: 1080px;
height: 600px;
display: flex; /* Añadir display: flex; */
align-items: center; /* Centrar verticalmente */
}

.caja-texto{
width: 80%;
height: 80%;
border: none;
background-color: #f4f4fc;
cursor: pointer;
color: #034d33;
font-size: 32px;
font-weight: 400;
font-family: 'Inter', sans-serif;
text-align: center; /* Para centrar el texto */
border-radius: 20px; /* Para hacer los bordes más redondeados */
}

.caja-texto::placeholder{
color: #074796;

}

.alerta{
position: absolute;
top: 750px;
left: 370px;
display: flex;
color: #d9e3ed;
font-size: 20px;
font-weight: 400;
font-family: 'Inter', sans-serif;
}

.contenedor-botones{
position: absolute;
top: 800px;
height: 80px;
padding-left: 15%;
padding-top: 15px;

}

.boton-encriptar{
width: 328px;
height: 67px;
border-radius: 24px;
background-color: #0A3871;
color: white;
font-size: 20px;
font-weight: 400;
font-family: 'Inter', sans-serif;
border: none;
margin-right: 20px;
cursor: pointer;
}

.boton-desencriptar{
width: 328px;
height: 67px;
border-radius: 24px;
background-color: #E73715;
color: #f3f5f7;
font-size: 20px;
font-weight: 400;
font-family: 'Inter', sans-serif;
border: 1px solid #0A3871;
cursor: pointer;
}

.seccion2{
display: block;
position: relative;
width: 400px;
height: 940px;
right: 400px;
padding-right: 20px;
background-color: #ffffff;
box-sizing: border-box;
border-radius: 32px;
box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.50);
}

.contenedor-figura{
position: absolute;
left: 30px;
top: 180px;
box-sizing: border-box;
padding-top: 50px;

}

.contenedor-parrafo{
position: absolute;
box-sizing: border-box;
top: 570px;
left: 40px;
}

.contenedor-parrafo h3{
font-size: 24px;
font-weight: 700;
font-family: 'Inter', sans-serif;
text-align: center;
color: #343A40;
}

.contenedor-parrafo P{
font-family:'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
color: #495057;
padding-top: 20px;
}

.contenedor-resultado{
position: absolute;
bottom: 400;
width: 320px;
height: 450px;
padding: 0;
box-sizing: border-box;
margin-left: 25px;
}

.contenedor-resultado p{
color: #495027;
font-size: 25px;
}

.contenedor-copiar{
display: flex;
position: absolute;
bottom: 400;
top: 700px ;
padding-left: 40px;
}

.boton-copiar{
width: 328px;
height: 67px;
border-radius: 24px;
background-color: #ffffff;
color: #0A3871;
font-size: 20px;
font-weight: 400;
font-family:'Inter', sans-serif;
border: 1px solid #0A3871;
cursor: pointer;
position: relative;
top: 100px;
right: 4px;
}

.ocultar{
display: none;
}
Binary file added imagenes/alerta.jpg
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 imagenes/logo-alura.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 imagenes/neo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions menu.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-with, initial-scale=1.0">
<link rel="stylesheet" href="encriptador.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Challenge Encriptador</title>
</head>
<body>
<header>
<h1><img class="logo" src="imagenes/logo-alura.png" alt="Logo"></h1>
</header>
<main>
<div id="video-container">
<video autoplay muted loop id="video-background">
<source src="/video/matrix.mp4" type="video/mp4">
</video>
</div>

<section class="seccion1">
<div class="contenedor-caja-texto">
<textarea placeholder="Ingrese el texto aqui" class="caja-texto"></textarea>
</div>
<div class="alerta">
<img src="imagenes/alerta.jpg" alt="alerta">
<p>Solo letras minusculas y sin acentos</p>
</div>
<div class="contenedor-botones">
<input type="button" class="boton-encriptar" value="Encriptar">
<input type="button" class="boton-desencriptar" value="Desencriptar">
</div>
</section>
<section class="seccion2">
<div class="contenedor-figura">
<img src="imagenes/neo.png" alt="Figura">
</div>
<div class="contenedor-parrafo">
<h3>Ningun mensaje fue <br> Encontrado</h3>
<p>Ingresa el texto que desees encriptar o <br> desencriptar.</p>
</div>
<div class="contenedor-copiar">
<input type="button" class="boton-copiar" value="Copiar">
</div>
<div class="contenedor-resultado">
<p class="texto-resultado"></p>
</div>
</section>
</main>
<script src="script.js" ></script>
</body>
</html>
98 changes: 98 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
var botonEncriptar = document.querySelector('.boton-encriptar');
var botonDesencriptar = document.querySelector('.boton-desencriptar');
var figura = document.querySelector('.contenedor-figura');
var contenedor = document.querySelector('.contenedor-parrafo');
var resultado = document.querySelector('.texto-resultado');

botonEncriptar.onclick = encriptar;
botonDesencriptar.onclick = desencriptar;

function encriptar(){
ocultarAdelante();
var cajatexto = recuperarTexto();
resultado.textContent = encriptarTexto(cajatexto);
// Vaciar el área de texto después de encriptar
document.querySelector('.caja-texto').value = '';
}

function desencriptar(){
ocultarAdelante();
var cajatexto = recuperarTexto();
resultado.textContent = desencriptarTexto(cajatexto);
}

function recuperarTexto(){
var cajatexto = document.querySelector('.caja-texto')
return cajatexto.value
}

function ocultarAdelante(){
contenedor-figura.classList.add('ocultar');
contenedor.classList.add('ocultar');
}

function encriptarTexto(mensaje){
var texto = mensaje;
var textoFinal = '';

for (var i = 0; i < texto.length; i++){
if(texto[i] == 'a'){
textoFinal = textoFinal + 'ai'
}
else if(texto[i] == 'e'){
textoFinal = textoFinal + 'enter'
}
else if(texto[i] == 'i'){
textoFinal = textoFinal + 'imes'
}
else if(texto[i] == 'o'){
textoFinal = textoFinal + 'ober'
}
else if(texto[i] == 'u'){
textoFinal = textoFinal + 'ufat'
}
else{
textoFinal = textoFinal + texto[i]
}
}
return textoFinal;
}

function desencriptarTexto(mensaje){
var texto = mensaje;
var textoFinal = '';

for (var i = 0; i < texto.length; i++){
if(texto[i] == 'a'){
textoFinal = textoFinal + 'a'
i = i+1;
}
else if(texto[i] == 'e'){
textoFinal = textoFinal + 'e'
i = i+4;
}
else if(texto[i] == 'i'){
textoFinal = textoFinal + 'i'
i = i+3;
}
else if(texto[i] == 'o'){
textoFinal = textoFinal + 'o'
i = i+3;
}
else if(texto[i] == 'u'){
textoFinal = textoFinal + 'u'
i = i+3;
}
else{
textoFinal = textoFinal + texto[i]
}
}
return textoFinal;
}

const botonCopiar = document.querySelector('.boton-copiar');
botonCopiar.addEventListener('click',copiar = () => {
var contenido = document.querySelector('.texto-resultado').textContent;
navigator.clipboard.writeText(contenido)
console.log('Hola');
})
Binary file added video/matrix.mp4
Binary file not shown.

0 comments on commit ed08e9b

Please sign in to comment.