Copy code to clipboard button

<main>
  <h1>All hail the Clipboard API</h1>

  <p>Florid, wordly code exposition.</p>
  <pre><code class="language-css">.some-box {
  width: 20px;
  height: 20px;
  background: black;
  margin-bottom: 1.5rem;
}</code></pre>

  <p>And I'll tell you another thing..</p>
  <pre><code class="language-html">&lt;div class="box drop3"&gt;&lt;/div&gt;</code></pre>
  
  <p>No! Not finished..</p>
  <pre><code class="language-javascript">console.log("finished");</code></pre>
</main>

*,
*:before,
*:after {
  box-sizing: border-box;
}

pre[class*="language-"] {
  position: relative;
  overflow: auto;

  /* make space  */
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
  border-radius: 10px;
}

pre[class*="language-"] button {
  position: absolute;
  top: 5px;
  right: 5px;

  font-size: 0.9rem;
  padding: 0.15rem;
  background-color: #828282;

  border: ridge 1px #7b7b7c;
  border-radius: 5px;
  text-shadow: #c4c4c4 0 0 2px;
}

pre[class*="language-"] button:hover {
  cursor: pointer;
  background-color: #bcbabb;
}

main {
  display: grid;
  max-width: 600px;
  margin: 20px auto;
}

h1 {
  font-size: 1.3rem;
}

const copyButtonLabel = "Copy Code";

// use a class selector if available
let blocks = document.querySelectorAll("pre");

blocks.forEach((block) => {
  // only add button if browser supports Clipboard API
  if (navigator.clipboard) {
    let button = document.createElement("button");

    button.innerText = copyButtonLabel;
    block.appendChild(button);

    button.addEventListener("click", async () => {
      await copyCode(block, button);
    });
  }
});

async function copyCode(block, button) {
  let code = block.querySelector("code");
  let text = code.innerText;

  await navigator.clipboard.writeText(text);

  // visual feedback that task is completed
  button.innerText = "Code Copied";

  setTimeout(() => {
    button.innerText = copyButtonLabel;
  }, 700);
}