Losing your coupon code sucks. A copy to the clipboard button would have saved me the hassle of convincing the customer service that I received one.

Our hypothetical case for this chapter is about adding a copy to a clipboard button for users that get a coupon code offered on a webpage.

Business case: Copy to clipboard button

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that users call customer service because they lost their coupon code, we expect that adding a copy to clipboard button will cause an decrease in complaints.”

To test this hypothesis, we’re going to apply the changes below:

Code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var getCopyToClipboardButton = document.querySelector(".clipboard > a");
var getCouponCode = document.querySelector(".couponCode").innerText;

//event listeners
getCopyToClipboardButton.addEventListener("click", function() {
  copyToClipboard(this, getCouponCode);
});

//functions
function copyToClipboard(button, code) {
  var tempInput = document.createElement("input");
  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
  tempInput.value = code;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
  disableButton(button);
}

function disableButton() {
  getCopyToClipboardButton.style.pointerEvents = "none";
  getCopyToClipboardButton.style.cursor = "default";
  getCopyToClipboardButton.style.transition = "1s";
  getCopyToClipboardButton.innerHTML = `COPIED TO CLIPBOARD <i class="fas fa-clipboard-check"></i>`;
  getCopyToClipboardButton.style.backgroundColor = "#549612";
}

Breakdown

//variables

We will start by declaring our variables. Let’s open up a comment with two forwards slashes to indicate this section.

var getCopyToClipboardButton = document.querySelector(".clipboard > a");

In the first line of code, we select the copy the clipboard button using the querySelector method. We are looking for the anchor tag because we want register clicks later on.

We assign this anchor element to the newly declared getCopyToClipboardButton variable.

var getCouponCode = document.querySelector(".couponCode").innerText;

In the second line of code we select the coupon code using the querySelector method. The innerText method makes sure that we get this value as a string. We assign this string to the newly declared getCouponCode variable.

//event listeners

Then we want to declare our eventlisteners. We open up a comment again to indicate the start of this section.

getCopyToClipboardButton.addEventListener("click", function() {

This event listener listens for clicks on the getCopyToClipboardButton anchor. We indicate that we want to listen for clicks by passing down “click” as the first argument.

copyToClipboard(this, getCouponCode);

The second argument is an anonymous function that calls the copyToClipboard function and passes down the event and the coupon code.

});

We close our function, event listener, and end the statement.

//functions

Then we are going to declare our functions that we called earlier. We open up a comment again to start this section.

function copyToClipboard(button, code) {

We start our copyToClipboard function with two arguments that we pass down in our function call. We are going to call the first argument button and second argument code.

var tempInput = document.createElement("input");

The only way to get the coupon code to the clipboard is by selecting and copying it from a text area or input field. The problem is that the coupon code is just a simple div. 

In this line, we create a temporary input element with the createElement method. We assign this temporary element to the newly declared tempInput variable. We are going to use this to copy our code.

tempInput.style = "position: absolute; left: -1000px; top: -1000px";

We can only copy to clipboard from the input field when it exists in the DOM. Since we don’t want to show this to our user we add some CSS to hide it.

tempInput.value = code;

We set the coupon code that we saved earlier as a string to the value of the input field. 

document.body.appendChild(tempInput);

Then we add our hidden input field to the DOM so we can select and copy the value.

tempInput.select();

We select our input field with the .select method.

document.execCommand("copy");

In this line, we copy the selected element. We can now paste the code everywhere we want!

document.body.removeChild(tempInput);

Because we don’t need the element anymore, we remove the element from the DOM with the removeChild method.

disableButton(button);

Here we call a new function called disableButton. We pass down the button that has been passed down when this function was called.

}

Then we close our copy function.

function disableButton() {

This function is created so we can give the user some confirmation of their copied code. We will do this by changing the style of the button.

getCopyToClipboardButton.style.pointerEvents = "none";
getCopyToClipboardButton.style.cursor = "default";

These two lines of code disables the mouse pointer from changing to a hand. Indicating the element is not clickable anymore.

getCopyToClipboardButton.style.transition = "1s";

We can make the transition to the disabled button more smoothly by adding a 1 second delay.

getCopyToClipboardButton.innerHTML = `COPIED TO CLIPBOARD <i class="fas fa-clipboard-check"></i>`;

Here we change the innerHTML of the anchor to give the text confirmation. We also add a different clipboard icon with a check.

getCopyToClipboardButton.style.backgroundColor = "#549612";

We also change the disabled button to green for that extra bit of confirmation.

}

Finally, we close the function.