JS na web: CRUD com JavaScript assíncrono JavaScript na Web: validação de Formulários e HTML5
https://vanessamie.github.io/doguito/
Fazer requisições utilizando XMLHttpRequest. Lidar com promises. Fazer uma requisição http utilizando XMLHttpRequest para buscar todos os clientes do servidor. Refatorar o código utilizando promises melhorando a leitura do código. Utilizar template literals para criar um template html. Entender a ordem de execução do código JavaScript. Puxar dados do servidor utilizando a função a fetch api ao invés do xmlhttprequest para modernizar o código. Refatorar as responsabilidades do código pensando na manutenção da aplicação no futuro. Usar a método closest para encontrar o elemento do DOM mais próximo ao que queremos remover Criar um cliente utilizando o verbo http POST. Remover um elemento do dom com método remove() Deletar um cliente utilizando o verbo http DELETE Fazer uma query string utilizando a propriedade searchParams.get() para encontrar um id. Criar uma IIFE ou função auto executável. Editar os dados utilizando o verbo http PUT. Utilizar async/await para indicar funções assíncronas. Tratar erros com try/catch
Fazer validações no próprio HTML utilizando os atributos required e type.
Usar regras de regex dentro do atributo pattern para validar o campo de senha.
Mandar uma mensagem customizada de erro no balão do navegador.
Criar funções para validações customizadas do formulário
Definir mensagens customizadas para validações fora do HTML
Utilizar data attributes para trabalhar com JavaScript
Deixar a função de validação mais genérica para funcionar com qualquer input A instalar e usar o plugin Liveserver
Como baixar e rodar o browser-sync
Como mostrar a mensagem de erro diretamente no HTML
Como customizar as mensagens de erro de validação
abrir a pasta admin no vscode e rodar o json server:
npx json-server --watch db.json
instalar
npm install -g browser-sync
Rodar:
browser-sync start --server --file . --host --port 5000 --startPath admin/telas/lista_cliente.html
Começando com fetch no Javascript https://www.alura.com.br/artigos/comecando-com-fetch-no-javascript
Time-saving synchronised browser testing. https://browsersync.io/
Site usado para simular o funcionamento do ambiente JavaScript.
Site do Globo Esporte de 2006 mostrado na aula
https://web.archive.org/web/20060516060134/http://globoesporte.globo.com/
Validador de regex https://regexr.com/
Veja também a Regex Engine que utilizei e os regex que desenvolvi durante o curso https://github.com/vanessamie/regex
title="A senha deve conter de 6 a 12 caracteres, pelo menos 1 letra maiúscula e 1 número e não deve conter símbolos"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+-]).{6,12}$"