Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

challenge-encriptador

por JavierFernandezFigueroa
| 99.4k xp | 16 posts
Operador

buenas realice mi codigo y funciona correctamente, pero el diseño me parece muy tosco por ejemplo quisiera que lo que escribo en el cuadro de texto comenzará por arriba y bajará de manera vertical pero sigue de manera horizontal indefinidamente, más que nada eso y alguna recomendacion de como mejorara el desarrollo web para que se vea como el diseño de figma o como podria exportar eso directamente para utilizarlo en mi código para mejorar la experiencia del usuario adjunto mi codigo para ver si alguien me puede ayudar el codigo por lo que tengo entendido ya cumple todos los requerimientos pedidos simplemente lo quiero mejorar mas

3 respuestas
por JavierFernandezFigueroa
| 99.4k xp | 16 posts
Operador

script

function encriptarDesencriptar(encriptar) {
    var texto = document.querySelector("#input-texto").value.toLowerCase(); // Convertir el texto a minúsculas
    var caracteresProhibidos = /[^a-z\s]/g; // Expresión regular para caracteres prohibidos (excluyendo el espacio)
    if (caracteresProhibidos.test(texto)) {
        alert("¡Solo se permiten letras minúsculas sin acentos y caracteres especiales (excepto espacio)!");
        document.querySelector("#input-texto").value = texto.replace(caracteresProhibidos, ""); // Remover caracteres prohibidos del input
        return; // Salir de la función si se encontraron caracteres prohibidos
    }
    var textoCifrado;
    if (encriptar) {
        textoCifrado = texto.replace(/e/g, "enter").replace(/i/g, "imes").replace(/a/g, "ai").replace(/o/g, "ober").replace(/u/g, "ufat");
    } else {
        textoCifrado = texto.replace(/enter/g, "e").replace(/imes/g, "i").replace(/ai/g, "a").replace(/ober/g, "o").replace(/ufat/g, "u");
    }
    document.querySelector(".text-input-salida").value = textoCifrado;
}

var boton1 = document.querySelector("#btn-encriptar");
boton1.onclick = function() {
    encriptarDesencriptar(true);
};

var boton2 = document.querySelector("#btn-desencriptar");
boton2.onclick = function() {
    encriptarDesencriptar(false);
};

var boton3 = document.querySelector("#btn-copy");
boton3.onclick = function() {
    var textoCifrado = document.querySelector(".text-input-salida").value;
    var elementoTemporal = document.createElement("textarea");
    document.body.appendChild(elementoTemporal);
    elementoTemporal.value = textoCifrado;
    elementoTemporal.select();
    document.execCommand("copy");
    document.body.removeChild(elementoTemporal);
};

var inputTexto = document.querySelector("#input-texto");
inputTexto.addEventListener("input", function() {
    var texto = inputTexto.value.toLowerCase(); // Convertir el texto a minúsculas
    var caracteresProhibidos = /[^a-z\s]/g; // Expresión regular para caracteres prohibidos (excluyendo el espacio)
    if (caracteresProhibidos.test(texto)) {
        alert("¡Solo se permiten letras minúsculas sin acentos y caracteres especiales (excepto espacio)!");
        inputTexto.value = texto.replace(caracteresProhibidos, ""); // Remover caracteres prohibidos del input
    }
});
por JavierFernandezFigueroa
| 99.4k xp | 16 posts
Operador

codigo base html

<!DOCTYPE html>
<html lang="es-en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Estilos para el título */
    .titulo {
      /* Agrega aquí tus estilos personalizados */
    }

    /* Estilos para el formulario de ingreso de texto */
    .form { 
      position: absolute;
      width: 200px;
      height: 200px;
      left: 700px;
      top: 100px;
      color: #0A3871;
      flex: none;
      order: 0;
      flex-grow: 0;

      /* Agrega aquí tus estilos personalizados */
    }

    /* Estilos para el boton de encriptar */
    .btn-encriptar {position: absolute;
      width: 100px;
      height: 100px;
      left: 0px;
      top: 600px;

      /* Agrega aquí tus estilos personalizados */
    }
/* Estilos para el boton de desencriptar */
    .btn-desencriptar {position: absolute;
      width: 100px;
      height: 100px;
      left: 200px;
      top: 600px;


    }

    /* Estilos para la sección de mensaje encriptado */
    .msg { position: absolute;
      width: 30px;
      height: 50px;
      left: 100px;
      top: 100px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      vertical-align: top;
      /* Agrega aquí tus estilos personalizados */
    }

    /* Estilos para el cuadro de texto de salida */
    .text-input-salida {
     position: absolute;
  width: 300px;
  height: 540px;
  left: 1400px;
  top: 50px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  vertical-align: top;
  color: #0A3871;
  padding: 10px; /* Agregamos un espacio de relleno de 10px */
  resize: none; /* Desactivamos la redimensión del cuadro de texto */
  border: 1px solid #ccc; /* Agregamos un borde de 1px con color gris claro */
  overflow: auto;
  writing-mode: vertical-rl; /* Agrega esta línea para cambiar la dirección del texto */
  text-orientation: upright; /* Agrega esta línea para mantener la orientación del texto en posición vertical */
    }

    /* Estilos para el botón copiar */
    .btn-copy { position: absolute;
      width: 310px;
      height: 100px;
      left: 1400px;
      top: 658px;
      color: #0A3871;
      flex: none;
      order: 0;
      flex-grow: 0;
      /* Agrega aquí tus estilos personalizados */
    }

    /* Estilos para el título del mensaje encriptado */
    .titulo-msg {
       position: absolute;
      width: 30px;
      height: 50px;
      left: 1300px;
      top: 100px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      vertical-align: top;
      color: #0A3871;
      /* Agrega aquí tus estilos personalizados */
    }
/* texto de entrada  */
    .text-input-entrada {
       position: absolute;
  width: 300px;
  height: 400px;
  left: -10px;
  top: 100px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  vertical-align: top;
  color: #0A3871;
  padding: 10px; /* Agregamos un espacio de relleno de 10px */
  resize: none; /* Desactivamos la redimensión del cuadro de texto */
  border: 1px solid #ccc; /* Agregamos un borde de 1px con color gris claro */
  overflow: auto;
   writing-mode: vertical-rl; /* Agrega esta línea para cambiar la dirección del texto */
  text-orientation: upright; /* Agrega esta línea para mantener la orientación del texto en posición vertical */
    }



  </style>
</head>
<body>
  <h1 class="titulo">Encriptador</h1>

  <main class="main">
    <section class="form box">
      <form action="">
        <label for="input-texto">Solo letras minúsculas, sin acento</label>
        <input class="text-input-entrada" type="text" name="input-texto" id="input-texto" placeholder="Ingrese el texto aqui">
        <input class="btn-encriptar" type="button" value="encriptar" id="btn-encriptar">
        <input class="btn-desencriptar" type="button" value="desencriptar" id="btn-desencriptar">
      </form>
    </section>

    <section class="msg box">
      <h2 class="titulo-msg">Mensaje encriptado:</h2>
      <input class="text-input-salida" type="text" id="msg">
      <input class="btn-copy" type="button" value="copiar" id="btn-copy">
    </section>
  </main>

  <script src="scriptprogramador final.js"></script>
por Bruno Botelho de Souza
| 3933.7k xp | 14897 posts
Alura Scuba Team Scuba Team | Front-end

Hola Javier,

El foro Off topic, no es el mejor lugar para postear dudas sobre el challenge.

Si aún tienes duda sobre tu proyecto por favor responda a este tópico, estaré feliz en ayudarte.

De antemano, te dejo mi GitHub, donde completé el challenge, https://github.com/darkmoonsk/aluracrypter, las informaciones están en portugués, pero el código se puede entender por qué lo escribí usando el inglés.

Un tip que puedo darte es leer código de otros desarrolladores, esto hace con vayas percibiendo las diferentes maneras de resolver un problema.

Y GitHub está lleno de código abierto que puedes leer, solo debes buscar por un tipo de proyecto que sea de tu interés y empezar la lectura.

Otro tip que puedo darte es resolver desafíos en páginas como HackerRank, Exercism, Leetcode, CodinGame etc.

Para entrenar la implementación de designs en Figma para el código puedes usar https://www.frontendmentor.io/ , donde encontrarás desafíos de todos los niveles.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!