Copy Button

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="text-boxes">
    <div class="text-box HTMLBox">
      <div class="topic">HTML Code:</div>
      <textarea id="HTMLBox" readonly >
        Add HTML Code Here
      </textarea>
      <button id="HTMLButton">Copy Here</button>
    </div>
    <div class="text-box CSSBox">
      <div class="topic">CSS Code:</div>
      <textarea id="CSSBox" readonly >
        Add CSS codes Here
      </textarea>
      <button id="CSSButton">Copy Here</button>
    </div>
    <div class="text-box JSBox">
      <div class="topic">JavaScript Code:</div>
      <textarea id="JSBox" readonly >
        Add JavaScript Code here
      </textarea>
      <button id="JSButton">Copy Here</button>
    </div>
  </div>

HTMLButton.onclick = function() {
      HTMLBox.select();
      document.execCommand("copy");
      HTMLButton.innerText = "Codes Copied"
    }

// CSS Box Js Code
      let CSSBox = document.getElementById("CSSBox");
      let CSSButton = document.getElementById("CSSButton");

CSSButton.onclick = function() {
        CSSBox.select();
        document.execCommand("copy");
        CSSButton.innerText = "Codes Copied"
      }
    // JavaScript BOx JS Code
      let JSBox = document.getElementById("JSBox");
      let JSButton = document.getElementById("JSButton");

JSButton.onclick = function() {
        JSBox.select();
        document.execCommand("copy");
        JSButton.innerText = "Codes Copied"
      }
  </script>
<style>

/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #fdfcfc;
}
.text-boxes{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: left;
  padding: 0 5px;
  margin-bottom: 60px;
}
.text-boxes .text-box{
  height: 380px;
  max-width: 780px;
  width: 100%;
  margin: 55px 0;
}
.text-boxes .text-box .topic{
  font-size: 18px;
  font-weight: 600;
  color: #265df2;
  margin: 4px;
}
.text-boxes .text-box textarea{
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #0563FF;
  border-radius: 8px;
}
.text-box textarea::-webkit-scrollbar{
  display: none;
}
.text-boxes .text-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #265df2;
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.text-boxes .text-box button:hover{
  background: #0e4bf1;
}
@media (max-width: 400px) {
  .text-boxes .text-box button{
    width: 100%;
  }
}

/* ///// */

</style>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Copy Button