Commenting

views/studentDashboard.ejs

@@ -1,3 +1,4 @@
+<!-- Simple Syling for layout -->
 <style>
   #myProgress {
     position: relative;
@@ -26,27 +27,43 @@
     border-radius: 50px;
   }
 </style>
+
+<!-- Welcome message & Profile Picture/Progress bar -->
 <h1 class="mt-4">Student Dashboard</h1>
 <p class="lead mb-3">Welcome <%= user.name %></p>
+<div>
+  <div id="myProgress">
+    <div id="myBar"></div>
+    <img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
+                     <%=user.image.data.toString('base64')%>'>
+  </div>
+  <p stlye='text-align: right;' id='percent'></p>
+</div>
 <br>
+
+<!-- User Data -->
 <div>
   <h1 id='userRank'></h1>
   <h1>XP: <%= user.xp %></h1>
   <p id='XP-Till'></p>
 </div>
 <br>
-<div>
-</div>
-<div>
-  <p stlye='text-align: right;' id='percent'></p>
-  <div id="myProgress">
-    <div id="myBar"></div>
-    <img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
-                     <%=user.image.data.toString('base64')%>'>
-  </div>
-</div>
 <br>
+
+<!-- Action Buttons -->
 <a href="/users/logout" class="btn btn-secondary">Logout</a>
+<button onClick='passData()' class='btn btn-secondary'>Edit</button>
+
+<!-- Passing user _id to edit page script -->
+<script>
+  function passData() {
+    let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
+
+    document.location.href = url;
+  }
+</script>
+
+<!-- Calculate Rank Data Script -->
 <script>
   let xp = <%= user.xp %>;
   let currRank;
@@ -101,12 +118,14 @@
       }
     }
   } else {
+    // Display data for max level
+    document.getElementById('percent').innerHTML = '800|800';
     currRank = "Master Digital Crafter";
     remain = 0;
     rankUp = 'No higher Rank, Good Job!';
   }
 
-  //Show Data
+  // Display Data
   document.getElementById('userRank').innerHTML = currRank;
   document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;