show alert box when occur error

Author: zlargon

index.html

@@ -33,6 +33,8 @@ <h2>Gist HTML Preview</h2>
       </div>
       <button id="submit" class="btn btn-primary">Submit</button>
     </div>
+    <br/>
+    <div id="alert-box"></div>
   </div>
 
   <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

main.js

@@ -1,4 +1,12 @@
 (function () {
+  function showError (message) {
+    document.getElementById('alert-box').innerHTML
+      += '<div class="alert alert-danger">'
+      +    '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>'
+      +    message
+      +  '</div>';
+  }
+
   document.getElementById('submit').onclick = function () {
     location.search = document.getElementById('gist_id').value + '/'
                     + document.getElementById('file_name').value;
@@ -20,35 +28,35 @@
   document.getElementById('file_name').value = fileName;
 
   // 4-1. check gist id
-  if (/^[0-9a-f]*$/g.test(gistId) === false) {
-    console.error('Gist Id ' + gistId + ' is invalid')
+  if (gistId.length === 0 || /^[0-9a-f]*$/g.test(gistId) === false) {
+    showError('Gist Id <strong>' + gistId + '</strong> is invalid')
     return;
   }
 
   // 4-2. check file name
   if (typeof fileName !== 'string' || fileName.length === 0) {
-    console.error('File Name ' + fileName + ' is invalid');
+    showError('File Name <strong>' + fileName + '</strong> is invalid');
     return;
   }
 
   // 5. fetch data
   fetch('https://api.github.com/gists/' + gistId)
   .then(function (res) {
     if (res.status !== 200) {
-      throw new Error('Gist Id ' + gistId + ' is not exist');
+      throw new Error('Gist Id <strong>' + gistId + '</strong> is not exist');
     }
     return res.json();
   })
   .then(function (info) {
     if (info.files.hasOwnProperty(fileName) === false) {
-      throw new Error('File ' + fileName + ' is not exist');
+      throw new Error('File <strong>' + fileName + '</strong> is not exist');
     }
 
     // 6. write data
     var content = info.files[fileName].content;
     document.write(content);
   })
   .catch(function (err) {
-    console.error(err);
+    showError(err.message);
   });
 })();