copy to clipboard javascript | how to copy to clipboard javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create copy to clipboard javascript. We use HTML & CSS and javascript for this copy to clipboard javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a copy to clipboard javascript.

HTML code for copy to clipboard

 <h1>Copy in Clipboard with JavaScript</h1>  
 <textarea id="to-copy" spellcheck="false">Write something and copy it into your clipboard by clicking in the button below.</textarea>  
 <button id="copy" type="button">Copy in clipboard<span class="copiedtext" aria-hidden="true">Copied</span></button>  
 <textarea id="cleared" placeholder="Paste your copied content here. Just to test…"></textarea>  

There is all HTML code for the copy to clipboard. Now, you can see output without CSS, then we write CSS for our copy to clipboard.

output

output

CSS for copy to clipboard javascript

 /* Just to play with animations */  
 .copiedtext {  
  position: absolute;  
  left: 0; top: 0; right: 0;  
  text-align: center;  
  opacity: 0;  
  transform: translateY(-1em);  
  color: #000;  
  transition: all .500s;  
 }  
 .copied .copiedtext {  
  opacity: 1;  
  transform: translateY(-2em);  
 }  
 /* Some Generic styles */  
 body {  
  text-align: center;  
  font-family: "Open Sans", Helvetica, Arial, sans-serif;  
  color: #444;  
  line-height: 1.6;  
 }  
 h1 {  
  margin: 1.75em auto 1.25em;  
 }  
 textarea,  
 button {  
  font-size: 1em;  
  font-family: "Open Sans", Helvetica, Arial, sans-serif;  
 }  
 textarea {  
  display: block;  
  width: 300px;  
  max-width: 100%;  
  height: 75px;  
  margin: 2em auto 1.5em;  
  background: #F2F2F6;  
  border: 1px solid #ddd;  
  padding: 10px 15px;  
  resize: vertical;  
 }  
 [id="cleared"] {  
  margin-top: 4em;  
 }  
 textarea:focus {  
  border-color: #8fa423;  
 }  
 button {  
  position: relative;  
  padding: 8px 20px;  
  border: 0;  
  font-size: 0.835em;  
  text-transform: uppercase;  
  letter-spacing: 0.125em;  
  font-weight: bold;  
  color: #FFF;  
  background: #8fa423;  
  transition: background .275s;  
 }  
 button:hover,  
 button:focus {  
  background: #74861A;  
 }  

Javascript project ideas with complete source code 

Now we have completed our CSS section,  Here is our updated output CSS.

output

output

Now add javascript for the copy to clipboard!

Javascript for copy to clipboard 

 var toCopy = document.getElementById( 'to-copy' ),  
   btnCopy = document.getElementById( 'copy' ),  
   paste  = document.getElementById( 'cleared' );  
 btnCopy.addEventListener( 'click', function(){  
  toCopy.select();  
  paste.value = '';  
  if ( document.execCommand( 'copy' ) ) {  
    btnCopy.classList.add( 'copied' );  
   paste.focus();  
    var temp = setInterval( function(){  
     btnCopy.classList.remove( 'copied' );  
     clearInterval(temp);  
    }, 600 );  
  } else {  
   console.info( 'document.execCommand went wrong…' )  
  }  
  return false;  
 } );  

output

Check it more

number guessing game javascript 

Age Calculator javascript | Age Calculator using html css javascript

tic tac toe javascript | Tic Tac Toe game javascript code 

calculator Html javascript | calculator javascript code

javascript music drum kit project

Glassmorphism Login Form Html Css

Now we have completed our css section,  Here is our updated output with javascript. Hope you like copy to clipboard javascript, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a copy to clipboard javascript using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki