From aec3d5da8f7c641e5d8d27470fbd064ac2df8275 Mon Sep 17 00:00:00 2001 From: marlon passos Date: Thu, 30 Mar 2023 09:02:32 -0300 Subject: [PATCH] docs: atualiza requisitos para desafio de pontos turisticos --- README.md | 12 ++++++---- REQUISITOS.md | 65 ++++++++++++++------------------------------------- 2 files changed, 25 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index da9d0c8..3b363db 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # 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 -[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 O desafio pode ser desenvolvido: @@ -10,10 +10,12 @@ O desafio pode ser desenvolvido: ## Ferramentas obrigatórias: - [html](https://developer.mozilla.org/pt-BR/docs/Web/HTML) - [css](https://developer.mozilla.org/pt-BR/docs/Web/CSS) - -## Ferramentas opcionais (sugeridas): +- [javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript) - [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 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/) diff --git a/REQUISITOS.md b/REQUISITOS.md index 6d63b3f..6e94d46 100644 --- a/REQUISITOS.md +++ b/REQUISITOS.md @@ -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 - [ ] 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 `` 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 `` e assim por diante) -## Header -![](https://i.imgur.com/tYPxkEg.png) -- [ ] todos os requisitos obrigatórios -### Header - Logo -![](https://i.imgur.com/eMK5jb3.png) -- [ ] todos os requisitos obrigatórios -- [ ] deve conter textos alternativos para a logo -- [ ] deve conter um link para a home ("/") +## 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 -## Banner -![](https://i.imgur.com/qy6Uy8Q.png) -- [ ] todos os requisitos obrigatórios -- [ ] A imagem nao deve distorcer ou ficar cortada em nenhum tamanho de tela, deve manter a proporção. - -## Texts 1 -![](https://i.imgur.com/f4KMK6D.png) -- [ ] 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) -- \ No newline at end of file +## 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) +-