🌟 Box Shadow Generator

🎯 Sobre o Projeto

Este projeto é um gerador de sombras com controle sobre diversos parâmetros, desenvolvido em JavaScript. Ele permite ajustar e visualizar em tempo real as sombras aplicadas a uma caixa de pré-visualização, além de copiar a regra CSS gerada.

👨🏾‍💻 Principais Funcionalidades

• Ajuste de sombra: controle sobre a posição horizontal e vertical, o desfoque, a expansão, a cor e a opacidade da sombra.
• Modo inset: possibilidade de alternar entre sombra interna e externa.
• Preview em tempo real: a sombra é exibida em tempo real em uma caixa de pré-visualização.
• Exibição e cópia da regra CSS: o código gerado para o box-shadow pode ser facilmente copiado.
• Modo Escuro: alternância entre modo claro e escuro, com a preferência salva no Local Storage.

📸 Screenshots

🏆 Aprendizados

• Manipulação do DOM: Seleção e atualização de valores diretamente nos elementos HTML para sincronizar com o preview.
• Função de Conversão de Cor: Transformação de cores hexadecimais em RGB para criar sombras com opacidade ajustável.
• Eventos de Input e Click: Uso de eventos input e click para ajustar parâmetros e alternar o modo escuro.
• Local Storage: Armazenamento do tema escolhido pelo usuário, aplicando-o automaticamente ao recarregar a página.
• Copiar para Clipboard: Implementação de função para copiar a regra CSS da sombra gerada.
• Criação de Classe Customizada: Organização do código em uma classe BoxShadowGenerator, promovendo reutilização e modularidade do código.

🚀 Tecnologias Utilizadas

• JavaScript
• HTML5
• CSS3

🔗 Projeto On-line

Este projeto está disponível para visualização on-line.
Você pode acessá-lo através do link: https://box-shadow-pi.vercel.app/

Este projeto foi desenvolvido como parte do curso Formação Front-end - HTML, CSS, JavaScript, React e +, ministrado por Matheus Battisti da Escola de Programação 🕒 Hora de Codar.