Projeto Verificador de Força de Senha com JavaScript - Projeto de JavaScript para inciantes
Вставка
- Опубліковано 16 тра 2024
- Crie um projeto completo para verificar a força de senhas com HTML, CSS e JavaScript
⭐ Curso completo de JavaScript: app.horadecodar.com.br/course...
📘 Ebook de JavaScript: app.horadecodar.com.br/ebookp...
Repositório: github.com/matheusbattisti/ve...
Entre no nosso servidor de Discord e me siga nas redes:
🟣 Discord Hora de Codar: / discord
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar
Neste vídeo, você aprenderá a criar um Projeto Verificador de Força de Senha com JavaScript, ideal para iniciantes. Este tutorial passo a passo ensinará você a desenvolver uma aplicação web simples, mas eficaz, que verifica a força de senhas em tempo real. Utilizando JavaScript, vamos analisar diversos critérios de segurança, como comprimento da senha, uso de letras maiúsculas e minúsculas, números e caracteres especiais.
Aprenda a criar uma interface amigável que fornece feedback instantâneo aos usuários sobre a robustez de suas senhas. Vamos explorar como manipular o DOM com JavaScript para atualizar dinamicamente a força da senha conforme o usuário digita. Este projeto é uma excelente maneira de melhorar suas habilidades em JavaScript, DOM e desenvolvimento front-end, além de proporcionar uma ferramenta útil e prática para qualquer site.
O que você vai aprender:
- Estruturar um formulário HTML para entrada de senha
- Utilizar CSS para estilizar a interface do verificador de força de senha
- Implementar a lógica em JavaScript para avaliar a força da senha
- Manipular o DOM para fornecer feedback visual ao usuário - Наука та технологія
Links do vídeo:
⭐ Curso completo de JavaScript: app.horadecodar.com.br/course/curso-de-javascript-completo
📘 Ebook de JavaScript: app.horadecodar.com.br/ebookpages/ebook-javascript-para-iniciantes-gratuito
Repositório: github.com/matheusbattisti/verificador_forca_de_senha
Já salvei aqui para praticar depois. Wlw Professor Matheus. 👏🏻
show, vamo q vamo!
Fala Matheus, que vídeo maravilhoso! Estava praticando e encontrei digamos que um bug. Sei que é um exemplo mais resolvi notificar a galera. Temos 5 stregths: 'Muito fraca', 'Fraca', 'Moderada', 'Forte', 'Muito Forte'. E temos 5 requisitos. Como o score começa em 0 se você completar as 5 requisições ele vai aparecer na tela que a força está (Força: undefined). Para resolve modifiquei esse pedaço:
if(password.length > 0){
strengthText.innerHTML = `Força: ${strengths[score]}`;
if(score > 4){
strengthText.innerHTML = `Força: ${strengths[4]}`;
}
}else{
strengthText.innerHTML = '';
}
mais é claro que deve ter maneiras melhores para resolver.
muito obg pelo video, Estou ansioso pelo proximo
ignora só troca o let score por -1 e gg ( let score = -1; )
na real a gente poderia ter tratado um quinto caso tb =D
meu amigo que aula!!
muito grato por compartilhar ,
valeuu Alan!
Incrível, meus parabéns.
Só uma observação: Quando o usuário digita letras minúsculas e maiúsculas, números e caracteres especiais e essa senha tem 8 ou mais dígitos, se chega até um nível "undefined" - Daí vocês podem achar soluções para resolver isso, no meu caso simples só criei mais um nível de força mesmo, talvez seja interessante alterar os requisitos para incrementar o score também.
Mto bom!! Gostei bastante, mas tenho que tentar entender melhor o emprego de alguns valores nas variáveis!! show!
show Marcus! bora praticar
Bom dia meu amigo! Entendi o projeto. Fiz tudo direitinho, mas a barra de progresso que gera as cores nem se emociona. Pelo menos diz se no texto a condição: se é fraca, forte, etc. Pode me dizer o pq da barra de cores não funciona? Teria que instalar alguma extensão no visual Code? Rodei em três brousers e nada. Desde já agradeço.
Show , você é muito bom.
tamo junto Afonso!
Parabéns Matheus. Adorei a didática e a interface da aplicação. E você já me gerou um desafio. E também faço a você, queria como ao invés de utilizar div para fazer a barra de progresso vamos usar a tag progress, o que você acha. E continue com os seus vídeos maravilhoso.
opa Rodrigo, a versão inicial era com ela, mas ficou meio complexo para estilizar ai deixaria o vídeo mto mais longo, sabe? preferi esta abordagem hehe
@@MatheusBattisti Valeu. Vou fazer com a Barra de progresso.
Aula topssima
valeuu!
Estamos juntos meu amigo! Você faz parte da minha rotina de estudos. Obrigado pelo vídeo!
Fico feliz em saber, e bons estudos Marcos
Muito bom o video!
valeu Leonardo!
Cheguei dando like
boa! bora pro video!
Abri o vídeo, já vou no Like tb!
Muito bom
valeu!
Bacana muito legal... :)
Já salvei pra ver depois por que isso vai me salvar ❤
kkkk boa!
fiz um register ontem rsrsrs já vou assistir e incorporar
massa, vai ficar top! =D
Olá. Eu vou começar o curso de javascript, mas eu vou aprender lógica primeiro. Sobre o javascript você é o que tá mais recente.
bora lá, tem lógica sim
Faz um vídeo consumindo uma API de login e depois consumindo os endpoints com o token guardado com redux
Uma versão diferente do reactgram sem o thunk
opa, valeu a sugestão!
Oi meu carra Matheus,interessante isso,gostaria de ter uma noção de criar button de pagamentos Visa Paypal, ou Mastercard
professor, eu gostaria de aprender react, mas sou iniciante em html, css e js. qual curso seu você me indica a fazer primeiro?
opa Marcos, eu sinceramente deixaria as bases sólidas em JS primeiro: app.horadecodar.com.br/course/curso-de-javascript-completo
@@MatheusBattisti professor eu comprei seu curso básico de html, o de 9,90 finalizando esse qual você me indicaria? eu de html e css não tenho uma base sólida também, apenas fundamentos básicos. muito obrigado pela ajuda :)
@Matheus Ou outros button