Add copy to clipboard button to website

docs/assets/css/style.css

@@ -350,6 +350,37 @@ header {
     header .icons-list img {
       max-width: 100%; }
 
+
+input[type='color'] {
+  width: 1.25em;
+  height: 1.25em;
+  margin-left: 0.5em;
+}
+
+.copyBtn {
+  height: 1.25em;
+  width: 1.25em;
+  margin-left: 0.25em;
+  position: relative;
+  top: 0.5em;
+  border-radius: 20%;
+  padding: 0.25em;
+  box-sizing: content-box;
+  transition: background-color 0.25s;
+}
+
+.copyBtn:hover {
+  cursor: pointer;
+  background-color: #2D804E;
+}
+
+.tooltip {
+  visibility: hidden;
+  background-color: #2D804E;
+  border-radius: 0.25em;
+  padding: 0.25em;
+}
+
 .borders {
   position: fixed;
   top: 0;
@@ -408,10 +439,4 @@ header {
 
 .footer {
   margin-top: 6rem;
-  text-align: center; }
-
-input[type='color'] {
-  width: 1.25em;
-  height: 1.25em;
-  margin-left: 0.5em;
-}
+  text-align: center; }

docs/assets/img/copy.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>copy</title>
+<path fill="#f5f5f5" d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
+</svg>

docs/assets/js/script.js

@@ -95,6 +95,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
 
   /*
   | Change selected icon
+  | param icon: the new icon.
   |--------------------------------
   */
   $scope.selectIcon = function(icon) {
@@ -158,6 +159,49 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
   }
 
   /*---- End of "Change selected svg icon" ----*/
+
+  /**
+   * Copy the text located using `id` into the user's clipboard.
+   * @param {Event} event - a JS Event object.
+   * @param {String} id - id of the element we are copying its text
+   * content from.
+   */
+  $scope.copyToClipboard = function(event, id) {
+    let text = document.getElementById(id).textContent
+    navigator.clipboard.writeText(text)
+      .then(() => {
+        $scope.displayTooltip("Copied", event.target)
+      })
+      .catch(() => {
+        $scope.displayTooltip("Failed to copy", event.target)
+      })
+  }
+
+  /**
+   * Display a tooltip.
+   * @param {String} text - text the tooltip should have.
+   * @param {Element} copyBtn - the copyBtn element, which is an <img>
+   */
+  $scope.displayTooltip = function(text, copyBtn) {
+    let tooltip = copyBtn.parentElement.getElementsByClassName("tooltip")[0]
+    tooltip.textContent = text
+    // reset opacity (for some reason, default opacity is null)
+    tooltip.style.opacity = 1
+    tooltip.style.visibility = "visible"
+
+    // create fade out effect after 2 sec
+    setTimeout(() => {
+      let count = 10
+      let intervalObj
+      intervalObj = setInterval(() => {
+        tooltip.style.opacity -= 0.1
+        if (--count == 0) {
+          clearInterval(intervalObj)
+          tooltip.style.visibility = "hidden"
+        } 
+      }, 50)
+    }, 2000)
+  }
 });
 
 /*================ End of "Devicons controller" ================*/