Skip to content

Commit

Permalink
prof-working
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinakviramgama
pinakviramgama committed Nov 3, 2024
1 parent e7cd7a9 commit ec13f1b
Show file tree
Hide file tree
Showing 3 changed files with 280 additions and 142 deletions.
166 changes: 112 additions & 54 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,124 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Accordion</title>
<title>User Profile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>User Profile</h1>
<div id="profileDisplay" class="profile-display">
<img id="profileImage" src="no-profile-photo.png" alt="Profile Image" class="profile-img">
<div class="profile-info">
<p><strong>Username:</strong> <span id="displayUsername">john_doe</span></p>
<p><strong>Email:</strong> <span id="displayEmail">[email protected]</span></p>
<p><strong>Bio:</strong> <span id="displayBio">Welcome to my profile!</span></p>
</div>
</div>

<div id="profileEdit" style="display: none;">
<form id="profileForm">
<div class="form-group">
<label for="imageUpload">Profile Image:</label>
<input type="file" id="imageUpload" accept="image/*">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="john_doe">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="[email protected]">
</div>
<div class="form-group">
<label for="bio">Bio:</label>
<textarea id="bio" name="bio">Welcome to my profile!</textarea>
</div>
<button type="submit">Save</button>
<button type="button" id="cancelButton">Cancel</button>
</form>
</div>

<button id="editButton">Edit Profile</button>
</div>

<style>
.accordion-button {
display: flex;
justify-content: space-between;
width: 100%;
cursor: pointer;
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
margin-bottom: 5px;
transition: background-color 0.3s;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.accordion-button:hover {
background-color: #e2e2e2;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion-body {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 5px;
display: none; /* Initially hidden */
}
h1 {
text-align: center;
}

.show {
display: block; /* Display when expanded */
}
.profile-display {
display: flex;
align-items: center; /* Vertically center items */
margin-bottom: 20px;
}

.accordion-button::after {
content: '▼'; /* Down arrow */
margin-left: auto; /* Align to the right */
transition: transform 0.3s;
}
.profile-img {
width: 100px; /* Set the size of the image */
height: 100px;
border-radius: 50%; /* Make the image circular */
border: 1px solid red;
object-fit: cover; /* Maintain aspect ratio */
margin-right: 20px; /* Space between image and text */
}

.accordion-button.collapsed::after {
transform: rotate(-90deg); /* Rotate arrow when collapsed */
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="collapseFive">
Is Finveda free to use?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse">
<div class="accordion-body">
Yes, Finveda is completely free to use for all users.
</div>
</div>
</div>
</div>
</div>
.profile-info {
flex: 1; /* Take up remaining space */
}

.form-group {
margin-bottom: 15px;
}

<script src="final.js"></script> <!-- Link to external JS file -->
label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea,
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button#cancelButton {
background-color: #d9534f;
}

button:disabled {
background-color: #ccc;
}

</style>
<script src="final.js"></script>
</body>
</html>
72 changes: 51 additions & 21 deletions final.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,52 @@
// Select the button
let btn = document.querySelector(".accordion-button");

// Add click event listener to the button
btn.addEventListener("click", () => {
// Toggle the aria-expanded attribute
const isExpanded = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", !isExpanded);
btn.classList.toggle("collapsed");

// Get the corresponding accordion body
const collapseElement = btn.closest("h2").nextElementSibling;

// Toggle the display of the accordion body
if (isExpanded) {
collapseElement.querySelector(".accordion-body").classList.remove("show");
collapseElement.querySelector(".accordion-body").style.display = "none"; // Hide the content
} else {
collapseElement.querySelector(".accordion-body").classList.add("show");
collapseElement.querySelector(".accordion-body").style.display = "block"; // Show the content
}
document.getElementById("editButton").addEventListener("click", function () {
// Hide the display section
document.getElementById("profileDisplay").style.display = "none";

// Show the edit form
document.getElementById("profileEdit").style.display = "block";
});

document
.getElementById("profileForm")
.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent form submission

// Get updated values
const updatedUsername = document.getElementById("username").value;
const updatedEmail = document.getElementById("email").value;
const updatedBio = document.getElementById("bio").value;

// Update the displayed values
document.getElementById("displayUsername").textContent = updatedUsername;
document.getElementById("displayEmail").textContent = updatedEmail;
document.getElementById("displayBio").textContent = updatedBio;

// Hide the edit form and show the display section again
document.getElementById("profileEdit").style.display = "none";
document.getElementById("profileDisplay").style.display = "flex"; // Show as flex for alignment

alert("Profile updated successfully!");
});

// Handle cancel button
document.getElementById("cancelButton").addEventListener("click", function () {
// Hide the edit form and show the display section again
document.getElementById("profileEdit").style.display = "none";
document.getElementById("profileDisplay").style.display = "flex"; // Show as flex for alignment
});

// Handle image upload
document
.getElementById("imageUpload")
.addEventListener("change", function (event) {
const file = event.target.files[0];
const reader = new FileReader();

reader.onload = function (e) {
document.getElementById("profileImage").src = e.target.result; // Update the image src to the new file
};

if (file) {
reader.readAsDataURL(file);
}
});
Loading

0 comments on commit ec13f1b

Please sign in to comment.