docs: atualiza requisitos para desafio de pontos turisticos

This commit is contained in:
marlon passos 2023-03-30 09:02:32 -03:00
parent 8472e4a2fa
commit aec3d5da8f
2 changed files with 25 additions and 52 deletions

View File

@ -1,8 +1,8 @@
# Desafio M3 Academy # Desafio M3 Academy
Este é um desafio proposto pela M3 Academy, que consiste na implementação de uma pagina home de um site institucional com base em um layout pré-estabelecido no Figma. Este é um desafio proposto pela M3 Academy, que consiste na implementação de uma pagina que adiciona pontos turisticos com base em um layout pré-estabelecido no Figma.
# Link do Figma # Link do Figma
[O layout do desafio pode ser acessado através do Figma.](https://www.figma.com/file/GrqxGHqg880j9VECubS7vn/Desafio-Landing-Page?node-id=59-938&t=XmhsZsz2DYicySdH-0) [O layout do desafio pode ser acessado através do Figma.](https://www.figma.com/file/17qVxDuorxQNzCJc2HOclo/Desafio-Pontos-Tur%C3%ADsticos?node-id=0-1&t=XmhsZsz2DYicySdH-0)
# Dicas de ferramentas # Dicas de ferramentas
O desafio pode ser desenvolvido: O desafio pode ser desenvolvido:
@ -10,10 +10,12 @@ O desafio pode ser desenvolvido:
## Ferramentas obrigatórias: ## Ferramentas obrigatórias:
- [html](https://developer.mozilla.org/pt-BR/docs/Web/HTML) - [html](https://developer.mozilla.org/pt-BR/docs/Web/HTML)
- [css](https://developer.mozilla.org/pt-BR/docs/Web/CSS) - [css](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- [javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
## Ferramentas opcionais (sugeridas):
- [SAAS](https://sass-lang.com/) - [SAAS](https://sass-lang.com/)
- [gulp](https://gulpjs.com/)
## Ferramentas opcionais (sugeridas):
- [webpack](https://webpack.js.org/)
- [slick](https://kenwheeler.github.io/slick/)
# Upload do projeto # Upload do projeto
Após a finalização do projeto, o mesmo deverá ser enviado para uma plataforma de hospedagem, como o GitHub Pages ou o Vercel. Abaixo estão os links para a documentação oficial de cada uma das plataformas: Após a finalização do projeto, o mesmo deverá ser enviado para uma plataforma de hospedagem, como o GitHub Pages ou o Vercel. Abaixo estão os links para a documentação oficial de cada uma das plataformas:
- [GitHub Pages]( https://pages.github.com/) - [GitHub Pages]( https://pages.github.com/)

View File

@ -13,51 +13,22 @@ Aqui estão os requisitos que serão avaliados:
- [ ] Se no layout conter algum efeito de hover ou focus, deve ser replicado. Porem qualquer elemento que seja interativo deve ter um efeito - [ ] 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) - [ ] 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)
## Header ## Formulário de envio de pontos turísticos
![](https://i.imgur.com/tYPxkEg.png) ![](https://i.imgur.com/xzWnSoH.png)
- [ ] todos os requisitos obrigatórios - [ ] todos os requisitos obrigatórios.
### Header - Logo - [ ] placeholders deve ser iguais ao layout
![](https://i.imgur.com/eMK5jb3.png) - [ ] ao selecionar um imagem, devemos ter o preview da imagem selecionada no campo de upload
- [ ] todos os requisitos obrigatórios - [ ] ao clicar no botão de enviar, deve limpar todos os campos
- [ ] deve conter textos alternativos para a logo - [ ] o paddings dos imputs quando for escrever texto deve ser igual ao layout
- [ ] deve conter um link para a home ("/") - [ ] 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
## Banner ## Pontos turísticos
![](https://i.imgur.com/qy6Uy8Q.png) ![](https://i.imgur.com/YWhpiHo.png)
- [ ] todos os requisitos obrigatórios - [ ] todos os requisitos obrigatórios.
- [ ] A imagem nao deve distorcer ou ficar cortada em nenhum tamanho de tela, deve manter a proporção. - [ ] inicialmente deve mostrar os 4 slides.
- [ ] o slide deve ser infinito, ou seja, ao chegar no ultimo slide, deve voltar para o primeiro slide
## Texts 1 - [ ] os botões de navegação devem funcionar perfeitamente
![](https://i.imgur.com/f4KMK6D.png) - [ ] 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)
- [ ] todos os requisitos obrigatórios
## Cards 1
![](https://i.imgur.com/HL6JBmS.png)
- [ ] todos os requisitos obrigatórios
- [ ] A order dos cards deve ser alterada de acordo com o tamanho da tela
## GAllery
![](https://i.imgur.com/n8oovYz.png)
- [ ] todos os requisitos obrigatórios
- [ ] A order das imagens deve ser alterada de acordo com o tamanho da tela
- [ ] As imagens nao devem distorcer ou ficar cortadas em nenhum tamanho de tela, deve manter a proporção.
## Galery 2
![](https://i.imgur.com/k3zP52x.png)
- [ ] todos os requisitos obrigatórios
- [ ] A order dos cards deve ser alterada de acordo com o tamanho da tela
## Texts 2
![](https://i.imgur.com/8xdq7oO.png)
- [ ] todos os requisitos obrigatórios
- [ ] na versão mobile deve inverter a ordem do texto e da imagem
## Footer
![](https://i.imgur.com/GwOijzu.png)
- [ ] todos os requisitos obrigatórios
- [ ] cada icone deve conter um link para a pagina do icone
- [ ] [Youtube](https://www.youtube.com/@m3academy392)
- [ ] [Facebook](https://www.facebook.com/m3Academy)
- [ ] [Instagram](https://www.instagram.com/m3Academy)
- -