Como criar um botão de mostrar e esconder senha com HTML, CSS e JavaScript
Вставка
- Опубліковано 28 лют 2023
- ✅ 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/programmakerspro
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
didática perfeita, rápido e objetivo, obrigado
Cara, tome like agr vc merece, dica simples mas q explicou muito bem
muito bom mano, sou uma decepção pra entender javascript kkkkkkkkk mas vc conseguiu explicar com muita didática, obrigado!
Muito bom amigo, ganhou mais um inscrito
o cara me ajuda sempre, bom dmss
caraa muito bom parabens adorei seu video +1 inscrito
Muito bom mano, ajudou bastante!
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 😁🧡
nmrl que video incrivel vei vlw dms
Vlw dms
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!
Mestre.
Muito obrigada vc esta fazendo a diferença no meu aprendizado
Pow Shirleique massa isso kkkk fico muito feliz em saber disso!
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')
}
}
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 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
massa
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
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