Merge pull request #45 from shubhamsharma9199/main

Reslove the merge conflict
abhrajit2004 · Oct 19, 2024 · 2b2e93a · 2b2e93a
2 parents ee37423 + d31f864
commit 2b2e93a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 57 deletions.
diff --git a/profile.html b/profile.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>User Profile Page</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body class="light-mode"> 
-
+    <link rel="stylesheet" href="styles.css" />
+    <script src="profile.js" defer></script>
+  </head>
+  <body class="light-mode">
     <nav class="navbar">
         <ul>
             <li><a href="index.html" class="home-btn">Home</a></li>
@@ -16,6 +16,7 @@
             </li>
         </ul>
     </nav>
+
     <div class="profile-container">
         <h1>User Profile</h1>
         <div class="profile-card">
@@ -30,23 +31,28 @@ <h1>User Profile</h1>
                     <input type="file" id="profilePicInput" accept="image/*" onchange="loadProfileImage(event)" style="display:none;">
                 </div>
 
-                <div class="form-group">
-                    <label for="name">Name:</label>
-                    <input type="text" id="name" value="Abhrajit Gupta">
-                </div>
-                <div class="form-group">
-                    <label for="email">Email:</label>
-                    <input type="email" id="email" value="john.@abhrajit_gupta.com">
-                </div>
-                <div class="form-group">
-                    <label for="bio">Bio:</label>
-                    <textarea id="bio" rows="4">I am a web developer who loves to build amazing websites.</textarea>
-                </div>
-                <button type="submit" class="update-btn">Update Profile</button>
-            </form>
-        </div>
+          <div class="form-group">
+            <label for="name">Name:</label>
+            <input type="text" id="name" value="Abhrajit Gupta" />
+          </div>
+          <div class="form-group">
+            <label for="email">Email:</label>
+            <input type="email" id="email" value="abhrajit@example.com" />
+          </div>
+          <div class="form-group">
+            <label for="bio">Bio:</label>
+            <textarea id="bio" rows="4">
+I am a web developer who loves to build amazing websites.</textarea
+            >
+          </div>
+          <button type="submit" class="update-btn">Update Profile</button>
+          <p id="updateSuccessMessage" style="display: none">
+            Profile updated successfully!
+          </p>
+        </form>
+      </div>
     </div>
 
     <script src="profile.js"></script>
-</body>
+  </body>
 </html>
diff --git a/profile.js b/profile.js
@@ -1,41 +1,30 @@
+// Toggle between light and dark mode
+const themeToggleBtn = document.getElementById('themeToggle');
+const body = document.body;
 
-function loadProfileImage(event) {
-    const profileImage = document.getElementById('profileImage');
-    const file = event.target.files[0];
-
-    if (file) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            profileImage.src = e.target.result; 
-        };
-        reader.readAsDataURL(file); 
+themeToggleBtn.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    if (body.classList.contains('dark-mode')) {
+        themeToggleBtn.textContent = '☀️ Light Mode';
+    } else {
+        themeToggleBtn.textContent = '🌙 Dark Mode';
     }
-}
-
-document.getElementById('profileForm').addEventListener('submit', function(event) {
-    event.preventDefault();
-    const name = document.getElementById('name').value;
-    const email = document.getElementById('email').value;
-    const bio = document.getElementById('bio').value;
-    console.log("Profile Updated:", { name, email, bio });
-    alert("Profile updated successfully!");
 });
 
-// DARK MODE
-const themeToggleButton = document.getElementById("themeToggle");
-const body = document.body;
-if (localStorage.getItem("theme") === "dark") {
-    body.classList.add("dark-mode");
-    themeToggleButton.textContent = "☀️ ";
+// Profile image upload preview.
+function loadProfileImage(event) {
+    const profileImage = document.getElementById('profileImage');
+    profileImage.src = URL.createObjectURL(event.target.files[0]);
 }
-themeToggleButton.addEventListener("click", () => {
-    body.classList.toggle("dark-mode");
 
-    if (body.classList.contains("dark-mode")) {
-        themeToggleButton.textContent = "☀️";
-        localStorage.setItem("theme", "dark"); 
-    } else {
-        themeToggleButton.textContent = "🌙";
-        localStorage.setItem("theme", "light"); 
-    }
+// Profile form submission with feedback.
+const profileForm = document.getElementById('profileForm');
+const updateSuccessMessage = document.getElementById('updateSuccessMessage');
+
+profileForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    updateSuccessMessage.style.display = 'block';
+    setTimeout(() => {
+        updateSuccessMessage.style.display = 'none';
+    }, 3000);
 });