Update script.js

script.js

@@ -1,24 +1,55 @@
-document.getElementById("loginForm").addEventListener("submit", function (e) {
-  e.preventDefault();
-
-  const username = document.getElementById("username").value.trim();
-  const password = document.getElementById("password").value;
-  const message = document.getElementById("message");
-
-  // Basic validation
-  if (!username || !password) {
-    message.style.color = "red";
-    message.textContent = "❌ Please enter both username and password.";
-    return;
-  }
-
-  // Show fake loading message
-  message.style.color = "#333";
-  message.textContent = "🔄 Logging in...";
-
-  // Simulate server delay
-  setTimeout(() => {
-    message.style.color = "green";
-    message.textContent = `✅ Welcome, ${username}!`;
-  }, 1000); // 1 second delay
-});
+// Utility: get users object from localStorage (or empty object)
+function getUsers() {
+  const users = localStorage.getItem("users");
+  return users ? JSON.parse(users) : {};
+}
+
+// Utility: save users object back to localStorage
+function saveUsers(users) {
+  localStorage.setItem("users", JSON.stringify(users));
+}
+
+// Signup Page Logic
+const signupForm = document.getElementById("signupForm");
+if (signupForm) {
+  const signupMessage = document.getElementById("signupMessage");
+
+  signupForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    const username = document.getElementById("newUsername").value.trim();
+    const password = document.getElementById("newPassword").value;
+    const confirmPassword = document.getElementById("confirmPassword").value;
+
+    if (!username || !password || !confirmPassword) {
+      signupMessage.style.color = "red";
+      signupMessage.textContent = "❌ Please fill in all fields.";
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      signupMessage.style.color = "red";
+      signupMessage.textContent = "❌ Passwords do not match.";
+      return;
+    }
+
+    const users = getUsers();
+
+    if (users[username]) {
+      signupMessage.style.color = "red";
+      signupMessage.textContent = "❌ Username already exists.";
+      return;
+    }
+
+    // Save new user
+    users[username] = password;
+    saveUsers(users);
+
+    signupMessage.style.color = "green";
+    signupMessage.textContent = "✅ Account created! Redirecting to login...";
+
+    setTimeout(() => {
+      window.location.href = "index.html";
+    }, 1500);
+  });
+}