Instruções

Crie uma página de check-out

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 ter um elemento h1 com o texto Checkout. 1. Você deve ter dois elementos section imediatamente após o elemento h1. 1. Você deve ter um elemento h2 com o texto Your Cart dentro da primeira seção. 1. Você deve ter uma imagem de um item na primeira seção com texto alternativo apropriado. Você pode usar esta imagem se desejar: https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/cube.jpg 1. Você deve ter um elemento h2 com o texto Payment Information dentro da segunda seção. 1. Você deve ter um elemento form dentro da segunda seção. 1. Você deve ter um input com um id e name de card-name e um type de text dentro do seu formulário e um label associado a ele. 1. Você deve ter um input com um id e name de card-number e um type de text dentro do seu formulário e um label associado a ele. 1. Você deve ter pelo menos dois elementos input com o atributo required. 1. Você deve incluir um elemento span com o texto * e aria-hidden definido como true dentro do elemento label para cada entrada obrigatória, para que os campos obrigatórios sejam indicados visualmente. 1. Você deve ter um elemento p com um texto de ajuda que explica o formato obrigatório do número do cartão, colocado imediatamente após o campo de entrada do número do cartão. O p deve ter um id de card-number-help e ser referenciado pelo campo de entrada do número do cartão usando aria-describedby.

O que fazer:

Testes:

  • Você deve ter um elemento `h1` com o texto `Checkout`.
  • Você deve ter apenas um elemento `h1` na página.
  • Você deve ter pelo menos dois elementos `section` após o elemento `h1`.
  • Você deve ter um elemento `h2` com o texto `Your Cart` dentro da primeira seção.
  • Você deve ter pelo menos uma imagem com texto alternativo na primeira seção.
  • Você deve ter um elemento `h2` com o texto `Payment Information` dentro da segunda seção.
  • Você deve ter um elemento `form` dentro do segundo elemento `section`.
  • Você deve ter um elemento `input` com um `id` e `name` de `card-name` dentro do form.
  • O campo de nome do seu cartão deve ter um `type` igual a `text`.
  • Você deve ter um elemento `input` com um `id` e `name` de `card-number` dentro do form.
  • A entrada do número do seu cartão deve ter um `type` de `text`.
  • Todos os elementos `input` que não tenham `type` `submit` devem ter um elemento `label` associado a eles.
  • Você deve ter pelo menos dois elementos `input` com o atributo `required`.
  • Você deve incluir um elemento `span` com o texto `*` dentro do elemento `label` para cada entrada obrigatória.
  • Seus elementos `span` devem ter `aria-hidden` definido como `true`.
  • Você deve ter um elemento `p` com um `id` de `card-number-help` imediatamente após o campo de entrada do número do cartão.
  • O texto de ajuda do seu número de cartão não deve estar vazio.
  • A entrada do número do seu cartão deve ter `aria-describedby` definido como `card-number-help`.

Preview