Oi Sergio, tudo bem?
Desculpe a demora em retornar.
Primeiramente, parabéns por ter finalizado o seu código do encriptador e estar buscando soluções para os detalhes de estilo. Em relação à sua dúvida sobre como fazer a imagem voltar depois que o botão "copiar" é clicado, existem algumas opções que podemos explorar.
Uma alternativa é guardar o valor da propriedade backgroundImage antes de setá-la como "none" e, depois que o botão "copiar" é clicado, voltar a atribuir esse valor. Para isso, podemos criar uma variável que armazene essa informação. Por exemplo:
let bgImg = mensagem.style.backgroundImage;
mensagem.style.backgroundImage = "none";
Em seguida, no evento do botão "copiar", podemos utilizar essa variável para recuperar o valor original da propriedade backgroundImage e atribuí-lo novamente. Veja um exemplo:
botaoCopiar.addEventListener("click", function() {
// lógica para copiar a mensagem encriptada
mensagem.style.backgroundImage = bgImg;
});
Outra opção é utilizar uma classe CSS para definir a propriedade backgroundImage e, em vez de setá-la como "none", adicionar e remover essa classe conforme necessário. Por exemplo:
.hidden {
background-image: none;
}
Em seguida, no evento do botão "Encriptar", podemos adicionar essa classe à mensagem encriptada:
mensagem.classList.add("hidden");
E, no evento do botão "copiar", podemos remover essa classe:
botaoCopiar.addEventListener("click", function() {
// lógica para copiar a mensagem encriptada
mensagem.classList.remove("hidden");
});
Dessa forma, a imagem será ocultada apenas quando a classe "hidden" estiver presente na mensagem, e voltará a aparecer quando essa classe for removida.
Espero que essas soluções possam te ajudar a resolver o seu problema de estilo. Lembre-se sempre de verificar a documentação do CSS e experimentar diferentes abordagens para encontrar a que melhor se adequa às suas necessidades.
