Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

Encriptador no me funcionan los botones...

Hola los botones no me sirven, creo que es algo con los nombres

les adjunto el HTML, el CSS y JS

gracias por su ayuda =)

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Encriptador</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">


    </head>
    <body>
        <main class="container-encriptador">

            <div class="banner">
                <img class="logo-alura" src="logo e imagenes alura/alura logo1.png" alt="Alura logo"></img>
                <h1 class="texto-titulo">Encriptador Personal</h1>
            </div>

            <h2 class="caja-encriptador"> <input class="texto-input" id="inputTexto" type="mensaje fue econtrado" placeholder="Ingrese el texto aquí"></input> </h2>
            <!--<label for="input-encriptador"> </label>
            <input type="text" id="input-encriptador" class="input-encriptador" required placeholder="Ingrese el texto aquí"></input>-->

           <div class="encriptador">
             <img id="muneco" class="muneco" src="logo e imagenes alura/muneco.png" alt="imagen niña diamante y lupa" >
             <textarea id="texto" class="texto-encriptado" name="name" rows="4" cols="25">Ingresa el texto que desees encriptar o desencriptar.</textarea>
             <buttom id="copiar" type="buttom"  name="button" class="copiarTexto" onclick="copy()">Copiar Texto</buttom>
           </div>

            <div class="fondo">   <!--class="botones-encriptador"-->

                <input  type="submit" value="Encriptar"  class="encriptar"  ></input>

                <!--<buttom type="buttom" name="button" id="desencriptar"   onclick="desencriptar()">Desencriptar</buttom>-->

                <input type="submit" value="Desencriptar" class="desencriptar"></input>
            </div>
            <div>
                <p  class="nota">Sólo minúsculas y sin acento.</p>
            </div>

        </main>
        <script type="text/javascript" src="script.js"></script>       
    </body>
</html>
4 respuestas

JS

function encriptar(){
    var texto = document.getElementById("inputTexto").value.toLowerCase();
    var txtCifrado = texto.replace(/e/igm,"enter");
    var txtCifrado = txtCifrado.replace(/o/igm,"ober");
    var txtCifrado = txtCifrado.replace(/i/igm,"imes");
    var txtCifrado = txtCifrado.replace(/a/igm,"ai");
    var txtCifrado = txtCifrado.replace(/u/igm,"ufat");

    document.getElementById("#muneco").style.display = "none";
    document.getElementById("texto").style.display = "none";
    document.getElementById("textoEncriptado").innerHTML = txtCifrado;
    document.getElementById("copiar").style.display = "show";
    document.getElementById("copiar").style.display =  "inherit";
}

function desencriptar(){
    var texto = document.getElementById("inputTexto").value.toLowerCase();
    var txtCifrado = texto.replace(/enter/igm,"e",);
    var txtCifrado = txtCifrado.replace(/ober/igm,"o");
    var txtCifrado = txtCifrado.replace(/imes/igm,"i");
    var txtCifrado = txtCifrado.replace(/ai/igm,"a");
    var txtCifrado = txtCifrado.replace(/ufat/igm,"u");

    document.getElementById("#muneco").style.display = "none";
    document.getElementById("texto").style.display = "none";
    document.getElementById("textoEncriptado").innerHTML = txtCifrado;
    document.getElementById("copiar").style.display = "show";
    document.getElementById("copiar").style.display =  "inherit";
}

function copy(){
    var contenido = document.querySelector("#texto1"); 
    contenido.select();
    document.designMode("copy");
    alert("se copia");
}

CSS

.logo-alura,h1 {
    margin-top: 1%;
    float: inherit;
    display: inline-block;
}    

.texto-titulo{
    float: inherit;
    margin-left: 25%;
    margin-bottom: 20px;
}

body{
    margin: 10px;
    padding: 10px;
    padding-bottom: 30px;
    background: white;
}


.container-encriptador {
    margin: auto;
    margin-top: 50px;
    width: 960px;
    height: 900px;
    padding: center;
    padding-right: 18px;
    padding-left: 18px;
    border-radius: 15px;
    background: #CED4DA;
}

.caja-encriptador{
    margin-top: 20px;
    float: left;
    width: 70%;
    height: 450px;
    padding: 50px 0 0 0;
    border: none;
    border-radius: 15px;
    background: #CED4DA;
}

.texto-input{
    float: left;
    margin-left: 10%;
    margin-top: 2%;
    margin-bottom: 30px;
    width: 80%;
    height: 25%;
    border-radius: 15px;
    border: none;
    color: blue;
    font-size: 20px;
    border: none;
    outline: none;
    background: #CED4DA;
}


.encriptador{
    margin-top: 5px;
    float: right;
    width: 30%;
    height: 440px;
    padding: 20px 0 0 0px;
    border: none;
    border-radius: 15px;
    background: #FFFFFF;
}


.muneco{
    margin-top: 1px;
    margin-left: 10%;
    float: left;
    display: block;
    height: 200px;
}


.encriptar {
    font-size: 25px;
    float: left;
    border-top: 10px;
    width: 40%;
    height: 50px;
    padding: 10px;
    border-radius: 15px;
    margin-left: 70px;
    border: none;
    background: #0A3871;
    cursor: pointer;
}



.desencriptar {
    font-size: 25px;
    float: right;
    border-top: 10px;
    width: 40%;
    height: 50px;
    padding: 10px;
    border-radius: 15px;
    margin-right: 70px;
    border: none;
    background: #D8DFE8;
    cursor: pointer;

}

/*#izquierda-encriptar{
    padding: 24px;
    width: 30%;
    height: 50%;
    border-radius: 15px;
    margin-left: 15%;
    background: #0A3871;
}*/

/*#derecha-desencriptar{
    padding: 24px;
    width: 30%;
    height: 60%;
    border-color: #0A3871;
    border-radius: 15px;
    margin-right: 15%;
    background: #D8DFE8;
}*/

.mensaje-no{
    margin-left: 7%;
    color: #343A40;
}

.texto-encriptado{
    color: #343A40;
    margin-left: 14%;
    height: 25%;
    border: none;
    outline: none;
    background: #FFFFFF
}

#copiar{
    padding: 10px 25px 15px 25px;
    margin-top: 20px;
    width: 5%;
    height: 10%;
    border-color: #0A3871;
    border-radius: 15px;
    margin-left: 25%;
    display: none;
    background: #D8DFE8;
}

.fondo{
    margin: 5px 0 60px 0;
    padding: 50px 0 300px 0;
    /*background: yellow;*/
}

.nota{
    margin-right: 330px;
    padding-left: 330px;
    margin-top: 300px;
    font-size: 25px;
}
solución!

Primero, el botón de copiar, debería ser button, no buttom. El onclick solo lo tienes para el copiar, ningún otro botón tiene asociada ninguna acción. Tercero, y este es un error que vi muy frecuentemente, usas la función replace, y esto solo reemplaza la primera coincidencia, y no todas las coincidencias. Podría ponerte todo el código aquí, pero mejor ve lo que yo ya publiqué en: https://github.com/PGallagherC/Encriptador

Gracias Pablo! voy a revisar

saludos