Click and Copy to Clipboard (referral/invite links)

click-and-copy-to-clipboard-referral-invite-links.markdown

Click and Copy to Clipboard (referral/invite links)

Click and copy to clipboard with JavaScript using the execCommand API. This is based off the sweet and simple clipboard.js implementation.

Style based off of Acorn's beautiful aesthetic and their referral page.

execCommand API docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

A Pen by JxMxJu on CodePen.

License.

index.html

<div class="wrapper">
  <div class="content u-flexCenter u-sizeViewHeightMin100">
    <div class="shareUrl u-verticalGrid u-marginAuto u-size1040">
      <header class="shareUrl-header">
        <h1 class="shareUrl-headerText">Click to Copy Invite Link</h1>
        <p class="shareUrl-headerSubtext">Share to your favorite friend.</p>
      </header>
      <div class="shareUrl-body">
        <div class="container">
          <!-- COPY INPUT -->
          <input class="shareUrl-input js-shareUrl" type="text" readonly="readonly" />
          <p class="shareUrl-subtext">Click above to copy the link.</p>
        </div>
      </div>
      <footer class="shareUrl-footer">
        <p>Works in Chrome, Firefox, IE9, Opera.</p>
      </footer>
    </div>
  </div>
</div>

script.js

(function() {
    
    // Create reusable copy fn
    function copy(element) {
        
        return function() {
          document.execCommand('copy', false, element.select());
        }
    }
    
    // Grab shareUrl element
    var shareUrl = document.querySelector('.js-shareUrl');

    // Create new instance of copy, passing in shareUrl element
    var copyShareUrl = copy(shareUrl);
    
    // Set value via markup or JS
    shareUrl.value = "codepen.io/nicknish";
  
    // Click listener with copyShareUrl handler
    shareUrl.addEventListener('click', copyShareUrl, false);
  
}());

style.scss

// Only necessary change from a UX perspective
.shareUrl-input {
  cursor: pointer;
}

/* Stylistic Changes
=================== */
// fonts
$font-sans: -apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
$font-code: Menlo, Monaco, "Courier New", Courier, monospace;
// colors
$background: linear-gradient(to bottom right, RGBA(8,81,119,1), RGBA(118,199,196,1)), rgba(8,81,119,1);
$highlight-color: rgba(116,201,71,.8);
$transparent: rgba(0,0,0,0);
$white: #fff;
$body-color: #fff;

html {
  height: 100%;
  box-sizing: border-box;

  *, *:before, *:after {
    box-sizing: inherit;
  }
}
body,
.wrapper,
.content {
  min-height: 100vh;
}
body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: $font-sans;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  background: $background;
  color: $body-color;
    
  ::selection {
    background: $highlight-color;
    color: $white;
  }
}
.wrapper {
  background: $background;
}
p {
  line-height: 1.3;
}

// Share URL Component
.shareUrl {
  width: 100%;
  padding: 40px 20px;
  text-align: center;
}
.shareUrl-header {
  margin-bottom: 40px;
}
.shareUrl-headerText {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 22px;
}
.shareUrl-subtext {
  margin-top: 10px;
  font-size: 14px;
}
.shareUrl-body {
  margin-bottom: 70px;
}
.shareUrl-input {
  width: 100%;
  padding: 10px 0;
  border: 2px solid rgba(0,0,0,.09);
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: rgba(255,255,255,0.9);
  background: $transparent;
  border-radius: 3px;
  transition: all 300ms ease;

  &:hover,
  &:focus,
  &:active {
    border-color: rgba(0,0,0,.3);
    background: rgba(255,255,255,.1);
  }
}

// Media Queries
@media (min-width: 568px) {
  .shareUrl {
    padding: 70px 20px;
  }
  .shareUrl-input {
    max-width: 100%;
    font-size: 56px;
  }
  .shareUrl-headerText {
    font-size: 32px;
  }
}

// Helpers
.u-verticalGrid {
  display: flex;
  flex-flow: column wrap;
}
.u-flexCenter {
  display: flex;
  align-items: center !important;
}
.u-flexCenterHorizontal {
  display: flex;
  justify-content: center !important;
}
.u-sizeViewHeightMin100 {
  min-height: 100vh !important;
}
.u-size1040 {
  max-width: 1040px;
}
.u-marginAuto {
  margin: 0 auto;
}

https://codepen.io/redroad/pen/RwamjXG