Text Copy to Clipboard With Javascript (Free Code)

Hello developers friends, my name is Gautam Prajapat and welcome all of you to my new blog post. Today we have created a text copying tool which is very useful and friends, we have created it only with the help of HTML CSS and JavaScript. It is very easy to make this, friends, if you are learning JavaScript and if you make this type of project or can see the made project, then your knowledge of JavaScript will increase a lot and you will also get more. This project will also help in making good projects. We have made this project at beginner level.

First of all, we have prepared the structure of this project, for which we have taken the help of HTML. In HTML, we have created a text area and at the bottom of that text area, we have created a copy text button from which the user can You can easily copy the text which can be seen in the code below.

<div class=”text-box”>
<div class=”top-area”>
<h2>Copy To Clipboard</h2>

</div>
<textarea readonly spellcheck=”false”></textarea>
<div class=”copy-btn”><i class=”fas fa-copy”></i> Copy</div>
</div>

Friends, in the text area that we have created, we have to enter the text as per our choice so that the user can copy it.

				
					<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/Screenshot-202024-03-24-20051653.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="text-box">
        <div class="top-area">
            <h2>Copy To Clipboard</h2>

        </div>
        <textarea readonly spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
  </textarea>
        <div class="copy-btn"><i class="fas fa-copy"></i> Copy</div>
    </div>
    <script src="script.js"></script>

</body>

</html>

Copy Clipboard CSS Code

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

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

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0486c2;
}

.text-box{
  position: relative;
  background: #fff;
  width: 650px;
  margin: 10px;
  padding: 0 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgb(1 1 1 / 10%);
}

.text-box .top-area{
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.text-box .top-area h2{
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}

.copy-btn{
  background: orange;
  color: #99;
  font-size: 1.2em;
  width: 112px;
  height: 42px;
  margin-left: 44%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}

.copy-btn:hover{
  color: #222;
}
.copy-btn i{
	margin-right: 5px;
}
.text-box textarea{
  width: 100%;
  min-height: 300px;
  font-size: 1em;
  padding: 10px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 1px solid #009FEF;
}

Copy Clipboard JavaScript Code

				
					 const copyBtn = document.querySelector(".copy-btn");
    const textarea = document.querySelector("textarea");

    copyBtn.addEventListener("click", () => {
      textarea.select();
      document.execCommand("copy");
      copyBtn.innerHTML = "<i class='fas fa-check'></i>";
      copyBtn.style.background = "#2DCDA7";
      copyBtn.style.color = "#fff";

      setTimeout(() => {
        document.getSelection().removeAllRanges();
        copyBtn.innerHTML = "<i class='fas fa-copy'></i>";
        copyBtn.style.background = "";
        copyBtn.style.color = "";
      }, 5000);
    });

See the Pen Untitled by Developergtm (@developergtm) on CodePen.

Text Copy to Clipboard With Javascript (Free Code)

Table of Contents