How can I improve the aesthetics of my 'Copy to Clipboard' code?

[JackTorch]

Hello everyone, 

I hope someone can help (for free). 

I'm trying to add a beautiful "Copy to Clipboard" effect on my website and I'm having some challenges.

Problem 1
The content being copied is different from the "Discount Code" I want to copy.

Problem 2

It doesn't look good or is plain looking. 

Here's the code I have (this code is not mine) I think it was from W3Schools or another blog. (Sorry!)

<style><!--
#textbox {
width: 65vw;
height: 25vh;
}
button {
width: 65px;
height: 35px;
background-color: red;
color: grey;
border-radius: 9px;
box-shadow: black;
}
#clipboard {
width: 65vw;
margin: 45px;
background-color: blue;
color: purple;
padding: 15px;
font-size: x-large;
}
--></style>
<center>
<textarea id="”text”"> </textarea> <br> <button onclick="”copyText()”"> Copy Here </button> <br>
<h1>Your Copied Text:</h1>
<br> <span id="”clipboard”"> The content is included here. </span>
</center><script>
function copyText() {
/* Select text area by the id value. */
var Text = document.getElementById(“text”);
/* Select the content inside text area. */
Text.select();
/* Copy the selected content into the clipboard. */
navigator.clipboard.writeText(Text.value);
/* Set the copied content as text for the HTML div with id clipboard. */
document.getElementById(“clipboard”)
.innerHTML = Text.value;
}
</script>

The result of the code looks like this:

 
And here's what I want it to look like or something close to this layout:

After clicking the button, it changes to this:

I tried using different CSS preview extensions but I can't replicate this or improve the code I am currently using. Please help. Thank you.

[PinkalShihora]

Hi @JackTorch 

See the below code, That may help you

<style>
    .new-ring-size-converter-right{transition: 3s;max-width: 470px;margin: 0 auto;background-color: #000815;box-shadow: 0px 24px 80px rgb(0 0 0 / 18%), 0px 20px 41.9262px rgb(0 0 0 / 9%), 0px 12px 17.2619px rgb(0 0 0 / 8%), 0px 2px 3.30522px rgb(0 0 0 / 8%);border-radius: 8px;padding: 30px 0;}
    .new-ring-size-converter-right-top{display: flex;align-items: center;justify-content: space-between;background-color: #BCE9FE;padding: 20px 30px;}
    .new-ring-size-converter-right-top p{font-size: 16px;font-family: AngleciaProDisplay;margin-bottom: 8px;color: #000815;}
    .new-ring-size-converter-right-top h3{font-size: 41px;font-family: AngleciaProDisplay;margin-bottom: 0px;color: #000815;}
    .copy-clipboard{display: flex;align-items: center;justify-content: center;margin-top: 20px;}
    .copy-clipboard p{background-color: #fff;color: #000815 !important;border-radius: 50px;padding: 0 30px;height: 40px;line-height: 40px;}
    .copy-notification {
    color: #ffffff;
    background-color: #00254e;
    padding: 16px;
    border-radius: 50px;
    position: fixed;
    top: 50%;
    left: 50%;
    width: fit-content;
    margin-top: -30px;
    margin-left: -85px;
    display: none;
    text-align:center;
    }
</style>
<div class="copy-clipboard">
    <p>COPY</p><span>SPRINGSALE2022</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    jQuery(document).ready(function () {
        jQuery(".copy-clipboard p").click(function (event) {
            event.preventDefault();
            var texts = jQuery(".copy-clipboard span").text();
            CopyToClipboard(texts, true, "Copied to Clipboard");
        });
    });

    function CopyToClipboard(value, showNotification, notificationText) {
        var $temp = jQuery("<input>");
        jQuery("body").append($temp);
        $temp.val(value).select();
        document.execCommand("copy");
        $temp.remove();

        if (typeof showNotification === 'undefined') {
            showNotification = true;
        }
        if (typeof notificationText === 'undefined') {
            notificationText = "Copied to clipboard";
        }

        var notificationTag = jQuery("div.copy-notification");
        if (showNotification && notificationTag.length == 0) {
            notificationTag = jQuery("<div/>", { "class": "copy-notification", text: notificationText });
            jQuery("body").append(notificationTag);

            notificationTag.fadeIn("slow", function () {
                setTimeout(function () {
                    notificationTag.fadeOut("slow", function () {
                    notificationTag.remove();
                    });
                }, 1000);
            });
        }
    }
</script>

Kindly check and let me know.

Thanks!

[JackTorch]

Thanks for helping out @PinkalShihora. Your code works but I find it difficult to add a box. 

For reference, here's the flow of the site where I got the inspiration from:
1. You click on the button
2. A different text gets copied to your clipboard (the real discount code)
And the text in the box doesn't get copied

I actually found the blog where I got the code in question. Here's the link. I played with it and came up with the code below.

<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;}
.soft-text{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;}
.soft-text .text-box{
  height: auto;
  max-width: auto;
  width: 100%;
  margin: 5px 0;}
.soft-text .text-box .soft{
  font-size: 18px;
  font-weight: 600;
  color: #1ab1e8;
  margin: 4px;}
.soft-text .text-box textarea{
  height: 65px;
  width: 300px;
  padding: 20px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #1ab1e8;
  border-radius: 8px;
  background: #ceccf0;}
.text-box textarea::-webkit-scrollbar{
  display: none;}
.soft-text .text-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #000000;
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;}
.soft-text .text-box button:hover{
  background: #ff0000;}
@media (max-width: 400px) {
  .soft-text .text-box button{
    width: 100%;  }}
#HTMLButton {
 left: 11.62px;
 position: relative;
 top: 100%;
 width: 200px;
}
--></style>
<div class="soft-text" style="text-align: center;">
<div class="text-box HTML">
<div class="soft"></div>
<textarea readonly="readonly" id="HTML">Buy 1 Pair Get 1 Free Code: BOGO</textarea> <button id="HTMLButton">COPY TO CLIPBOARD </button></div>
</div>
<div style="text-align: center;"><script>
// HTML BOx JS Code
  let HTML = document.getElementById("HTML");
  let HTMLButton = document.getElementById("HTMLButton");

  HTMLButton.onclick = function() {
    HTML.select();
  document.execCommand("copy");
  HTMLButton.innerText = "Groovy! The code was copied to your clipboard!"
}
</script></div>

[JackTorch]

I found the function that I'm looking for. Maybe you or someone can help style it? 

The function of the code below is exactly what I'm looking to do but without the style. It copies any text to the clipboard that isn’t visible with HTML.

<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;}
.soft-text{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;}
.soft-text .text-box{
  height: auto;
  max-width: auto;
  width: 100%;
  margin: 5px 0;}
.soft-text .text-box .soft{
  font-size: 18px;
  font-weight: 600;
  color: #1ab1e8;
  margin: 4px;}
.soft-text .text-box textarea{
  height: 65px;
  width: 300px;
  padding: 20px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #1ab1e8;
  border-radius: 8px;
  background: #ceccf0;}
.text-box textarea::-webkit-scrollbar{
  display: none;}
.soft-text .text-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #0f06bd;
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;}
.soft-text .text-box button:hover{
  background: #0e4bf1;}
@media (max-width: 400px) {
  .soft-text .text-box button{
    width: 100%;  }}
#HTMLButton {
 left: 11.62px;
 position: relative;
 top: 100%;
 width: 200px;
}
</style>
Buy 1 Pair Get 1 Free Code: BOGO
<p><button onclick="AdvancedCopy()">COPY TO CLIPBOARD</button></p>
<script>
function AdvancedCopy(){
     //the text that is to be copied to the clipboard
     var theText = 'BOGO';
 
     //create our hidden div element
     var hiddenCopy = document.createElement('div');
     //set the innerHTML of the div
     hiddenCopy.innerHTML = theText;
     //set the position to be absolute and off the screen
     hiddenCopy.style.position = 'absolute';
     hiddenCopy.style.left = '-9999px';
 
     //check and see if the user had a text selection range
     var currentRange;
     if(document.getSelection().rangeCount > 0)
     {
          //the user has a text selection range, store it
          currentRange = document.getSelection().getRangeAt(0);
          //remove the current selection
          window.getSelection().removeRange(currentRange);
     }
     else
     {
          //they didn't have anything selected
          currentRange = false;
     }
 
     //append the div to the body
     document.body.appendChild(hiddenCopy);
     //create a selection range
     var CopyRange = document.createRange();
     //set the copy range to be the hidden div
     CopyRange.selectNode(hiddenCopy);
     //add the copy range
     window.getSelection().addRange(CopyRange);
 
     //since not all browsers support this, use a try block
     try
     {
          //copy the text
          document.execCommand('copy');
     }
     catch(err)
     {
          window.alert("Your Browser Doesn't support this! Error : " + err);
     }
     //remove the selection range (Chrome throws a warning if we don't.)
     window.getSelection().removeRange(CopyRange);
     //remove the hidden div
     document.body.removeChild(hiddenCopy);
 
     //return the old selection range
     if(currentRange)
     {
          window.getSelection().addRange(currentRange);
     }
}
</script>

[PinkalShihora]

Okay. Now you have any issue?

[JackTorch]

No issue but the button doesn't show a confirmation/animation to show that the hidden text was copied successfully. 

The only way for anyone to know if the code is copied is if they try to paste it.

[dhwanibhuwalka]

which is the final code and where do i paste this?