https://github.com/tatyanepgoncalves/interactive-modal
An interactive modal page built using HTML, CSS, and JavaScript.
https://github.com/tatyanepgoncalves/interactive-modal
css3 html5 javascript
Last synced: 29 days ago
JSON representation
An interactive modal page built using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/tatyanepgoncalves/interactive-modal
- Owner: tatyanepgoncalves
- Created: 2025-05-07T01:18:39.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2025-05-07T01:31:12.000Z (29 days ago)
- Last Synced: 2025-05-07T19:12:02.203Z (29 days ago)
- Topics: css3, html5, javascript
- Language: CSS
- Homepage: https://interactive-modal.vercel.app/
- Size: 131 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📄 Modal Interativo para site de feedback
> Modal customizado feito com **HTML5**, **CSS** e **JavaScript**, que aparece para o usuário assim que ele clicar no botão `Enviar Feedback`.
> A missão foi simples: praticar o que venho aprendendo na marra, escrevendo código de verdade.
---
## 🚀 Demonstração
[🔗 Link para o projeto em produção](https://interactive-modal.vercel.app/)
---
## 🧠 Funcionalidades
- ✅ Modal abre ao clicar em `Enviar feedback`
- ✅ Pode ser fechado via:
- Botão `X`
- Clicar fora (overlay)
- Tecla `ESC`
- ✅ Campo `textarea` para digitar feedback
- ✅ Botão `Enviar feedback` com:
- Validação do campo
- Loader (spinner de carregamento)
- Mensagem de "Obrigado pelo feedback!"
- Fecha o modal automaticamente após 2s
- ✅ Acessibilidade:
- Foco automático no textarea
- Navegação via teclado (TAB)
- ✅ Responsivo (funciona bem em celular e desktop)
- ✅ Tema claro/escuro com troca dinâmica
- ✅ Feedbacks são armazenados em um array no JS
---
## 🛠️ Tecnologias Usadas
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML5
- CSS (estilização moderna com animações, hover, transições)
- JavaScript (sem framework ou biblioteca)
- Git + VS Code
## ⚙️ Como rodar o projeto
````md
# 1. Clone o repositório
git clone https://github.com/tatyanepgoncalves/interactive-modal.git
# 2. Entre na pasta
cd interactive-modal
# 3. Abrir o arquivo
Abra o arquivo ``index.html`` no navegador (pode só dar dois cliques, ou usar uma extensão tipo Live Server no VS Code)
````
Pronto, tá rodando! 🎉
## 📁 Estrutura de pastas
```md
interactive-modal/
├── src/
│ ├── images/ # Imagens
│ ├── scripts/ # Arquivos js
│ └── styles/ # Estilização da página
├── index.html
└── README.md
```
## 🧑💻 Contribuindo
1 - Faça um fork
2 - Crie uma branch: ``git checkout -b minha-feature``
3 - Commit: ``git commit -m 'feat: minha nova feature'``
4 - Push: ``git push origin minha-feature``
5 - Crie um Pull Request
## 📈 Melhorias futuras
- Enviar feedback para um backend real
- Adicionar animações com Web Animations API
- Implementar testes com Jest ou Cypress
## 👩🏼💻 Autora
Feito com ❤️ por **Tatyane Gonçalves**.
Esse projeto faz parte do meu aprendizado prático. Estou aberta a sugestões, críticas (construtivas, por favor) ou até memes — manda ver!
**Feedback é sempre bem-vindo.** 💬