A missão dada: fazer uma página onde o aluno possa filtrar bolsas de estudo de seu interesse e adicionar à uma lista de bolsas favoritas.
Aplicação superleve (menos de 200KB) desenvolvida usando HTML, CSS e Javascript – com Vue.js para cuidar dos dados e interações do usuário
Como se trata de um aplicativo progressivo com Vue.js em CDN, não se faz necessário instalar nenhum pacote ou dependência. Basta rodá-lo no navegador usando um live server.
Basta clicar aqui
- Clone o repositório do projeto
- Abra em um editor de código (Vscode, Sublime, etc)
- Abra o arquivo index.html em um live server de sua preferência
- HTML5 - como linguagem de marcação para centralizar estilos e conteúdos dinâmicos
- CSS3 – como linguagem de estilo para definir estilos de elementos
- Javascript – como linguagem de programação para armazenar, adicionar lógica e interação com elementos da página
- Vue.js na versão 3 - como framework para criar interfaces de usuário, interação com a API, etc
- Neste app o usuário pode filtrar bolsas de estudo de acordo com a a) cidade, b) curso, c) modalidade e d) preço
- O usuário pode adicionar bolsas através de um Modal de Busca
- Quando o modal está aberto o usuário pode fechar através do botão de cancelar ou ao clicar fora do modal
- Caso nenhuma bolsa seja selecionada, o botão de adicionar bolsa fica desabilitado
- Os resultados da busca têm ordenação por nome da faculdade;
- O usuário pode adicionar bolsas à lista de favoritos (múltiplos cursos também podem ser selecionados e adicionados à lista de favoritos)
- O usuário pode remover bolsas da lista de favoritos
- O usuário pode filtrar bolsas de estudo favoritas por semestre
- Caso a bolsa não esteja disponível, o botão para 'Ver Oferta' aparece desabilitado e o texto é subistituído por 'Indisponível' com a mensagem 'Bolsa indisponível' acima do botão
- O estado da aplicação (com dados do usuário) persiste em LocalStorage
- A navegação pela tecla tab é feita de forma que o foco não seja perdido (acessibilidade)
- As funções e variáveis JavaScript foram escritas em Português para facilitar a leitura e diferenciar da linguagem do backend (em inglês) / exemplo: cidade e curso ao invés de city e course – Foi levado em consideração as regras ESSENTIAL do style guide do Vue
- Modo celular começa abaixo de 1280px de largura. Sendo assim, 1280px é o tamanho mínimo para o modo desktop;
- O HTML foi estruturado de forma semântica para melhor compreensão do usuário;
- Na falta de parametrização exata de medidas e fontes, foram adotados os padrões de tamanho e fonte do Google Fonts;
- Na ferramenta Axe DevTools foi feita uma análise de acessibilidade certificando que todos os elementos estão acessíveis;
- O código foi organizado de forma a facilitar a leitura e a manutenção – tabulação, espaçamento entre linhas, etc;
- Na ausência de diretrizes de design (UI Elements) foram adotados tamanhos aproximados para margins, paddings e etc;