Discount Copy Code

<div class="discount-code-wrapv2" id="discountCodeWrapv2">
  <i class="fa-solid fa-headphones"></i>
  Christmas special! Enjoy 20% off discount code 
  <span id="textToCopyv1">Xmas24</span>
  <button id="copyButtonv2" aria-label="Copy discount code">
    <i class="fa-solid fa-copy"></i>
  </button>
</div>

<script>
  const copyButton = document.getElementById("copyButtonv2");
  const discountWrap = document.getElementById("discountCodeWrapv2");
  const textToCopy = document.getElementById("textToCopyv1");

  copyButton.addEventListener("click", () => {
    const code = textToCopy.textContent.trim();

    // Use Clipboard API with error handling
    navigator.clipboard.writeText(code).then(() => {
      // Create and display the "Copied!" message
      const copiedMessage = document.createElement("span");
      copiedMessage.classList.add("copied-messagev1");
      copiedMessage.textContent = "Copied to clipboard!";

      // Replace button with message temporarily
      discountWrap.replaceChild(copiedMessage, copyButton);

      // Add fade-out effect and restore button after 2 seconds
      setTimeout(() => {
        copiedMessage.style.opacity = "0";
      }, 1000);

      setTimeout(() => {
        discountWrap.replaceChild(copyButton, copiedMessage);
      }, 2000);

    }).catch((err) => {
      console.error("Failed to copy: ", err);
      alert("Failed to copy code. Please try again.");
    });
  });
</script>

<script src="https://kit.fontawesome.com/3b30aad08c.js" crossorigin="anonymous"></script>

<style>
  .discount-code-wrapv2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #676767;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .discount-code-wrapv2:hover {
    background: #e8f4ff;
    color: #0078d4;
  }

  #textToCopyv1 {
    text-decoration: underline;
    color: #0098d9;
    cursor: pointer;
  }

  button#copyButtonv2 {
    border: none;
    background: transparent;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s;
  }

  button#copyButtonv2:hover {
    color: #0078d4;
  }

  .copied-messagev1 {
    font-size: 12px;
    font-weight: bold;
    color: #0098d9;
    opacity: 1;
    transition: opacity 1s ease-out;
  }
</style>