Pular para conteúdo

Exercícios 07 - Eventos e Formulários ⌨️

🟢 Básicos

  1. Evento Click: Qual a diretiva usada para escutar um clique em um botão no Svelte?
  2. Input Binding: Para que serve a diretiva bind:value e qual a diferença entre ela e apenas passar uma variável para o atributo value?

🟡 Intermediários

  1. Prevent Default: Como você impediria um formulário de recarregar a página ao ser enviado, usando apenas um modificador de evento do Svelte?
  2. Múltiplos Inputs: Imagine um conjunto de 3 botões do tipo "Radio" para escolher um tamanho (P, M, G). Como você vincularia todos eles a uma única variável chamada tamanhoSelecionado?

🔴 Desafio

  1. Formulário de Feedback Dinâmico:
    • Crie um formulário com um campo de nome e um comentario (textarea).
    • Crie uma variável reativa contagemCaracteres que mostre quantos caracteres o usuário já digitou no comentário.
    • Impeça o botão "Enviar" de ser clicado (atribute disabled) se o nome estiver vazio ou se o comentário tiver menos de 10 caracteres.
    • Ao enviar, exiba uma mensagem de sucesso na tela e limpe os campos.
    • O que acontece se você remover o bind:value e tentar ler os dados através de uma função? Qual abordagem é mais simples no Svelte?