Untitled

// Get data from localStorage
const fetchedUsersData = localStorage.getItem('fetchedUsers');

// Check if data exists
if (fetchedUsersData) {
  // Parse JSON data
  const users = JSON.parse(fetchedUsersData);

  // Create a container div with class 'fetched-users'
  const fetchedUsersContainer = document.createElement('div');
  fetchedUsersContainer.className = 'fetched-users';

  // Add CSS styles for grid layout and centering
  fetchedUsersContainer.style.display = 'grid';
  fetchedUsersContainer.style.gridAutoFlow = 'dense'; // Allows items to fill empty spaces
  fetchedUsersContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(120px, 1fr))';
  fetchedUsersContainer.style.gap = '10px';
  fetchedUsersContainer.style.position = 'absolute';
  fetchedUsersContainer.style.top = '100px'; // Set top to 100px
  fetchedUsersContainer.style.left = '50%';
  fetchedUsersContainer.style.transform = 'translateX(-50%)'; // Center horizontally
  fetchedUsersContainer.style.width = '90vw';
  fetchedUsersContainer.style.height = '80vh'; // Set height to 90vh
  fetchedUsersContainer.style.overflowY = 'auto'; // Enable vertical overflow with scrolling
  fetchedUsersContainer.style.padding = '24px';
  fetchedUsersContainer.style.backgroundColor = '#1b1b1b';
  fetchedUsersContainer.style.setProperty('border-radius', '0.6em', 'important');

  // Iterate through each user
  for (const userId in users) {
    if (users.hasOwnProperty(userId)) {
      const userData = users[userId];

      // Create a div for each user with class 'user'
      const userElement = document.createElement('div');
      userElement.className = 'user';

      // Create divs for id, rank, and login
      const idElement = document.createElement('div');
      idElement.className = 'id';
      idElement.textContent = userId;
      idElement.style.color = 'skyblue';

      const rankElement = document.createElement('div');
      rankElement.className = 'rank';
      rankElement.textContent = userData.rank;

      const loginElement = document.createElement('div');
      loginElement.className = 'login';
      loginElement.textContent = userData.login;
      loginElement.style.color = 'antiquewhite';

      // Append id, rank, and login divs to the user div
      userElement.appendChild(idElement);
      userElement.appendChild(rankElement);
      userElement.appendChild(loginElement);

      // Append the user div to the fetched-users container
      fetchedUsersContainer.appendChild(userElement);
    }
  }

  // Append the fetched-users container to the body
  document.body.appendChild(fetchedUsersContainer);
}