⌚ Hashwatch — Página de Produto Interativa

📌 Visão Geral

O Hashwatch é um projeto front-end que simula uma página de produto moderna e interativa, inspirada em grandes e-commerces de tecnologia. O foco está na experiência do usuário, permitindo visualizar variações do produto como cor, tamanho e imagens, tudo de forma dinâmica e fluida.

O projeto foi desenvolvido utilizando HTML, CSS e JavaScript puro, com atenção especial à organização do código, semântica, responsividade e boas práticas de versionamento com Git.

---

🎥 Demonstração

Vídeo curto demonstrando as interações do projeto (seleção de cor, tamanho da caixa e troca dinâmica das imagens).

📌 Vídeo de demonstração do projeto

▶️ Clique aqui para ver a demonstração completa do Hashwatch

---

🧩 Funcionalidades

• ✅ Layout moderno e organizado
• 🎨 Seleção dinâmica de cores do produto
• 📐 Seleção de tamanho da caixa (41 mm / 45 mm)
• 🖼️ Troca automática da imagem principal conforme a miniatura selecionada
• 🏷️ Atualização automática do título do produto
• 🚚 Informações de entrega e compra simuladas
• 🧠 Lógica de interface feita 100% em JavaScript puro

---

🛠️ Tecnologias Utilizadas

• HTML5 — estrutura semântica
• CSS3 — layout, grid, flexbox e estilos modernos
• JavaScript (ES6+) — interatividade e manipulação do DOM
• Git & GitHub — controle de versão e histórico de commits

---

📂 Estrutura do Projeto

APPLEWATCH-PROJETO/
├─ imagens/
│  ├─ opcoes-cores/
│  └─ outros-recursos/
├─ index.html
├─ style.css
├─ script.js
└─ README.md

---

⚙️ Comportamento da Aplicação

• A seleção de cores altera:

  • Nome da cor exibida
  • Imagem principal do produto
  • Miniaturas disponíveis

• A seleção do tamanho da caixa:

  • Atualiza dinamicamente o título do produto
  • Ajusta a visualização da imagem

• Todas as mudanças ocorrem sem recarregar a página, utilizando apenas JavaScript.

---

🚀 Como Executar o Projeto

1. Clone o repositório:

   git clone https://github.com/seu-usuario/hashwatch.git

2. Acesse a pasta do projeto:

   cd hashwatch

3. Abra o arquivo index.html no navegador

---

📈 Aprendizados Aplicados

• Manipulação avançada do DOM
• Uso correto de querySelector e eventos
• Organização de estados (cor, tamanho, imagem)
• Boas práticas de commits semânticos
• Separação clara de responsabilidades (HTML / CSS / JS)

---

📌 Status do Projeto

🟡 Em desenvolvimento — melhorias futuras podem incluir:

• Responsividade completa para mobile
• Animações de transição
• Refatoração para componentização

---

👤 Autor

Desenvolvido por Arthur Ponheiro

💻 Estudante de desenvolvimento front-end 📘 Projeto criado com foco em aprendizado, portfólio e boas práticas

---

⭐ Se você gostou do projeto, considere deixar uma estrela no repositório!