Introdução:

Talvez você nunca tenha ouvido falar em "reatividade", mas em termos gerais, significa que uma coisa altera na medida que outra é alterada.
Esse exercício te mostrará como alterar um elemento à partir de um input.

Instruções:

• Você deverá criar 1 elemento de texto (exemplo: span ou strong) e 1 input.
• Ao trocar o valor do input, o sistema automaticamente deve exibir o valor do input no elemento de texto.
• Sugestão: entenda como funcionam os seguintes eventos: change, blur, keyup e keydown.

Exemplo:
Conhecimentos chaves:

• Como usar o evento keyup
• Como selecionar um elemento usando o document.querySelectorAll?
• Como ler o valor de um input?
• Como alterar o texto de um elemento?

Introdução:

É muito comum sites apresentarem um pedido de confirmação. Afinal, ninguém quer ter suas coisas deletadas porque clicou no lugar errado.
Nesse exercício, você aprenderá como fazer isso.

Instruções:

• Você deverá criar 1 button.
• Ao clicar no botão, deverá aparecer um pedido de confirmação da ação.
• Ao confirmar, uma mensagem falando que foi confirmado deve ser exibida.
• Ao recusar, uma mensagem falando que foi recusado deve ser exibida.

Conhecimentos chaves:

• Como usar o evento onClick?
• Como usar uma condicional if?
• Como usar o confirm?
• Como usar o alert?

Introdução:

Você talvez nem saiba, mas quase todos os sites possuem mais coisas do que você pode ver.
Você aprenderá como exibir ou ocultar elementos da tela neste exercício.

Instruções:

• Você deverá criar 2 img e 2 button.
• Ao clicar no primeiro botão, se a primeira imagem estiver visível na tela, oculte-a.
  Se a primeira imagem estiver oculta na tela, exiba-a.
• Ao clicar no segundo botão, você deverá fazer o mesmo processo anterior para ambas as imagens.
  Se a imagem estiver visível, oculte-a. Se a imagem estiver oculta, exiba-a.
• Em todos os casos, você deve usar a função document.querySelectorAll().
  No segundo botão, você deve usar essa função apenas uma vez.

Exemplo:
Conhecimentos chaves:

• Como selecionar um elemento usando o document.querySelectorAll?
• Como usar o evento onClick?
• Como usar um for para executar uma ação em vários elementos?
• Como ocultar um elemento da tela?
• Como voltar a exibir um elemento na tela?
• Como verificar se um elemento está oculto?

Introdução:

Neste exercício, você aprenderá como ler o valor que o usuário digitou em um campo e como limpar o input.
Além disso, você aprenderá como tornar obrigatório o preenchimento de um input.

Instruções:

• Nesse exercício, você deverá criar 2 input, 1 checkbox, 1 radiobox e 2 button.
• O primeiro botão deve exibir em um alert() os valores contidos em cada um dos input e o outro botão limpará os valores dos input e desmarcar o checkbox e o radiobox.
• O primeiro botão deve usar o método document.querySelectorAll() e organizar a exibição pelo id do elemento.

Exemplo:
Conhecimentos chaves:

• Como usar o document.querySelectorAll?
• Como usar o alert?
• Como usar o evento onsubmit?
• Como prevenir que a página atualize ao clicar o botão do tipo submit?
• Como usar o evento onClick?
• Como ler o valor de um input?
• Como ler o name de um input?
• Como alterar o valor de um input? (para limpar)
• Como ver se um checkbox está marcado?
• Como ver qual radiobox está marcado?
• Como limpar um checkbox
• Como limpar um radiobox
• Como usar o atributo required?
• Como usar o método event.preventDefault?

Introdução:

Neste exercício você irá simular uma tela de cadastro que também serve como tela de alteração.

Instruções:

• Nesse exercício, você deverá criar 1 input e 5 button. O input e os três primeiros botões devem estar ocultos.
• O primeiro, segundo e terceiro botões devem estar próximos ao input. Eles são respectivamente o botão de Cancelar, Cadastrar e de Alterar. Todos esses devem estar inicialmente ocultos.
• O terceiro e o quarto botão devem exibir o input e apenas um dos botões.
• Ao abrir a tela em modo de alteração, o input deve estar preenchido com o texto "Fulano da Silva" e apenas os botões Cancelar e Alterar devem ser exibidos.
• Ao abrir o modo de cadastro, o input deve estar em branco e apenas o botão de Cancelar e Cadastrar devem ser exibidos.
• Ao clicar no botão Cancelar, o input e seus botões devem ser ocultados.

Exemplo:
Conhecimentos chaves:

• Como selecionar um elemento usando o document.querySelectorAll?
• Como usar o evento click
• Como preencher um input com um valor inicial?
• Como ocultar ou exibir um elemento?

Introdução:

Eventos são uma parte muito importante da WEB. Exemplo de eventos: click, change, keyup. Porém nem sempre esses eventos devem acontecer para sempre.
Neste exercício, você aprenderá como limitar o número de execuções de um evento.

Instruções:

• Nesse exercício, você deverá criar 1 input e 1 button.
• Ao clicar no botão pela primeira vez, irá exibr um alerta contendo o valor do input
• Caso o valor do input não tenha sido alterado, apertar ao botão não deve abrir o alerta novamente.
• Após alterar o input, apertar ao botão deve abrir o alerta novamente, apenas uma vez novamente.

Exemplo:
Conhecimentos chaves:

• Como selecionar um elemento usando o document.querySelectorAll?
• Como ler o valor de um input?
• Como usar o evento click
• Como usar uma condicional if?
• Como usar o alert?

Introdução:

.Tabelas são muito comuns em sites. Por exemplo em um cadastro de pessoas. As pessoas já cadastradas são exibidas em uma tabela.
E geralmente você tem a opção de remover essa pessoa. Neste exercício, você irá remover um registro de uma tabela.

Instruções:

• Você deverá criar 1 table, 1 input e 1 button.
• Crie uma table com qualquer quantidade de linhas.
• Crie um input para receber um número.
• Crie um botão que identifique o valor do input.
• Se o valor não for um número, exiba um erro.
• Selecione na table a linha com o número do input.
  (Sendo N o número do input, encontre a Nª linha.)
• Remova essa linha.
  (Diferentemente da ocultação, não é possível retornar a exibição da linha e nem exibir ela pelo Inspecionar do DevTools.)

Exemplo:
Conhecimentos chaves:

• Como usar o evento onclick?
• Como transformar uma string em um número
• Como checar se uma variável é um número válido?
• Como selecionar a enésimo linha de uma tabela (seletor nth-child) OU como acessar um item de um array?
• Como remover um elemento?

Recurso adicional:

• Como Selecionar o Item de Uma Tabela HTML

Introdução:

Ainda falando sobre tabelas, agora você irá remover um registro de uma tabela de outra maneira.

Instruções:

• Você deverá criar 1 table contendo 1 button para cada linha.
• Crie uma table com qualquer quantidade de linhas.
• Uma das colunas deve conter um botão.
• Ao clicar neste botão, a linha inteira deste botão deve ser removida.

Exemplo:
Conhecimentos chaves:

• Como usar o evento onClick?
• Como obter o elemento do botão que foi clicado?
• Como obter o elemento da linha da tabela à partir do elemento do botão? OU como usar um ID para remover a linha de uma tabela.

Introdução:

Ainda sobre tabelas, agora vamos criar novos elementos programaticamente e inserí-los na tabela. Teremos agora as ferramentas para criar um cadastro de pessoas que também podem serem removidas.

Instruções:

• Você deverá criar 1 table contendo algumas colunas e nenhuma linha, um elemento informando a ausência de registros e um formulário para adicionar registros à table.
• A table deverá conter uma coluna a mais para acomodar o botão de remoção.
  O formulário deverá conter um input para cada coluna de dados e um botão para adicionar.
• Ao clicar no botão do formulário, o app deverá conferir se os dados são válidos: se for um campo numérico, verificar se o valor é um número. Se for um campo de string, verificar se o valor não está vazio.
  Após a verificação, o sistema deverá adicionar uma linha na table contendo os respectivos dados do formulário, além de um botão para remover esse mesmo registro.
  Além disso, o sistema deve ocultar a mensagem de ausência de registro.
• Ao clicar no botão de remoção, a linha deverá ser removida (e impossível de visualizar pelo DevTools).
  Além disso, se nenhuma outra linha existir na table, o sistema deverá exibir novamente a mensagem de ausência de registros.

Exemplo:

Conhecimentos chaves:

• Como usar o evento onclick?
• Como ler o valor de um input?
• Como criar elementos HTML usando a função document.createElement?
• Como alterar o texto, as classes e como associar um evento usando a função addEventListener a esse elemento?
• Como inserir elementos dentro de outros elementos usando a função appendChild?
• Como identificar o número de elementos HTML dentro de outro elemento?