creating a popup page inside it

Author: alwaysprince05e

profile.js

@@ -1,6 +1,12 @@
 const profileUsername = document.getElementById("profilename");
 const profileEmail = document.getElementById("profileEmail");
 const editProfileButton = document.getElementById("editProfileButton");
+const popup = document.getElementById("popup");
+const overlay = document.getElementById("overlay");
+const saveButton = document.getElementById("saveButton");
+const cancelButton = document.getElementById("cancelButton");
+const newNameInput = document.getElementById("newName");
+const newEmailInput = document.getElementById("newEmail");
 const loggedinUser = JSON.parse(localStorage.getItem("loggedinUser"));
 
 if (!loggedinUser) {
@@ -11,17 +17,38 @@ if (!loggedinUser) {
 }
 
 editProfileButton.addEventListener("click", () => {
-    const newName = prompt("Enter your new Name:", loggedinUser.name);
-    const newEmail = prompt("Enter your new email:", loggedinUser.email);
+    newNameInput.value = loggedinUser.name;
+    newEmailInput.value = loggedinUser.email;
+    popup.classList.add("active");
+    overlay.classList.add("active");
+});
+
+cancelButton.addEventListener("click", () => {
+    popup.classList.remove("active");
+    overlay.classList.remove("active");
+});
+
+saveButton.addEventListener("click", () => {
+    const newName = newNameInput.value.trim();
+    const newEmail = newEmailInput.value.trim();
 
     if (newName && newEmail) {
         loggedinUser.name = newName;
         loggedinUser.email = newEmail;
         localStorage.setItem("loggedinUser", JSON.stringify(loggedinUser));
 
+        profileUsername.textContent = `Name: ${loggedinUser.name}`;
+        profileEmail.textContent = `Email: ${loggedinUser.email}`;
+
         alert("Profile updated successfully!");
-        window.location.href = "landing.html"; 
+        popup.classList.remove("active");
+        overlay.classList.remove("active");
     } else {
         alert("Please fill in all fields.");
     }
 });
+
+overlay.addEventListener("click", () => {
+    popup.classList.remove("active");
+    overlay.classList.remove("active");
+});