Copy this discount code

1<div class="discount-code-wrap" id="discountCodeWrap">
2    Use code <span id="textToCopy">BF24</span>
3    <button id="copyButton" style="border: none; background: none; cursor: pointer;">
4        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" viewBox="0 0 24 24" version="1.1">
5            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
6            <title>ic_fluent_copy_24_regular</title>
7            <desc>Created with Sketch.</desc>
8            <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
9                <g id="ic_fluent_copy_24_regular" fill="#676767" fill-rule="nonzero">
10                    <path d="M5.50280381,4.62704038 L5.5,6.75 L5.5,17.2542087 C5.5,19.0491342 6.95507456,20.5042087 8.75,20.5042087 L17.3662868,20.5044622 C17.057338,21.3782241 16.2239751,22.0042087 15.2444057,22.0042087 L8.75,22.0042087 C6.12664744,22.0042087 4,19.8775613 4,17.2542087 L4,6.75 C4,5.76928848 4.62744523,4.93512464 5.50280381,4.62704038 Z M17.75,2 C18.9926407,2 20,3.00735931 20,4.25 L20,17.25 C20,18.4926407 18.9926407,19.5 17.75,19.5 L8.75,19.5 C7.50735931,19.5 6.5,18.4926407 6.5,17.25 L6.5,4.25 C6.5,3.00735931 7.50735931,2 8.75,2 L17.75,2 Z M17.75,3.5 L8.75,3.5 C8.33578644,3.5 8,3.83578644 8,4.25 L8,17.25 C8,17.6642136 8.33578644,18 8.75,18 L17.75,18 C18.1642136,18 18.5,17.6642136 18.5,17.25 L18.5,4.25 C18.5,3.83578644 18.1642136,3.5 17.75,3.5 Z" id="🎨-Color"></path>
11                </g>
12            </g>
13        </svg>
14    </button>
15</div>
16
17<script>
18    document.getElementById("copyButton").addEventListener("click", function () {
19        const textToCopy = document.getElementById("textToCopy").textContent;
20
21        // Use Clipboard API for modern browsers
22        navigator.clipboard.writeText(textToCopy).then(function () {
23            // Hide the current content and show "Copied to clipboard!"
24            const discountWrap = document.getElementById("discountCodeWrap");
25            discountWrap.innerHTML = '<span class="copied-message" id="copiedMessage">Copied to clipboard!</span>';
26
27            // Fade-in effect
28            const copiedMessage = document.getElementById("copiedMessage");
29            copiedMessage.style.opacity = 0;
30            copiedMessage.style.transition = "opacity 1s";
31
32            setTimeout(function () {
33                copiedMessage.style.opacity = 1;
34            }, 10);
35        }).catch(function (err) {
36            console.error("Failed to copy: ", err);
37        });
38    });
39</script>
40
41<style>
42    .discount-code-wrap {
43        display: flex;
44        justify-content: center;
45        font-size: 13px;
46        background: #f2f2f2;
47        border-radius: 8px;
48        width: max-content;
49        margin-left: auto;
50        margin-right: auto;
51        padding: 0px 20px;
52        font-weight: 600;
53        color: #676767;
54        align-items: center;
55    }
56
57    #textToCopy {
58        text-decoration: underline;
59        margin-left: 4px;
60        color: #0098d9;
61    }
62
63
64    .copied-message {
65        font-size: 13px;
66        font-weight: bold;
67        color: #0098d9;
68    }
69</style>