Improved HCI

public/imgurr.css

@@ -0,0 +1,15 @@
+html, body { margin: 0; padding: 0; height: 100%; }
+#container, #image {
+  margin: 0; padding: 0;
+  max-height: 100%;
+}
+#container { text-align: center; }
+#loading { 
+  background: rgba(255, 0, 0, 0.8); 
+  display: none; 
+  position: absolute;
+  top: 50px;
+  left: 30px;
+  padding: 10px;
+  color: #EFEFEF;
+}

views/imgur/imgurr.jade

@@ -3,13 +3,17 @@ html(lang='en')
   head 
     meta(charset='utf-8')
     script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
+    link(rel="stylesheet", href="/imgurr.css")
     title random imgur
     script
       function wat() {
+        $('#loading').show();
+        $('#image').load(function(){$('#loading').hide(); console.log('loaded')});
         $.get("/api/imgur/getRandomImage", function(d) {$('#image').attr('src', d.data[0])}, "json");
       };
       $(wat());
-      $(document).keypress(wat);
+      $(document).on('keydown', function(e){(e.which==32)&&(wat()) });
   body
+    div#loading Loading Image
     div#container
-      img#image(style='width: 100%')
+      img#image