Click to Copy text in JavaScript

As a programming blogger, you may want to give your readers the ability to easily copy and paste code snippets from your blog. One way to do this is by creating a "click-to-copy" button that allows readers to copy the code snippet to their clipboard with just one click. In this blog post, I'll show you how to create a "click-to-copy" button using JavaScript, HTML, and CSS.

First, let's take a look at the HTML code. We'll create a container element with aclass of "container " which will hold the button and the code snippet. The code snippet is wrapped in a <pre> tag with a class of "code" so that the JavaScript can easily access it.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Click to Copy</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <h3>Click to Copy Code</h3>
    <pre class="code">
      int main()
      {
        printf("Welcome to Tutor Joes");
        return 0;
      }
    </pre>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

Next, let's take a look at the JavaScript code. The JavaScript code first gets the text to be copied from an element with a class of "code", creates a button element with the text "Copy to clipboard", and then adds a click event listener to the button that creates a temporary textarea element, sets its value to the text to be copied, selects the text, executes the "copy" command, removes the textarea element, and displays an alert message to confirm that the code has been copied to the clipboard. Finally, the button element is appended to an element with a class of "container" on the page.

js/script.js

var text=document.querySelector('.code').innerText;

var button=document.createElement("button");
button.innerHTML="Copy to Clipboard";

button.addEventListener("click",function(){
  var textarea=document.createElement("textarea");
  textarea.value=text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  alert("copied to clipboard!");
});

document.querySelector('.container').appendChild(button);

Finally, you can add some CSS styles to enhance the look and feel of the button and container. you can adjust the CSS styles as desired to match the design of your website.

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h3{
  text-align: center;
  text-transform:uppercase ;
  padding: 10px;
}
.container{
  background-color: #efeff0;
  width:800px;
  height:600px;
  padding: 20px;
}
pre{
  width: 100%;
  background-color:#392e4a;
  color:white;
  padding: 10px;
  font-size: 18px;
} 

button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  margin-top: 20px;
  font-size: 20px;
}
button:hover {
  background-color: #0056b3;
}

Output

Live Preview

In conclusion, creating a "click-to-copy" button for your programming blog is a simple and efficient way to make it easier for your readers to copy and paste code snippets from your blog. By using JavaScript, HTML, and CSS, you can create a button that will allow readers to copy code snippets to their clipboard with just one click. I hope this blog post has provided you with the necessary information to create a "click-to-copy" button for your own programming blog. Remember to test your code in multiple browsers to make sure it works as expected and style it to match the design of your website. Happy coding!