final

public/index.html

@@ -45,16 +45,24 @@
 </form>
 
 <!-- Manage Users -->
-    <h3>Manage Users</h3>
+    <h3>Delete Users</h3>
       <select id="userDropdown" onchange="selectUserAction(this.value)">
       <option value="">-- Select a user --</option>
       </select>
-  <!-- edit words -->
+ <!-- Edit words -->
 <h3>Edit Word List for:</h3>
-     <select id="wordUserSelect" onchange="loadWordsForSelectedUser()">
+<select id="wordUserSelect" class="word-user-dropdown" onchange="loadWordsForSelectedUser()">
   <option value="">-- Select a user --</option>
 </select>
 
+ <!-- View Word List by User -->
+<h3>📋 View Word List by User:</h3>
+<select id="viewUserSelect" class="word-user-dropdown" onchange="displayWordListForSelectedUser()">
+  <option value="">-- Select a user --</option>
+</select>
+
+<ul id="userWordListDisplay"></ul>
+
  <!-- Theme -->
 <div style="margin: 1em 0;">
   <label for="themeSelect"><strong>Select Theme:</strong></label><br/>

public/script.js

@@ -126,8 +126,14 @@ async function showAdmin() {
   document.getElementById('adminPanel').classList.remove('hidden')
   document.getElementById('studentPanel').classList.add('hidden')
 
+  try {
     await loadWords()
     displayWordList()
+  } catch (err) {
+    console.error("🚨 Failed to load words:", err)
+    // Optional: fallback or placeholder UI
+  }
+
   await loadUsers()
   displayUserDropdown()
   populateWordUserDropdown()
@@ -373,10 +379,21 @@ async function clearWords() {
   alert("🗑 Word list cleared")
 }
 function populateWordUserDropdown() {
-  const dropdown = document.getElementById("wordUserSelect")
-  dropdown.innerHTML = `<option value="">-- Select a user --</option>`
+  const userSelects = document.querySelectorAll(".word-user-dropdown")
+
+  if (!users || !users.length) {
+    console.warn("⚠️ No users to populate dropdowns.")
+    return
+  }
+
+  userSelects.forEach(select => {
+    select.innerHTML = '<option value="">-- Select a user --</option>'
     users.forEach(user => {
-    dropdown.innerHTML += `<option value="${user.username}">${user.username}</option>`
+      const option = document.createElement("option")
+      option.value = user.username
+      option.textContent = user.username
+      select.appendChild(option)
+    })
   })
 }
 async function loadWordsForSelectedUser() {
@@ -396,3 +413,30 @@ function showToast(message, duration = 3000) {
     toast.classList.remove("show")
   }, duration)
 }
+async function displayWordListForSelectedUser() {
+  const select = document.getElementById("viewUserSelect")
+  const username = select.value
+  const list = document.getElementById("userWordListDisplay")
+  list.innerHTML = ''
+
+  if (!username) return
+
+  try {
+    const res = await fetch(`/getWordList?user=${username}`)
+    const words = await res.json()
+
+    if (!words.length) {
+      list.innerHTML = "<li><em>No words found for this user.</em></li>"
+      return
+    }
+
+    words.forEach(word => {
+      const li = document.createElement("li")
+      li.textContent = word
+      list.appendChild(li)
+    })
+  } catch (err) {
+    list.innerHTML = `<li style="color:red">❌ Error loading words: ${err.message}</li>`
+    console.error("Failed to load word list for user:", username, err)
+  }
+}

public/users.json

@@ -8,10 +8,5 @@
     "username": "student1",
     "hash": "8d969eef6ecad3c29a3a629280e686cf",
     "role": "student"
-  },
-  {
-    "username": "nate",
-    "hash": "5a2a558c78d3717db731600c4f354fa1d9c84b556f108091a891f444f1bdec40",
-    "role": "student"
   }
 ]

public/wordlist.json

@@ -1,4 +0,0 @@
-{
-  "student1": ["apple", "banana", "cherry"],
-  "student2": ["dog", "cat", "fish"]
-}

public/wordlists.json

@@ -0,0 +1,3 @@
+{
+  "student1": ["apple", "banana", "cherry"]
+}