Criar um botão de "Copiar para a área de transferência"

Hoje é o quinto dia do desafio, e o objetivo foi criar um botão de copiar texto. Então, vamos lá para o HTML.

Nele, quis fazer algo mais elaborado, então criei duas div: uma com um parágrafo fixo e outra com um input de texto para que você possa escrever o que deseja copiar. Ambas as div possuem um botão, e esses botões utilizam o mesmo evento no JavaScript.

No JavaScript, fiz duas funções: uma para adicionar o texto escrito no input e outra para copiar o texto do parágrafo.

function AdicionarTexto() {
    let input = document.getElementById('inputText').value;
    let paragraph = document.getElementById('inputParagraph');
    paragraph.innerHTML = input;
}

Essa primeira função, como o nome sugere, é responsável por adicionar o texto na tela.

Agora, esta é a função principal do nosso projeto:

function Copiar(e) {
    let botao = e.target;
    let paragrafo = botao.parentElement.querySelector("p");
    let texto = paragrafo.textContent;
    
    navigator.clipboard.writeText(texto);
}

Aqui, em vez de selecionar um elemento pelo id, selecionei o elemento p que faz parte da div do botão clicado. Com isso, obtenho o texto desse parágrafo e o copio para a área de transferência com o navigator.

---

O resultado final você pode conferir aqui
link para o repositorio do projeto