search

gabriel-guerra / ESOFT5S-pw-prova-2

Gabriel Sestito Guerra RA: 23025044-2
0 stars 0 forks source link

Prova 2º bim #1

Open gabriel-guerra opened 1 month ago

gabriel-guerra commented 1 month ago

Prova Programação WEB - 2o Bimestre

  1. (0.5) Estrutura de Grid na Página, Cor do Header, Main e Footer:

    • [x] (0.2) Utilize um sistema de grid, como o CSS Grid para estruturar a página.
    • [x] (0.1) Utilize a cor #4682b4 para o background do <header> e <footer>, a cor #f0f0f0 para o background do <main>.
    • [x] (0.2) Defina 100ch como tamanho máximo do conteúdo principal. para garantir uma boa experiência de leitura.

  2. (0.6) Form de busca:

    • [x] (0.1) Crie um formulário (<form>) para o campo de busca, no header.
    • [x] (0.2) Deixe o input centralizado.
    • [x] (0.1) Adicione um botão dentro do input de busca, para ser o submit. Utilize o ícone 🔍. Adicionar cursor pointer.
    • [x] (0.2) Alinhe o botão dentro do campo de busca utilizando position: absolute.

  3. (1.65) Filtro:

    • [x] (0.1) Utilize a tag <svg> com o código SVG fornecido para criar o ícone de filtro.
    • [x] (0.1) Alinhe o ícone de filtro à direita do header.
    • [x] (0.1) O ícone deve ser clicável e abrir um modal (<dialog>) com os filtros. Adicionar cursor pointer.
    • [x] (1) Exiba o número de filtros ativos, baseado na query string, ao lado do ícone de filtro (não contar page e busca). Alinhe com position: absolute.
    • [x] (0.35) Caso exista filtros na querystring, eles deverão ser aplicados nos inputs. Ex: url.com?busca=IBGE, o input de busca deverá ter o value "IBGE"

  4. (2.85) Filtros em um Dialog HTML:

    • [x] (0.5) Utilize a tag <dialog> do HTML para criar o modal de filtros.
    • [x] (0.25) Inclua os campos de filtro "Tipo", "Quantidade", "De" e "Até" dentro do dialog.
    • [x] (0.25) Os filtros deverão ficar em um form.
    • [x] (0.25) Inicie sempre a quantidade com 10, e as options sendo múltiplos de 5.
    • [x] (0.25) Adiciona um ícone de "X" no canto superior direito do modal para fechá-lo.
    • [x] (0.25) Adicione um botão "Aplicar" para aplicar os filtros e fechar o modal.
    • [x] (1) Ao aplicar, os filtros devem ser refletidos na URL da página, com query string, e os dados devem ser atualizados (nova chamada na API).

  5. (1.5) Buscar as Notícias da API do IBGE:

  6. (1.3) Listar as Notícias Dentro de uma <ul> <li>:

    • [x] (0.25) Após obter os dados das notícias da API, itere sobre esses dados e crie elementos <li> para cada notícia.
    • [x] (0.1) Liste esses elementos dentro de uma <ul>.
    • [x] (0.1) Cada notícia deve conter a imagem da noticia, o título em um h2, introdução em um parágrafo.
    • [x] (0.3) A imagem fica em um objeto stringified, e precisa ser concatenada com a url de noticias do IBGE https://agenciadenoticias.ibge.gov.br/
    • [x] (0.2) Mostrar as editorias da notícia com prefixo #.
    • [x] (0.25) Mostrar a quanto tempo a notícia foi publicada, com base na data de publicação. Ex possíveis: "Publicado há 2 dias", "Publicado hoje", "Publicado ontem".
    • [x] (0.1) Adicione um botão "Leia Mais" ao final de cada notícia, que ao ser clicado, abre a página da notícia no site do IBGE, em uma nova aba.

  7. (0.7) Botoes de Paginacao no Final das Noticias em uma <ul> <li>:

    • [x] (0.1) Crie botões de paginação no final das notícias utilizando elementos <button> dentro de <ul> <li>.
    • [x] (0.25) Implemente a lógica para mostrar no máximo 10 botões de páginas. Sempre mostrando a página atual no meio. Ex: Caso o usuário esteja na página 10, mostre as páginas 5, 6, 7, 8, 9, 10, 11, 12, 13, 14. Mesmo comportamento do site do IBGE
    • [x] (0.1) Indique visualmente a página atual com uma cor de fundo #4682b4.
    • [x] (0.25) Atualizar a querystring da página ao clicar em um botão de paginação. Também carregar novos dados da API com base na página selecionada.

  8. (0.1) Remover Todos os Bullet Points de <ul> <li>:

    • [x] (0.1) Utilize CSS para remover os bullet points padrão de listas não ordenadas (<ul>).

  9. (0.7) Responsividade:

    • [x] (0.2) Garanta que a página seja responsiva e não quebre em resoluções menores.
    • [x] (0.5) Utilize CSS Grid para organizar os campos de filtro em duas colunas em resoluções maiores que 760px e em uma coluna em resoluções menores.

Links e Recursos Adicionais

Forms para enviar a atividade - Prazo 16/06

Vídeo demonstrativo

CSS Position:

MDN - CSS Position
DevMedia - Como usar a propriedade Position

SVG utilizado no filtro:

<svg
  width="20"
  height="20"
  fill="#f0f0f0"
  viewBox="0 0 80 90"
  focusable="false"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="m 0,0 30,45 0,30 10,15 0,-45 30,-45 Z"></path>
</svg>

Elemento <dialog>:

MDN - The dialog element

Funções/APIS JS úteis:

Atualizar querystring via JS sem recarregar a página

Percorrer dados de um formulário

Percorrer valores de querystring

gabriel-guerra commented 1 month ago