Como criar um botão de mostrar e esconder senha com HTML, CSS e JavaScript
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- ✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/program...
Crie um botão de mostrar e esconder senha usando apenas HTML, CSS e JavaScript. Mais fácil do que você imagina.
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ Bibliografia que recomendo:
🔹 HTML 5. Entendendo E Executando: amzn.to/41y7YUw
🔹 HTML5 e CSS3: guia prático e visual: amzn.to/3Hbg1yv
🔹 Use a cabeça! HTML e CSS: amzn.to/3Lq5P84
🔹 JavaScript: O Guia Definitivo: amzn.to/3L3cuDu
✅ Links úteis para você:
Bootstrap Icons: bit.ly/3KNufbI
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
Eu trabalho desenvolvendo sites e realmente estava incomodado com a falta de conteúdos brasileiros que sejam bons com CSS HTML e JS, vou começar a acompanhar seu canal, obrigado amigo!
Meu objetivo é justamente esse. Suprir a falta de conteúdo brasileiro sobre esses assuntos que tem aos montes na gringa kkkkkk obrigado msm viu
Esse código aqui é para quem quer esconder a senha e icone novamente , fiz ele sozinho e funcionou de boa.
//aparecer conteúdo oculto
function aparecer() {
let inputPass = document.getElementById('senha')
let btn = document.getElementById('btn-senha')
if(inputPass.type === 'password') {
inputPass.setAttribute('type', 'text')
btn.classList.replace('bi-eye-fill', 'bi-eye-slash-fill')
}
//Colocar novamente em modo oculto
else {
inputPass.setAttribute('type', 'password')
btn.classList.replace('bi-eye-slash-fill', 'bi-eye-fill')
}
}
didática perfeita, rápido e objetivo, obrigado
seu canal é perfeito
Olá amigo tudo bem, gostaria de dizer que vc está de parabens pelo video muito bem explicado.
Eu estava com muita dificuldade para executar o JS e vc me ajudou muito mesmo e me fez entender muito melhor essa função do JS
Meu foco é esse, ajudar mais e mais kkkkk que massa que consegui te ajudar nessa, meu mano! 👊🏾👊🏾👊🏾
eu só tenho a agradecer à vc mano, pelo seu conteúdo esclarecedor, estou me deliciando com o aprendizado que você tem me proporcionado
estou fazendo um projeto ousado atualmente e estou praticamente maratonando seus vídeos, pois têm ajudado à dar vida ao meu projeto.
muito obnrigado! ❤
Fala Ranan. Cara eu fico muito feliz em saber q to conseguindo te ajudar nesse teu projeto. Muito obrigado msm 😁🧡
Muito bom mano, ajudou bastante!
Bom dia Bruno,
Cara.... Sensacional, simples, rápido e direto ao ponto.
Estou estudando JavaWeb e acabei de implementar isso no meu sistema, ficou demais...
Abraço
ah mano que bom que consegui te ajudar nessa 😁👊🏾 Sucesso ai com teu sistema e precisando tamo aqui. Abraços!
muito bom mano, sou uma decepção pra entender javascript kkkkkkkkk mas vc conseguiu explicar com muita didática, obrigado!
Cara, tome like agr vc merece, dica simples mas q explicou muito bem
Que legal, o João Pimenta do porta dos fundos é programador tbm...massa.
Brincadeiras a parte, vlw meu amigo por compartilhar seu conhecimento.
kkkkkkkkkkkk João Pimento foi foda kkkkkkkkk TMJ Mano
Muito obrigada vc esta fazendo a diferença no meu aprendizado
Pow Shirleique massa isso kkkk fico muito feliz em saber disso!
nmrl que video incrivel vei vlw dms
o cara me ajuda sempre, bom dmss
Muito bom mano. Faz uns vídeos referente a treino de lógica de programação com Javascript por favor
Vlw Samuel, to planejando fazer isso em breve kkkkkk
caraa muito bom parabens adorei seu video +1 inscrito
Muito bom amigo, ganhou mais um inscrito
Mestre.
Gostei demais de sua didatica, facil de entender ! se caso eu queira fazer isso em um div que contenha saldo ?
Aí já são outros quinhentos kkkkkk existem várias formas como usar position relative na div do saldo e aí criar outra div dentro da div do saldo com position absolute. tem que saber trabalhar com essas coisinhas chatas kkkkkkk
@@InteliogiaDev trás um vídeo para nós kkkkk
qual o tema que vc usa no vscode? achei bonito
Vlw dms
massa
Professor, comigo não funcionou... aliás, meus códigos de java script parecem que não interagem com o .html, já tentei programar 2 tipos de telas de login diferentes, para tentar dar uma cara mais legal para o projeto, mas é como se o "main.js" do "" não existisse, mesmo eu tendo o adicionado na pasta do projeto. O único complemento que o vscode me recomenda quando eu digito o ".js" é um tal de ".jsdelivr". Poderia me conceder alguma luz para resolver esse problema?
A posição onde vc declara o dentro do código também influencia. Nesse caso vc pode declarar o script antes do fechamento da tag . Além de se atentar se o arquivo se encontra na mesma pasta do arquivo HTML 😉
No meu funcionou +-, por ,que quando eu clico pra digitar a senha ainda aparece o olho do input password, como se não tivesse o "inputPass.setAttribute('type','text')". Poderia me explicar?
Mano certamente você digitou o script incorretamente. O ideal é que você comparte com o código do vídeo e faça exatamente como eu instruí, blz?
@@InteliogiaDevBlz
O meu ñ funcionou. Quando aperto no ícone não acontece nada, tentei integrar em código que já estava fazendo, mas n tenho ideia do pq não funcionou.
É importante que esse código seja exatamente igual como tá no vídeo. Se vc usar outra biblioteca de ícones por exemplo pode ter algumas coisas diferentes