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