Lista de compras

1. Estrutura inicial

• Crie o arquivo index.html com a estrutura básica do HTML;
• Crie o arquivo style.css para os estilos da página;
• Crie o arquivo script.js para a lógica em JavaScript;
• Linke o style.css e o script.js dentro do index.html

---

2. Requisitos

Estrutura da página

• Crie um título;
• Crie um botão de “Voltar” deve estar presente no topo da página;
• Crie um campo de input para adicionar novos itens deve estar presente;
• Crie um botão “Adicionar item” ao lado do input;

Lista de itens

• Cada item deve aparecer em formato de lista, com:
  • Um checkbox para marcar o item como concluído;
  • O nome do item;
  • Um botão de remover (ícone de lixeira).
• A lista deve começar com alguns itens pré-cadastrados.

Adicionar novo item

• Ao digitar um texto no campo e clicar em “Adicionar item”, o novo item deve aparecer na lista abaixo;
• O campo de input deve ser limpo após adicionar o item;
• Se o campo estiver vazio e o usuário tentar adicionar, nada deve acontecer ou uma mensagem de erro amigável deve ser exibida;

Remover item

• Ao clicar no botão de remover, o item deve ser removido da lista;
• Após a remoção, deve aparecer uma mensagem de alerta na parte inferior;

Marcar como concluído

• Ao clicar no checkbox, o item deve ser marcado como concluído (por exemplo, texto riscado ou opacidade reduzida);
• Clicar novamente no checkbox deve desmarcar o item.

---

3. Desenvolvendo o projeto

Para desenvolver esse projeto, recomendamos utilizar as principais tecnologias que utilizamos durante o desenvolvimento do primeiro módulo da formação.

Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!

Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além! 🚀

---

4. Entrega

Após concluir o desafio, você deve enviar a URL do seu código no Github.

Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência? É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!

Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜

---

5. Considerações finais

Lembre-se que o intuito de um desafio é te impulsionar, por isso, dependendo do desafio, pode ser que você precise ir além do que foi discutido em sala de aula. Mas isso não é algo ruim: ter autonomia para buscar informações extras é uma habilidade muito valiosa e vai ser ótimo pra você treinar ela aqui com a gente!

E lembre-se: tenha calma! Enfrentar desafios faz parte do seu processo de aprendizado!

Se precisar de alguma orientação ou suporte, estamos aqui com você! Bons estudos e boa prática! 💜

---

Feito com 💜 por Rocketseat 👋