Tela de Cadastro com HTML/CSS e validações de JavaScript (utilizando Orientação a Objetos) parte 1
Вставка
- Опубліковано 7 вер 2024
- 📒 Ebook gratuito de JavaScript avançado: www.horadecoda...
Neste projeto vamos exercitar nosso conhecimento em #HTML e #CSS para criar o layout desta página de registro, e também uma validação de campos de formulário utilizando #JavaScript e Orientação a Objetos.
Repositório: github.com/mat...
e-book: www.horadecoda...
★ Nossos Cursos: horadecodar.co...
✔ Nosso Blog: horadecodar.co...
▶ Instagram: @horadecodar
▶ Facebook: / horadecodar
▶ LinkedIn: / matheusbattisti
▶ GitHub: github.com/mat... 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord
⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/
Muito legal, a melhor forma de aprender é praticando!
É isso aí Matheus :D
incrível demais. Muito obrigado por este conteúdo tão didático, que também não precisa ficar instalando mil coisas como em outros tutoriais.
valeuuu!
A explicação parece ser boa, eu não prestei muita atenção, porque tava copiando o código, mas vou assistir depois de novo. Preciso aprender para fazer o meu trabalho da escola e lá eles não ensinam
Quem estiver com erro de metodo não é uma função, "this[method](input, value)".
Copia essa parte no js: minlength(input, minValue){}
Deve funcionar, estava a 3 dias tentando resolver essa parte e nada funcionava sendo que o codigo estava igual, entao fui no repositorio e copiei somente essa parte e colei no meu projeto e funcionou, espero que funcione com vc tambem :)
mano vc ainda tem esse cod??
Sua didática é ótima, parabéns amigo muito bem explicado e sem enrrolação.
ótima aula, faz um vídeo de como cadastrar no banco de dados.
Muito bom o seu trabalho,e obrigado ajudou me muito para a formação que estou fazendo.
de nada Nelson =))
muito bom
Preciso aprender a fazer isso para um trabalho!!! ESPERO QUE EU CONSIGA,Ja chorei tanto hoje por nao coseguir
1 ano depois e eu preciso fazer a mesma coisa. kkkk ESPERO QUE EU CONSIGA.
@@VitorHugo-gi7ys 2 meses depois eu preciso fazer a mesma coisa kkkkkk
7 meses depois e eu tbm...😅😢
agora chegou a minha vez de fazer
Ótima aula, estou aprendendo muito com esse projeto de cadastro, aguardando ansiosamente pelos próximos projetos.
opa Patricia, com certeza terão próximos, até mais! =)
Bendita hora que entrei no curso de informática da minha escola, agora tenho que aprender a programar usando seus vídeos, porque lá eles não ensinam. Estou quase sem a minha mão de tanto digitar
Parabéns pela aula Matheus👏👏👏Só q tem um erro, meu código esta do mesmo jeito que no vídeo, porém a validação não funciona. Não aparece nada no console, em todos os casos
Lança mais mini projetos assim, plsssss 🥺🙏🙏
Up
muito legal ... to aprendendo python e vuejs ... css e html faz parte ... valeu
opa Damacio, faz mesmo! Teremos estas tecnologias aqui tb =)
Validacao difícil da poha mas vamos lá!
Top demais
Boa tarde , no meu esta correto , mas esta dando erro na hora de testar os logs. - Uncaught SyntaxError: Identifier 'validator' has already been declared. como proceder ? grato.
O meu deu este mesmo erro...
Aprendendo Muito aula top
valeu Juninho! :D
@@MatheusBattisti não estou conseguindo enviar o click no navegador não esta clicando ('funcionou') tem como dar uma ajuda ai?
@@juninhooliveira4215 opa,tem como por o código no Github? fica mais fácil
@@MatheusBattisti consegui ja vlw
Primeiro de tudo, que tutorial excelente! Ainda não conhecia o canal e já percebi que vou passar um bom tempo consumindo conteúdo daqui. Parabéns pelo trabalho. 👏🏾👏🏾👏🏾
Agora vai uma pequena dúvida: em vez de validar o input de e-mail por número de caracteres, criei uma pattern com regex e tô me perdendo na hora de criar o método pra validar o formato de e-mail... alguma boa alma que possa me dar uma luz?? Eu até consigo criar o método de boas, mas na hora de validar a pattern tô encontrando dificuldades.
Olá amei o vídeo, você pode fazer um vídeo onde o usuário digita nesses inputs em html e os dados saem na planilha google (no excell) usando js. Eu estou tentando programar no google apps script.Por favorrr
show irmão...
Valeuu!
Muito legal seu vídeo, bem explicado, parabéns!! Gostaria de saber como incluir níveis de acesso ao site, como usuário Admin e usuário normal
fala Edson, obrigado! Para os níveis de acesso você vai precisar de uma linguagem de back-end e um banco de dados, por exemplo: PHP e MySQL
Obrigado ela resposta Matteus, legal, com MySql eu sei trabalhar. Vc tem algum vídeo ou artigo que possa me ajudar?
@@edsonferraz1 claro, o curso de Laravel vai te dar uma luz sobre o assunto =)
Onde consigo este curso?
@@edsonferraz1 Este link te leva para a playlist: ua-cam.com/play/PLnDvRpP8BnewYKI1n2chQrrR4EYiJKbUG.html
Ótima aula, só poderia me ajudar em uma coisa? como eu usaria a tag no lugar do ? queria reproduzir uma tela de login mas estou em dúvida, obrigado!
opa Matheus, só colocar o type como submit...
Quem estiver com problemas no this[method], dá uma olhada para ver se o seu método minlength realmente está assim, eu havia escrito minLength(), e por óbvio, precisa estar tudo minúsculo.
Fala Matheus Battisti Tranquilo cara, obrigado por dividir seus conhecimentos com todos aqui, acabou de ganhar mais um seguidor, estou sou apaixonador por programação, mais preciso melhorar mais a parte de lógica, será que fazendo alguns trabalhos ajuda, estou tentando fazer um jogo da velha e depois quero parti para um jogo de xadrez, você teria alguma dica?
Boa! É bem nesse sentido mesmo, você vai criando projetos cada vez mais complexos, aprenda bem JavaScript, que vai te ajudar =)
Confira nossos cursos: www.horadecodar.com.br/cursos-horadecodar/
📒 Ebook gratuito de JavaScript avançado: www.horadecodar.com.br/ebook-javascript-avancado-gratuito/
Ola amigo top seus vídeos ,estou a procura de um projeto de criação de site de classificados você tem algum vídeo que ensina esse tipo de assunto
Vc pretende fazer cursos sobre django e projetos reais com ele em sua plataforma de cursos? Eu quero muito aprimorar minhas habilidades nessa framework
oi Luiz, é uma vontade que tenho, mas não sei se rola tão cedo...
Acompanhando aqui, deu um erro
scripts.js:33 Uncaught TypeError: this[method] is not a function
at Validator. (scripts.js:33:33)
at Array.forEach ()
at Validator.validate (scripts.js:20:21)
at HTMLInputElement. (scripts.js:57:15)
let method = this.validations[i].replace("data-", "").replace("-", "");
// valor do input
let value = input.getAttribute(this.validations[i])
//invocar o metodo
this[method](input, value);
}
sera o que estou errando?
Ótima aula!! Trabalho com desenvolvimento web a um tempo já... Mas utilizo a IDE Eclipse luna, estou começando um projeto novo com o Visual Studio, qual a dica você da para fazer conexão com o banco de dados ou um api de segurança no visual studio ? E se é possível fazer nele
Oi Ana, para a API eu uso o Postman, para o banco depende, mas não costumo usar o VS Code não, deixo ele apenas para o código.. hehe
E com relação a deixar o form responsivo?
boa noite
quando inspeciono, diz que a sintax estpa errada nessa parte, alguem em ajude, por favor.
let validator = new Validator();
Aqui comigo, travei no data-min-lenght. Não achou a validação.
E qual banco de dados os dados inseridos ficam ?
como armazenar e aproveitar os dados para logar em uma pagina.
Matheus você diz que insere o arquivo javascript dentro do body e não dentro do head, por que ele pode não ser reconhecido quando carregar a página, porém aprendi em um curso que podemos usar a síntaxe: dentro do head, utilizando o "defer", que faz com que o javascript aguarde a página carregar antes de ser executado, utilizei assim nesse projeto que fizemos com você e deu certo, já tinha ouvido falar sobre isso? Qual sua opinião a respeito? Abraço
oi Patricia, é uma estratégia válida também, e aceita em todos os navegadores, pode fazer assim sem problema. =)
Matheus Battisti - Hora de Codar que ótimo! Por que acho que fica mais organizado o código.
olá galera, alguém pode ajudar, meu condigo rodou bem porem não esta quebrando as linhas, esta alongando a pagina, alguém tem ideia do que esta acontecendo já tentei de tudo e revisei tudo.
Matheus, faz este mesmo exemplo com banco de dados, um abraço.
opa Zilon, vai ter sim, pode deixar :)
cara 1 pergunta estou aprendendo javaScript sozinho , tenho uma duvida eu tenho que grava de cabeça todos os comando ? pq eu estou anotando no caderno ai quando vou treinar tenho que fica olhando no cadernosrsr, o certo e grava os comando ? ou vc pega com o tempo.
opa Thiago, claro que não, vai fazendo projetos práticos que automaticamente você vai lembrando os comandos ou pelo menos que existe um comando para algo que tu quer fazer, aí tu pesquisa sobre ele novamente, é assim que os programadores profissionais fazem também, grava-se muito pouco e nem ficam com esta pretensão, abraço!
Confesso q a parte de JS ficou um pouco complexo, mesmo eu tendo uma base de programação e de JS...
Eu também, mas com este vídeo eu pude entender no que eu preciso focar meus estudos a partir de agora. Vou estudar um pouco Orientação a objetos, depois vou dar uma olhada aprofundada no "This" e, por fim no rest operator.
Falto sql
Oi @Matheus, usei as bases de validações desse JavaScript para meu projeto.... mas não estou conseguindo direcionar o usuario depois das validações... já tentei de tudo kkkkkk, tem como me dar help ou alguém esteja vendo esse comentário. por favor !!!1
Direcionar ? Ai você sai um pouco da aula e entra mais em php e banco de dados, mas da pra fazer um metodo post de loguin com rejex etc
Conseguiu? Se sim, me ajuda ai!
Gostei muito do video mas a parte do js ficou um pouco embaraçosa
realmente, é uma parte um pouco mais avançada, talvez reforçar os básicos da linguagem seja uma boa opção
boa noite!!
este form, não funcionou, me ajudem, por favor.
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
consegui ajeitar
O que vc fez? O meu deu erro tbm
Consegui arrumar, era erro de digitação, escrevi "calls" ao invés de "class" kkk
Eu iludido achando que seria programação de ligar quadrados e triangulos. Ai caio em um monte de codigos que nunca sequer, imaginei existir. Oloco.
Boa tarde, está ocorrendo um erro, está dizendo que method não é uma função, teria como você me ajudar Matheus ?
Consegui descobrir o erro, foi erro de digitação da fnção minlength de qualquer forma obrigado 😁
@@alexneto1625 Olá, esta dando o mesmo erro pra mim. Mas não consigo achar, tem link do seu repositório?
o getattribute tá dando erro
Ola eu tenho um desafio para te fazer desafio você fazer um fórmulario sendo no Excel php,HTML quando a pessoa se cadastrar no formulário automáticamemte ele enviar para uma pessoa de um grupo de seis pessoas ou seja ele sorteia a pessoa que vai receber esse email
kkkkkkkkkkkkkkkkkkkkk toma vergonha nessa cara!
Kkkkkkk q
"eu tenho um desafio para te fazer" kkkkkkkkkkkkkkkkkkkkkkkkkkkk
é cada um que aparece viu
tá dando erro no this[method] 😑
Uncaught TypeError: this[method] is not a function
at Validator. (scripts.js:30:33)
at Array.forEach ()
at Validator.validate (scripts.js:17:21)
at HTMLInputElement. (scripts.js:69:15)
@@chrissilva8834 conseguiu? Pq pra mim apareceu a mesma coisa
Ótima aula... ponto a melhorar é o teclado mecânico.... Totalmente desnecessário. Porque todo programador adora essa m....???
Merda pra vc que não sabe a funcionalidade dele ué, cada coisa
fake eu fui testar e tudo deu erro ate copiei o scripts essas pessoas falando bom e tudo conta fake e bot
Documento.js:8 Uncaught SyntaxError: Invalid or unexpected token esse e o erro
Bom dia mateus aqui e seu xara me tira uma duvida tenho 36 anos a 3 anos atras eu fiz tecnico em informatica pelo senac e sempre trabalhei em empresa mas nao no ramo de T.I queria fazer uma faculdade de tecnologia da informação mas ja estou com uma idade que nao muito aceita nas empresa sera que seria uma boa eu fazer faculdade e tentar trabalhar por conta como prestadar de serviço se puder me da uma ajuda eu agradeço