Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Email and Additional Profile Info Fields #358

Merged
merged 3 commits into from
Jul 7, 2024
Merged

Add Email and Additional Profile Info Fields #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f70fceb
Update edit-profile.html
Swapnilden Jul 6, 2024
9d9f514
Update edit-profile.html
Swapnilden Jul 6, 2024
69a8676
Update profile.js
Swapnilden Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 39 additions & 107 deletions edit-profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Profile Dropdown and Edit Profile</title>
<link rel="stylesheet" href="profile.css" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Include SweetAlert2 library -->
</head>

<body>
<header class="header">
<a href="index.html">About Us</a>
<div class="profile-menu">
<button class="profile-btn">
<img
src="./images/profilepic.jpg"
class="profile-pic"
id="main-profile-pic"
/>
</button>
<div class="dropdown-content">
<a href="edit-profile.html" id="edit-profile-link">Edit Profile</a>
<a href="#" id="dropdown-settings-link">Settings</a>
<a href="check-progress.html" id="check-progress">Check Progress</a>
<a href="#">Exit</a>
<a href="#">Sign Out</a>
</div>
<head>
<meta charset="UTF-8">
<title>Profile Dropdown and Edit Profile</title>
<link rel="stylesheet" href="profile.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Include SweetAlert2 library -->
</head>
<body>
<header class="header">
<a href="index.html">About Us</a>
<div class="profile-menu">
<button class="profile-btn">
<img src="./images/profilepic.jpg" class="profile-pic" id="main-profile-pic">
</button>
<div class="dropdown-content">
<a href="edit-profile.html" id="edit-profile-link">Edit Profile</a>
<a href="#" id="dropdown-settings-link">Settings</a>
<a href="check-progress.html" id="check-progress">Check Progress</a>
<a href="#">Exit</a>
<a href="#">Sign Out</a>
</div>
</header>

<!-- Edit Profile Form -->
<div id="edit-profile-form">
<h1>Edit Profile</h1>
<p>You are playing as a guest now, add details to identify you.</p>
<form id="edit-profile">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />

<label for="profile-pic">Profile Picture:</label>
<input
type="file"
id="profile-pic"
name="profile-pic"
accept="image/*"
/>

<button type="submit">Save</button>
</form>
</div>
</header>

<!-- Edit Profile Form -->
<div id="edit-profile-form">
<h1>Edit Profile</h1>
<p>You are playing as a guest now, add details to identify you.</p>
<form id="edit-profile">
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<script>
function submitProfile(event) {
event.preventDefault(); // Prevent default form submission
<label for="email">Email:</label>
<input type="text" id="email" name="email">

// Get form elements
var name = document.getElementById("name").value.trim();
var profilePic = document.getElementById("profile-pic").files[0];
<label for="additional-info">Additional Info:</label>
<textarea type="text" id="additional-info" name="additional-info"></textarea>

// Check if the name is empty
if (name === "") {
// Show a SweetAlert error modal
Swal.fire({
icon: "error",
title: "Oops...",
text: "Please enter your name before submitting.",
customClass: {
popup: "swal-popup",
title: "swal-title",
content: "swal-content",
confirmButton: "swal-confirm-button",
},
});
return; // Exit the function if the name is empty
}
<label for="profile-pic">Profile Picture:</label>
<input type="file" id="profile-pic" name="profile-pic" accept="image/*">

// Check if a profile picture is selected
if (!profilePic) {
Swal.fire({
icon: "error",
title: "Oops...",
text: "Please select a profile picture before submitting.",
customClass: {
popup: "swal-popup",
title: "swal-title",
content: "swal-content",
confirmButton: "swal-confirm-button",
},
});
return;
}
<button type="submit">Save</button>
</form>
</div>

// Show a success message
Swal.fire({
icon: "success",
title: "Success!",
text: "Your profile has been updated.",
customClass: {
popup: "swal-popup",
title: "swal-title",
content: "swal-content",
confirmButton: "swal-confirm-button",
},
}).then((result) => {
// Clear the profile form after the user acknowledges the success modal
if (result.isConfirmed || result.isDismissed) {
document.getElementById("edit-profile").reset();
}
});
}

// Attach the submitProfile function to the form's submit event
document
.getElementById("edit-profile")
.addEventListener("submit", submitProfile);
</script>
</body>
</body>
</html>
Loading