Projeto Verificador de Força de Senha com JavaScript - Projeto de JavaScript para inciantes

Подписаться 142 тыс.

Просмотров 5 тыс.

50% 1

Crie um projeto completo para verificar a força de senhas com HTML, CSS e JavaScript
⭐ Curso completo de JavaScript: app.horadecoda...
📘 Ebook de JavaScript: app.horadecoda...
Repositório: github.com/mat...
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

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 44

@MatheusBattisti 4 месяца назад

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

@marcosribeiro1596 4 месяца назад

Estamos juntos meu amigo! Você faz parte da minha rotina de estudos. Obrigado pelo vídeo!

@MatheusBattisti 4 месяца назад

Fico feliz em saber, e bons estudos Marcos

@fabriciosantuchi6424 4 месяца назад

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

@fabriciosantuchi6424 4 месяца назад

ignora só troca o let score por -1 e gg ( let score = -1; )

@MatheusBattisti 4 месяца назад

na real a gente poderia ter tratado um quinto caso tb =D

@eutimoteo 4 месяца назад

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.

@afonsos5754 4 месяца назад

Show , você é muito bom.

@MatheusBattisti 4 месяца назад

tamo junto Afonso!

@RodrigoVieiraEufrasiodaSilva 4 месяца назад

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.

@MatheusBattisti 4 месяца назад

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

@RodrigoVieiraEufrasiodaSilva 4 месяца назад

@@MatheusBattisti Valeu. Vou fazer com a Barra de progresso.

@Alan-Aguiar 4 месяца назад

meu amigo que aula!! muito grato por compartilhar ,

@MatheusBattisti 4 месяца назад

valeuu Alan!

@LeviSoares-m1i 4 месяца назад

Aula topssima

@MatheusBattisti 4 месяца назад

valeuu!

@luizinaldo916 4 месяца назад

Já salvei pra ver depois por que isso vai me salvar ❤

@MatheusBattisti 4 месяца назад

kkkk boa!

@10zree59 4 месяца назад

fiz um register ontem rsrsrs já vou assistir e incorporar

@MatheusBattisti 4 месяца назад

massa, vai ficar top! =D

@marcusribeiro5759 4 месяца назад

Mto bom!! Gostei bastante, mas tenho que tentar entender melhor o emprego de alguns valores nas variáveis!! show!

@MatheusBattisti 4 месяца назад

show Marcus! bora praticar

@marcusribeiro5759 4 месяца назад

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.

@hackintosh9992 4 месяца назад

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.

@MatheusBattisti 4 месяца назад

bora lá, tem lógica sim

@DevFFontes 4 месяца назад

Cheguei dando like

@MatheusBattisti 4 месяца назад

boa! bora pro video!

@viniciusm.m.7822 4 месяца назад

Abri o vídeo, já vou no Like tb!

@brunotomaz9536 4 месяца назад

Muito bom

@MatheusBattisti 4 месяца назад

valeu!

@gleluis15 4 месяца назад

Já salvei aqui para praticar depois. Wlw Professor Matheus. 👏🏻

@MatheusBattisti 4 месяца назад

show, vamo q vamo!

@Gui.gteixeira 4 месяца назад

Faz um vídeo consumindo uma API de login e depois consumindo os endpoints com o token guardado com redux

@Gui.gteixeira 4 месяца назад

Uma versão diferente do reactgram sem o thunk

@MatheusBattisti 4 месяца назад

opa, valeu a sugestão!

@DOSSIECRYPTO 4 месяца назад

Oi meu carra Matheus,interessante isso,gostaria de ter uma noção de criar button de pagamentos Visa Paypal, ou Mastercard

@formacaodesenvolvedorweb1292 2 месяца назад

Tenho uma dúvida: É seguro usar javascript para validar a senha digitada em um formulário HTML? Não há o risco de um usuário malicioso interceptar essa função JS de validação de senha e criar um código extra de envio de senhas por e-mail?

@DOSSIECRYPTO 4 месяца назад

@Matheus Ou outros button

@Marcos.Silva7 4 месяца назад

professor, eu gostaria de aprender react, mas sou iniciante em html, css e js. qual curso seu você me indica a fazer primeiro?

@MatheusBattisti 4 месяца назад

opa Marcos, eu sinceramente deixaria as bases sólidas em JS primeiro: app.horadecodar.com.br/course/curso-de-javascript-completo

@Marcos.Silva7 4 месяца назад

@@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 :)