Instruções

Construir um RSVP de Evento

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve criar um formulário com campos para nome, e-mail, número de participantes, preferências alimentares e uma opção para indicar se você está trazendo convidados adicionais. 2. Você deve ter um campo de entrada de texto onde você deve inserir seu nome (obrigatório). 3. Você deve ter um campo de entrada de email onde você deve inserir seu endereço de email (obrigatório). O formulário deve validar o formato para garantir que seja um email válido. 4. Você deve ter um campo de entrada numérica onde você insere o número de participantes no formulário (obrigatório), e o número não deve ser menor que um. 5. Você deve ter um campo de entrada de texto onde você insira suas preferências alimentares, e essas informações devem ser opcionais. 6. Você deve ser capaz de marcar ou desmarcar uma caixa de seleção para indicar se está trazendo convidados adicionais. 7. Você deve ter um botão que envie o formulário, e o formulário não deve causar o recarregamento da página ao ser enviado. 8. Você deve ver uma mensagem de confirmação exibida abaixo do formulário após o envio, seguida pelos detalhes fornecidos (nome, e-mail, número de participantes, preferências alimentares e convidados adicionais opcionais). Aqui está uma mensagem de exemplo após enviar o formulário:
RSVP Submitted!
Name: John Doe
Email: example@example.com
Number of attendees: 2
Dietary preferences: None
Bringing additional guests: Yes

O que fazer:

Testes:

  • Você deve ter um único elemento `form` para conter todo o conteúdo do seu formulário.
  • Você deve ter dois elementos `input` do tipo `text`.
  • Você deve ter um elemento `input` do tipo `email`.
  • Você deve ter um elemento `input` do tipo `number`.
  • Você deve ter um elemento `input` do tipo `checkbox`.
  • Um elemento `input[type="text"]` deve ser obrigatório.
  • O elemento `input[type="email"]` deve ser obrigatório.
  • O elemento `input[type="number"]` deve ser obrigatório.
  • O elemento `input[type="number"]` não deve aceitar valores menores que 1.
  • Alterar o valor dos elementos `input[type="text"]` deve atualizar o estado do componente.
  • Alterar o valor dos elementos `input[type="email"]` deve atualizar o estado do componente.
  • Alterar o valor dos elementos `input[type="number"]` deve atualizar o estado do componente.
  • Alterar o valor dos elementos `input[type="checkbox"]` deve atualizar o estado do componente.
  • Enviar o formulário não deve resultar no recarregamento da página.
  • Após a submissão, deve haver um elemento na página indicando o estado do `input` de nome.
  • Após o envio, deve haver um elemento na página indicando o estado do `input` de email.
  • Após a submissão, deve haver um elemento na página indicando o estado do número de participantes no `input`.
  • Após a submissão, deve haver um elemento na página indicando o estado do `input` de preferências alimentares.
  • Após o envio, deve haver um elemento na página indicando o estado do `input` de convidados adicionais.

Preview