Copy an API token

copy-an-api-token.markdown

Copy an API token

A Pen by Catalin Rosu on CodePen.

License.

index.html

<div>
  API token: 
  <mark>
    <code>joiSldUIFJ1bGVzISIsImlhdCI6MTQ1OTQ</code>  
  </mark>
</div>

script.js

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);
  }
});

style.scss

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);
  }
}