Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Copy an API token
<div>
API token:
<mark>
<code>joiSldUIFJ1bGVzISIsImlhdCI6MTQ1OTQ</code>
</mark>
</div>
const token = document.querySelector("code");
token.addEventListener("click", async (event) => {
if (!navigator.clipboard) {
return;
}
try {
const text = event.target.innerText;
await navigator.clipboard.writeText(text);
event.target.dataset.clipboard = text;
setTimeout(() =>{
delete event.target.dataset.clipboard;
}, 1500);
} catch (error) {
console.error("Copy failed", error);
}
});
body {
margin: 0;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
font-size: 1.1rem;
color: #fff;
background: linear-gradient(rgba(135,60,255,0.5),
rgba(135,60,255,0.2) 70%),
linear-gradient(-45deg,
rgba(103,140,245,0.8) 25%,
rgba(255,211,65,0.8) 75%);
}
mark {
display: inline-flex;
padding: .2rem .4rem;
background-color: #ffe67d;
border-radius: .2rem;
}
[data-clipboard] {
position: relative;
}
[data-clipboard]::before {
content: attr(data-clipboard);
position: absolute;
background-color: #3eb442;
color: #fff;
left: 0; right: 0;
bottom: 0; top: 0;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 1s;
}
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.03, 1.03, 1.03);
}
to {
transform: scale3d(1, 1, 1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment