35 lines
2.2 KiB
Markdown
35 lines
2.2 KiB
Markdown
# Requisitos do projetos
|
|
|
|
Aqui estão os requisitos que serão avaliados:
|
|
|
|
# Requisitos obrigatórios para todos os componentes:
|
|
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
|
- [ ] ultra wide
|
|
- [ ] desktop
|
|
- [ ] tablet
|
|
- [ ] mobile
|
|
- [ ] deve manter a responsividade entre os breakpoints
|
|
- [ ] os textos devem estar iguais ao layout
|
|
- [ ] Se no layout conter algum efeito de hover ou focus, deve ser replicado. Porem qualquer elemento que seja interativo deve ter um efeito
|
|
- [ ] Os seletores de test-id deve estar nos elementos html que cotem o estilo e funcionalidade esperada (ex: se voce esta desenvolvendo um link, o test-id deve estar na tag `<a data-testid="link">` e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulário o test-id deve estar na tag `<input data-testid="input...">` e assim por diante)
|
|
|
|
## Formulário de envio de pontos turísticos
|
|
![](https://i.imgur.com/xzWnSoH.png)
|
|
- [ ] todos os requisitos obrigatórios.
|
|
- [ ] placeholders deve ser iguais ao layout
|
|
- [ ] ao selecionar um imagem, devemos ter o preview da imagem selecionada no campo de upload
|
|
- [ ] ao clicar no botão de enviar, deve limpar todos os campos
|
|
- [ ] o paddings dos imputs quando for escrever texto deve ser igual ao layout
|
|
- [ ] deve conseguir tratar os inputs de forma que todo conteudo digitado seja convertido para texto. Previnir o [Cross-Site Scripting](https://pt.wikipedia.org/wiki/Cross-site_scripting)
|
|
- [ ] todos os campos deve ser obrigatórios
|
|
- [ ] ao clicar no botão de enviar, deve adicionar um novo ponto turístico na lista de pontos turísticos
|
|
|
|
## Pontos turísticos
|
|
![](https://i.imgur.com/YWhpiHo.png)
|
|
- [ ] todos os requisitos obrigatórios.
|
|
- [ ] inicialmente deve mostrar os 4 slides.
|
|
- [ ] o slide deve ser infinito, ou seja, ao chegar no ultimo slide, deve voltar para o primeiro slide
|
|
- [ ] os botões de navegação devem funcionar perfeitamente
|
|
- [ ] E' muito importante que quado redimensionar a tela, os slides devem se ajustar perfeitamente ao tamanho da tela sem quebrar o layout, ficam cortado dos lados ou a quantidade de slides mostrados seja diferente do esperado. (recomendamos usar o [resizw](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) para fazer isso)
|
|
-
|