Prática Eventos

Exercícios de classe 🏫

1. Projeto "Galeria"

Primeiro crie a estrutura base da página, como indicado no print a seguir:

Pontos de atenção:

O menu lateral deverá seguir a tela conforme o usuário scrolle a mesma.
A quantidade de items indicada é apenas uma ilustração, o layout deverá funcionar independende da quantidade de itens.

Dicas

Depois, crie o menu lateral, como indicado no print a seguir:

Pontos de atenção:

Dicas

Depois, crie o modal, como indicado no print a seguir:

Pontos de atenção:

O modal deverá ser aberto mostrando a foto da galeria que o usuário clicar
O modal deverá ser fechado quando o usuário clicar no icone "X" ou no fundo transparente
O icone "seta anterior" não deverá aparecer quando o usuário estiver visualizando a primeira imagem
O icone "próxima seta" não deverá aparecer quando o usuário estiver visualizando a ultima imagem
O icone "seta anterior", quando clicado, deverá mostrar a foto anterior da galeria considerando a imagem atual e não deverá fechar o modal
O icone "próxima seta", quando clicado, deverá mostrar a próxima foto da galeria considerando a imagem atual e não deverá fechar o modal
A imagem do modal, quando clicada, não deverá fechar o modal
O modal deverá aparecer por cima do menu lateral

Dicas

Depois, crie o sistema de likes, como indicado no print a seguir:

Pontos de atenção:

Se o usuário clicar duas vezes rapidamente (clique duplo) na imagem do modal, esta imagem deverá receber um like
As imagens da galeria que tiverem likes, deverão indicar isso mostrando o icone de coração
Quando o modal for aberto, se a imagem tiver um like, deverá indicar isso mostrando o icone de coração

Dicas