📋 Lista de Compras

Aplicação web interativa para gerenciar sua lista de compras de forma prática e dinâmica, desenvolvida como projeto de aprendizado no curso de Construção de Páginas Dinâmicas com JavaScript da Alura.

🎯 Funcionalidades

• ✅ Adicionar itens à lista de compras de forma dinâmica
• ✅ Marcar itens como comprados com checkbox visual
• ✅ Remover itens da lista com um clique
• ✅ Visualizar dia da semana atual
• ✅ Validação automática de lista vazia com mensagem informativa
• ✅ Interface responsiva e amigável ao usuário

📁 Estrutura do Projeto

Lista-de-Compras/
├── index.html                    # Página principal HTML
├── index.js                      # Script principal (ES6 Modules)
├── styles.css                    # Estilos CSS da aplicação
├── README.md                     # Documentação do projeto
├── LICENSE                       # Licença do projeto
├── img/
│   └── bag.png                   # Ícone da sacola de compras
└── scripts/
    ├── criarItemDaLista.js       # Módulo: Criação de itens
    ├── gerarDiaDaSemana.js       # Módulo: Gerador do dia da semana
    └── verificarListaVazia.js    # Módulo: Validação de lista vazia

✔️ Técnicas e Tecnologias Utilizadas

• HTML5: Estrutura semântica dos elementos
• CSS3: Estilização, layout flexível e responsividade
• JavaScript (ES6):
  • Módulos ES6 para organização do código
  • Manipulação do DOM
  • Event listeners para interatividade
  • Operações de array e strings
• Google Fonts: Tipografia moderna (Krona One, Montserrat, Numans)

🚀 Como Usar

1. Abra o arquivo index.html no seu navegador favorito
2. Digite o item que deseja adicionar no campo de entrada
3. Clique em "Salvar item" ou pressione Enter
4. Marque os itens comprados clicando no checkbox
5. Remova itens quando necessário

🛠️ Como Executar o Projeto

Opção 1: Abrir Direto no Navegador

Simplesmente faça duplo clique no arquivo index.html ou arraste-o para o navegador.

Opção 2: Usar uma Extensão de Servidor Local

Se estiver usando Visual Studio Code:

1. Instale a extensão Live Server (autor: Ritwick Dey)
2. Clique com botão direito no index.html
3. Selecione "Open with Live Server"

💡 Detalhes dos Scripts

index.js

• Gerencia os eventos de clique do botão
• Previne o comportamento padrão do formulário
• Orquestra a criação e validação de itens

scripts/criarItemDaLista.js

• Cria elementos de lista (<li>) dinamicamente
• Implementa checkbox para marcar como comprado
• Permite remover itens da lista
• Manipula o DOM para inserir novos itens

scripts/verificarListaVazia.js

• Verifica se há itens na lista
• Mostra/oculta a mensagem "Não há nenhum item na lista no momento!"
• Valida o estado da aplicação

scripts/gerarDiaDaSemana.js

• Gera o dia da semana atual
• Exibe informação temporal na interface

🎨 Design e UX

• Paleta de cores clara e harmoniosa
• Ícones visuais intuitivos (sacola de compras)
• Layout limpo e organizado
• Feedback visual para ações do usuário
• Mensagens informativas claras

📄 Licença

Este projeto está licenciado sob a licença especificada no arquivo LICENSE.

👨‍💻 Desenvolvedor

Desenvolvido como projeto de aprendizado na Alura em JavaScript.

---

Desenvolvido com ❤️