Change showError to showMsg

index.html

@@ -4,6 +4,9 @@
     <title>Active Github Forks</title>
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
     <style>
         body {
             padding-top: 2rem;

js/main.js

@@ -10,7 +10,7 @@ function fetchData() {
     if (re.test(repo)) {
         fetchAndShow(repo)
     } else {
-        showError('Invalid github repo given. Format is <username>/<repo>')
+        showMsg('Invalid GitHub repository! Format is &lt;username&gt;/&lt;repo&gt;', 'danger')
     }
 }
 
@@ -24,17 +24,28 @@ function fetchAndShow(repo) {
         })
 }
 
-function showError(msg) {
-    document.getElementById('data-body').innerHTML = `<div class="alert alert-danger">${msg}</div>`
+function showMsg(msg, type) {
+    let alert_type = 'alert-info'
+    if (type === 'danger') {
+      alert_type = 'alert-danger'
+    }
+    document.getElementById('data-body').innerHTML = `
+        <div class="alert ${alert_type} alert-dismissible fade show" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            ${msg}
+        </div>
+    `
 }
 
 function showData(data) {
     if (!Array.isArray(data)) {
-        showError('Github Repo does not exist')
+        showMsg('GitHub repository does not exist', 'danger')
         return
     }
     if (data.length === 0) {
-        document.getElementById('data-body').innerHTML = `<div class="alert alert-info">No forks exist</div>`
+        showMsg('No forks exist!')
         return
     }
     const thead = '<thead><tr><th>Repository</th><th>Stargazers</th><th>Forks</th><th>Last Update</th></tr></thead>'