Added copy to clipboard functionality

Author: utkarshgpta

public/javascripts/shorten.js

@@ -1,3 +1,9 @@
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip();   
+});
+
+$('#clipboardTooltip').tooltip({placement: 'bottom',trigger: 'manual'});
+
 $('#short').submit(function(event){
 	var urlText = $('#urlField').val();
 	var config = {
@@ -8,8 +14,23 @@ $('#short').submit(function(event){
     .then(function (response) {
     	var shortUrl = response.data;
     	$('#shortUrl').text(shortUrl);
+      $('#clipboardTooltip').tooltip('hide')
+      .attr('data-original-title', 'Copy to Clipboard')
+      .tooltip('show');
     })
     .catch(function (error) {
     	console.log(error);
     });
 });
+
+function clipboardCopy() {
+  var copyText = document.getElementById("shortUrl").innerText; 
+  var $temp = $("<input>");
+  $("body").append($temp);
+  $temp.val(copyText).select();
+  document.execCommand("copy");
+  $temp.remove();
+  $('#clipboardTooltip').tooltip('hide')
+      .attr('data-original-title', 'Link Copied!')
+      .tooltip('show');
+}

views/index.html

@@ -31,7 +31,7 @@ <h5>SlashURL</h5>
                 <button type="submit" class="btn btn-primary">Shorten It!</button>
               </form>
               <br>
-              <i><span id="shortUrl"></span></i>  
+              <i id="clipboardTooltip" rel="tooltip" data-original-title="Copy to Clipboard"><span onclick="clipboardCopy()" id="shortUrl"></span></i>
             </div>
         </div>
       </div>