gulp stuff

bower.json

@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "mui": "^0.9.20",
-    "zepto": "^1.2.0"
+    "zepto": "^1.2.0",
+    "jquery": "^3.2.1"
   }
 }

config.js

@@ -1,7 +1,8 @@
 const config = {};
 
 config.db = {};
-config.webhost = 'http://nurl.co/';
+//config.webhost = 'http://nurl.co/';
+config.webhost = 'http://localhost:7000/';
 config.port = 7000;
 
 config.db.host = 'localhost';

gulpfile.js

@@ -49,7 +49,7 @@ gulp.task('appJS', function() {
 
 gulp.task('vendor', function() {
     return gulp.src([
-                     'bower_components/zepto/zepto.min.js',
+                     'bower_components/jquery/dist/jquery.min.js',
                      'bower_components/mui/packages/cdn/js/mui.min.js'
     ])
         .pipe(concat('vendor.js'))

public/javascripts/shorten.js

@@ -1,39 +1,26 @@
-$('#btn-shorten').on('click', function(){
+function shorten(){
-  $.ajax({
+    $.ajax({
-    url: '/api/v1/shorten',
+        url: '/api/v1/shorten',
-    type: 'POST',
+        type: 'POST',
-    dataType: 'JSON',
+        dataType: 'JSON',
-    data: {url: $('#url-field').val()},
+        data: {url: $('#url-field').val()},
-    success: function(data){
+        success: function(data){
-        const $link = $('#link');
+            console.log('data', data);
-        const resultHTML = `<a class="result" href="${data.shortUrl}">${data.shortUrl}</a>`;
+            const $link = $('#link');
-        $link.html(resultHTML);
+            const resultHTML = `<a class="result" href="${data.shortUrl}">${data.shortUrl}</a>`;
-        // $link.hide().fadeIn('slow');
+            $link.html(resultHTML);
-        $link.hide().show();
+            $link.hide().fadeIn('slow');
-    }
-  });
 
+        }
+      });
+}
+
+$("#url-field").keyup(function(event){
+    if(event.keyCode === 13){
+        $("#btn-shorten").click();
+    }
 });
 
-(function($) {
+$('#btn-shorten').on('click', function(){
-    $.extend($.fn, {
+    shorten();
-        fadeIn: function(ms) {
+});
-            if(typeof(ms) === 'undefined') ms = 500;
-
-            $(this).css({ display: 'block', opacity: 0 }).animate({ opacity: 1 }, ms);
-
-            return this;
-        },
-
-        fadeOut: function(ms)
-        {
-            if(typeof(ms) === 'undefined') ms = 500;
-
-            $(this).css({ opacity: 1 }).animate({ opacity: 0 }, ms, 'linear', function() {
-                $(this).css('display', 'none');
-            });
-
-            return this;
-        }
-    });
-})(Zepto);

views/index.html

@@ -18,12 +18,10 @@
   <div class="mui--text-display3">nURL</div>
   <div class="mui--text-subhead">nurl.co</div>
   <div class="mui-panel">
-    <form class="mui-form--inline">
       <div class="mui-textfield">
-        <input type="text" id="url-field" placeholder="Paste a link...">
+        <input id="url-field" placeholder="Paste a link...">
       </div>
       <button class="mui-btn mui-btn--raised mui-btn--accent" id="btn-shorten" type="button">SHORTEN</button>
-    </form>
     <div class="mui-row">
       <div class="mui-col-lg-12" id="link"></div>
     </div>
@@ -32,7 +30,7 @@
 
   <!--<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>-->
 <!-- build:vendor -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.js"></script>
+<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <!-- endbuild -->