Loading repository data…
VintaBytes / repository
Este proyecto implementa una entrada de formulario para contraseñas con funcionalidades de mostrar/ocultar contraseña utilizando HTML, CSS y JavaScript.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Este proyecto implementa una entrada de formulario para contraseñas con funcionalidades de mostrar/ocultar contraseña y borrar el contenido de la contraseña utilizando HTML, CSS y JavaScript.
También he preparado un video, en el que te guiaré a través de los pasos necesarios para qué puedas implementarlo en tus proyectos:
Mostrar/Ocultar Contraseña en Formulario con JavaScript
Este proyecto implementa una entrada de formulario para contraseñas con funcionalidades de mostrar/ocultar contraseña y borrar el contenido de la contraseña utilizando HTML, CSS y JavaScript.
index.htmlEste archivo HTML define la estructura básica de la página, incluyendo un formulario con un campo de entrada de contraseña y dos íconos para mostrar/ocultar la contraseña y borrar su contenido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<div class="contenedor-password">
<input type="password" id="password" placeholder="Contraseña">
<img src="imagenes/close.png" id="pass-icon" class="icon" onclick="pass()">
<img src="imagenes/borrar.png" id="pass-borrar" class="icon" onclick="borrar()">
</div>
</form>
<script src="codigojs.js"></script>
</body>
</html>
style.cssEste archivo CSS define el estilo para el contenedor de la contraseña y los íconos.
.contenedor-password {
display: inline-flex;
border: 2px solid #095588;
border-radius: 10px;
padding: 10px;
}
.icon {
height: 20px;
margin: 5px;
cursor: pointer;
}
codigojs.jsEste archivo JavaScript maneja la lógica para mostrar/ocultar la contraseña y borrar el contenido del campo de entrada de contraseña.
function borrar() {
document.getElementById("password").value = "";
}
let flag = true;
function pass() {
if (flag) {
document.getElementById("password").type = "password";
document.getElementById("pass-icon").src = "imagenes/close.png";
flag = false;
} else {
document.getElementById("password").type = "text";
document.getElementById("pass-icon").src = "imagenes/open.png";
flag = true;
}
}
HTML (index.html):
input type="password") y dos íconos (img):
id="pass-icon").id="pass-borrar").onclick que llaman a las funciones pass() y borrar() en el archivo JavaScript.CSS (style.css):
.contenedor-password), incluyendo borde, radio de borde y relleno..icon), incluyendo tamaño, margen y cursor.JavaScript (codigojs.js):
borrar(): Borra el contenido del campo de entrada de contraseña.pass(): Alterna entre mostrar y ocultar la contraseña.
flag) para rastrear el estado actual.password y text.pass() se ejecuta, alternando entre mostrar y ocultar la contraseña.borrar() se ejecuta, limpiando el campo de entrada de contraseña.Selected from shared topics, language and repository description—not editorial ratings.
ManuelASIR /
Este repositorio forma parte de el Proyecto de final de grado de ASIR. En el cual se implementa un cliente de correo web con HTML+CSS, PHP Y JavaScript, toda ayuda es bienvenida para completar este proyecto. Muchas gracias.
30/100 healthilaoming /
OYE es un sitio para escuchar música gratis. Su creador desea que se pueda compartir música entre todos los que quieran pasar un rato ameno, escuchando sus canciones favoritas. Él ha pensado en ti como la persona ideal para diseñar este sitio Web, que busca deleitar a los amantes de la buena música. A continuación encontrarás los detalles que debes tomar en cuenta para implementar a OYE. El sitio incluye cuatro (4) páginas, las cuales describimos seguidamente: Inicio: proporciona una breve bienvenida a OYE y despliega las tres canciones más reproducidas. Canciones: despliega la canciones alojadas en el sitio. Para comodidad del usuario hay una herramienta de búsqueda, que se puede emplear para encontrar su música favorita. Registro: el usuario debe registrarse para obtener una experiencia musical personalizada: sugerencias de nuevas canciones, que es una de las características del sitio que se desarrollará en un futuro cercano, pero no en este proyecto. Inicio de Sesión: todos aquellos que desean obtener una interacción musical a su medida deben Iniciar Sesión, para aprovechar esta característica de OYE que revolucionará el mundo musical en poco tiempo. Requerimientos Una serie de reuniones iniciales con el creador del sitio y su equipo de asesores arrojó la siguiente lista de requerimientos, que deseamos que cubras a través de este desarrollo: Implementa las páginas antes mencionadas usando HTML, CSS, JavaScript y Bootstrap: Inicio Canciones Registro Inicio de Sesión Implementa un botón de Contacto en la barra de navegación, que despliega una ventana modal de Bootstrap con la información. Emplea el diseño responsive (diseño adaptativo) para adaptar el sitio a resoluciones de escritorio, tabletas y dispositivos móviles. Usa al menos dos tipografías. Se sugiere una para los títulos y otra para el resto de los textos. Crea un Bootstrap personalizado con los colores de tu preferencia, fuentes y otros ajustes de acuerdo a la interfaz que se desea construir. Aplica colores de fondo y bordes cuando aplique. Valida los campos de los formularios del sitio usando Javascript.
brayan-chiquito /
Este proyecto forma parte de un challenge donde se implementa un sistema simple de encriptado de texto utilizando HTML, CSS y JavaScript.
30/100 healthAnderson-BM /
Este es un proyecto simple con HTML, CSS y JavaScript puro que implementa un pipeline CI/CD utilizando GitHub Actions.
27/100 healthlorelf92 /
Aplicación web creada como mi primer proyecto completo en DAW. Implementa un sistema de gestión de incidencias con conexión a Base de Datos MySQL, manejo de ficheros y lógica en PHP. El frontend está construido con HTML, CSS y JavaScript. Este proyecto me ha permitido trabajar con CRUD, validación y funcionalidades completas de registro.
34/100 healthfabinnerself /
Este proyecto implementa operaciones CRUD completas (Crear, Leer, Actualizar y Eliminar), junto con filtrado y paginación en un grid. Con tecnoligas html, Css, Mysql y php
27/100 health