🧩 Desafio prático: proposto pela formação Full Stack da Rocketseat, que forneceu apenas o layout no Figma e a lista de requisitos. Todo o código (estrutura, estilos e lógica em JavaScript) foi desenvolvido por mim, sem acompanhamento de aula.
Aplicação para gerenciar a lista de compras da semana: adicionar itens, marcar como comprados e remover o que não for mais necessário, com feedback visual para cada ação. Feita com HTML, CSS e JavaScript puro.
- Lista inicial carregada com itens de exemplo
- Adição de novos itens pelo campo de texto, com o input limpo após cada adição
- Bloqueio de itens vazios
- Checkbox para marcar o item como concluído, com estilo visual diferente, e desmarcar
- Remoção de itens pelo botão de lixeira
- Alerta de "item removido" que some sozinho após alguns segundos ou ao clicar no X
- Layout responsivo para desktop e celular
- HTML5: estrutura da página e da lista
- CSS3: estilização dos cartões, botões, alerta e responsividade
- JavaScript: manipulação do DOM, eventos e controle do estado dos itens
- Git e GitHub Pages: versionamento e publicação
- Transformar um layout do Figma em interface funcional
- Criar e remover elementos do DOM dinamicamente
- Capturar e validar o texto digitado pelo usuário
- Alternar estados visuais com
classList - Exibir mensagens temporárias com
setTimeout - Organizar o projeto separando estrutura, estilo e comportamento
quicklist/
├── assest/
│ ├── icons/
│ ├── logo.svg
│ └── preview-quicklist.png
├── css/
│ ├── alert.css
│ ├── form.css
│ ├── global.css
│ ├── header.css
│ ├── list.css
│ ├── main.css
│ └── style.css
├── scripts/
│ ├── alert.js
│ ├── index.js
│ └── shopping-list.js
├── index.html
└── README.md
Não há dependências. Basta clonar e abrir no navegador:
git clone https://github.com/lpwesley/quicklist.git
cd quicklistAbra o index.html no navegador ou use a extensão Live Server no VS Code.
Desafio e layout propostos pela Rocketseat como parte da formação Full Stack. A implementação foi feita por mim.
Desenvolvido por Wesley Lauwer · GitHub