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

Create finalProfilepage.html #24

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create finalProfilepage.html #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
118 changes: 118 additions & 0 deletions finalProfilepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Management</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color:#e5e5f3;
margin: 0;
padding: 0;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consolidate duplicate loops over bookCompletedCheckboxes

The two loops over bookCompletedCheckboxes can be combined into a single loop that handles both initialization and click handling setup.

Suggested implementation:

      var closeProfile = document.getElementById("close-profile");
      var bookCompletedCheckboxes = document.getElementsByClassName("book-completed");

      Array.from(bookCompletedCheckboxes).forEach(function(checkbox) {
        // Set initial state if needed
        checkbox.parentElement.style.display = checkbox.checked ? "list-item" : "none";

        // Set up click handler
        checkbox.onclick = function() {
          this.parentElement.style.display = this.checked ? "list-item" : "none";
        };
      });

If there are other loops over bookCompletedCheckboxes elsewhere in the file that we can't see, those should also be consolidated into this single loop if they're performing related operations.


#profile-container {
background-color: rgb(207, 222, 191);
border-radius: 8px;
width: 400px;
padding: 20px;
position: relative;
}

.profile-header {
text-align: center;
margin-bottom: 20px;
}

.profile-info {
text-align: center;
}

.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
}

.book-management {
margin-top: 20px;
}

.book-management ul {
list-style-type: none;
padding: 0;
}

.book-management li {
background-color: #f9f9f9;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
display: none;
Comment on lines +52 to +57
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider showing list items by default and using CSS to handle completed state

Setting display:none by default can cause content flashing before JavaScript loads. Consider showing items by default and using CSS classes to handle visibility states.

Suggested implementation:

    .book-management li {
      background-color: #f9f9f9;
      margin: 5px 0;
      padding: 10px;
      border-radius: 5px;
      display: block;
    }

    .book-management li.completed {
      display: none;
    }

The JavaScript code will need to be updated to:

  1. Toggle the 'completed' class instead of directly setting display:none
  2. Use classList.add('completed') or classList.remove('completed') to change visibility states

}

.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="profile-container">
<span class="close" id="close-profile">✖️</span>
<div class="profile-header">
<h1>🎟️User Profile🎟️</h1><hr>
</div>
<div class="profile-info">
<img src="https://img.freepik.com/premium-vector/school-boy-vector-illustration_38694-902.jpg" style="height:200px;width:200px" class="profile-avatar">
<h2>John Doe</h2><hr>
<p>Email: [email protected]</p><hr>
</div>
<div class="book-management">
<h2>Book Management</h2>
<ul>
<li><input type="checkbox" class="book-completed"> Book 1: "The Great Gatsby" - Status: Reading</li>
<li><input type="checkbox" class="book-completed"> Book 2: "1984" - Status: Completed</li>
<li><input type="checkbox" class="book-completed"> Book 3: "To Kill a Mockingbird" - Status: Want to Read</li>
</ul>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
var profileContainer = document.getElementById("profile-container");
var closeProfile = document.getElementById("close-profile");
var bookCompletedCheckboxes = document.getElementsByClassName("book-completed");

for (var i = 0; i < bookCompletedCheckboxes.length; i++) {
bookCompletedCheckboxes[i].onclick = function() {
if (this.checked) {
this.parentElement.style.display = "list-item";
} else {
this.parentElement.style.display = "none";
}
}
}
closeProfile.onclick = function() { window.location.href = "Management.html"; }


for (var i = 0; i < bookCompletedCheckboxes.length; i++) {
if (bookCompletedCheckboxes[i].nextSibling.nodeValue.includes("Status: Completed")) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Use data attributes instead of text content for state management

Parsing text content is fragile. Consider using data-status attributes to manage book states.

Suggested implementation:

      for (var i = 0; i < bookCompletedCheckboxes.length; i++) {
        if (bookCompletedCheckboxes[i].parentElement.dataset.status === 'completed') {
          bookCompletedCheckboxes[i].checked = true;
          bookCompletedCheckboxes[i].parentElement.style.display = "list-item";
        }
      }

You'll also need to update the HTML elements where the book status is displayed to include the data-status attribute. For example, where you currently have text content showing the status, you should add the attribute to the parent element like this:

<li data-status="completed">
  <input type="checkbox" class="book-completed"> Status: Completed
</li>

This change will need to be made wherever book status is displayed in the HTML structure.

bookCompletedCheckboxes[i].checked = true;
bookCompletedCheckboxes[i].parentElement.style.display = "list-item";
}
}
});
</script>
</body>
</html>