📋 Quicklist

O Projeto   |    Tecnologias   |    Layout

💻 O Projeto

O Quicklist é uma aplicação de lista de tarefas responsiva, desenvolvida como desafio prático do módulo de JavaScript da formação Full-Stack da Rocketseat. O usuário pode adicionar novos itens, marcá-los como concluídos e removê-los da lista com feedback visual em tempo real.

Os principais destaques do desenvolvimento incluem:

1. Manipulação dinâmica do DOM: Inserção e remoção de itens na lista via innerHTML e .remove(), sem recarregar a página.
2. Delegação de eventos: O listener de exclusão foi aplicado na <ul> pai com verificação de classList.contains(), evitando rebinding em cada novo item gerado.
3. Feedback com temporização: Ao remover um item, um banner de aviso aparece automaticamente e some após 3 segundos via setTimeout(), com opção de fechar manualmente.

🚀 Tecnologias

• HTML5: Estrutura semântica da aplicação, incluindo formulário de adição e lista de itens com checkboxes customizados.
• CSS3: Estilização com CSS Custom Properties (variáveis), layout responsivo com media queries e checkbox customizado usando input:checked + background-image SVG.
• JavaScript: Lógica de adição de itens, delegação de eventos para exclusão, controle de visibilidade do banner de aviso e temporização com setTimeout().
• Git & GitHub: Versionamento e deploy da aplicação.
• Figma

🔖 Layout

Você pode visualizar e interagir com o projeto através dos links abaixo:

• 📲 Acesse o layout original do projeto aqui
• 👉 Acesse o site funcionando aqui

Para rodar no seu computador (Local):

1. Faça o download ou clone o repositório.
2. Certifique-se de que a estrutura de pastas está correta.
3. Dê um duplo clique no arquivo index.html ou abra através da extensão Live Server no seu editor de código.

---

Feito com 💜 por AlissonFA