<article>
    <h1>Button Pal</h1>
    <p>You get so much <i>for free</i> when you use a real button, so here's a block of CSS to remove the headache of styling them for you. Read more about why you should use a button <a href="https://css-tricks.com/small-tweaks-can-make-huge-impact-websites-accessibility/#article-header-id-2" target="_blank" rel="noopener">here</a>.</p>
    <h2>The button</h2>
    <p>Check out this totally workable button. It's pretty much as easy to work with as a <code>&lt;div&gt;</code>. You can share these styles with an <code>&lt;a&gt;</code> too 🚀</p>
    <button>Click to copy code to your clipboard</button>
    <div role="status"></div>
    <h2>The code</h2>
    <pre><code>button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: #0069ed;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}</code></pre>
    <footer>
        <p>If you find this useful, you should probably check out <a href="https://boilerform.design" target="_blank" rel="noopener">Boilerform</a> to make your forms easier too.</p>
    </footer>
</article>

/* Buttons styles start */
button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: #0069ed;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}
/* Button styles end */






/* Ignore these presentational styles */
html {
    height: 100%;
}

body {
    height: 100%;
    display: grid;
    place-items: center;
    background: #f3f3f3;
    font-family: -apple-system, BlinkMacSystemFont, 
                    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
                    "Fira Sans", "Droid Sans", "Helvetica Neue", 
                    sans-serif;
    line-height: 1.5;
    color: #333;
}

article {
    max-width: 60ch;
    padding: 2rem 1rem;
}

> * + *:not(pre) {
    margin: 1rem 0 0 0;
}

h1, h2 {
    font-weight: 300;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

h2 {
    padding-top: 0.5rem;
}

a {
    color: #017171;
    text-decoration-skip-ink: auto;
}

pre {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

code {
    padding: 2px 4px;
    background: #222f3e;
    color: #f3f3f3;
}

pre code {
    display: block;
    position: relative;
    overflow-x: auto;
    tab-size: 4;
    padding: 2rem;
    -webkit-overflow-scrolling: touch;
}

[role="status"] {
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.5rem 0 0 0;
}

[role="status"]:empty {
    display: none;
}

[aria-hidden="true"] {
    font-style: normal;
}

console.clear();

const buttonElement = document.querySelector('button');
const codeElement = document.querySelector('pre code');
const statusElement = document.querySelector('[role="status"]');

// Either use the native clipboard API or use a little fallback
const clipboard = navigator.clipboard || {
    writeText(value) {
        
        // Create a textarea element and hide it
        const textAreaElem = document.createElement('textarea');
        textAreaElem.style.cssText = `
            opacity: 0;
            position: fixed;
            top: 50%;
        `;

        // Set its value to what we want to copy
        textAreaElem.value = value;
        
        // Stick it in the DOM
        document.body.appendChild(textAreaElem);
        
        // Use its native select method
        textAreaElem.select();
        
        // Copy that stuff to the clipboard!
        console.log(document.execCommand('copy'));

        // Remove it again
        document.body.removeChild(textAreaElem);

        return Promise.resolve();    
    }
};

buttonElement.addEventListener('click', evt => {
    
    evt.preventDefault();
    
    clipboard.writeText(codeElement.innerText)
        .then(() => {
            statusElement.innerHTML = '<span aria-hidden="true">🎉</span> Code copied to clipboard!';
        })
        .catch(() => {
            statusElement.innerHTML = '<span aria-hidden="true">🛑</span> There was an error copying the code. Try again!';
        });
});