EntropyStarRover

04. Locked profile

Feb 26th, 2021 (edited)
678
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function lockedProfile() {
  2.  
  3.     let main = document.getElementById("main");
  4.  
  5.     var requestOptions = {
  6.         method: 'GET',
  7.         redirect: 'follow'
  8.     };
  9.  
  10.     fetch("http://localhost:3030/jsonstore/advanced/profiles", requestOptions)
  11.         .then(response => response.json())
  12.         .then(result => populate(result))
  13.         .catch(error => console.log('error', error));
  14.  
  15.  
  16.     function populate(dataObj) {
  17.         main.innerHTML = "";
  18.         let arr = Array.from(Object.entries(dataObj));
  19.  
  20.  
  21.         arr.forEach(p => {
  22.             let profileDiv = document.createElement("div");
  23.             profileDiv.className = "profile";
  24.  
  25.             let profilePic = document.createElement("img");
  26.             profilePic.setAttribute("src", "./iconProfile2.png");
  27.             profilePic.className = "userIcon";
  28.             let lockLabel = document.createElement("label");
  29.             lockLabel.textContent = "Lock";
  30.             let radioLock = document.createElement("input");
  31.             radioLock.type = "radio";
  32.             radioLock.checked = true;
  33.             radioLock.name = `${p[1].username}Locked`
  34.             let unlockLabel = document.createElement("label");
  35.             unlockLabel.textContent = "Unlock";
  36.             let radioUnlock = document.createElement("input");
  37.             radioUnlock.type = "radio";
  38.             radioUnlock.name = `${p[1].username}Locked`
  39.             let hr = document.createElement("hr");
  40.             let usernameLabel = document.createElement("label");
  41.             usernameLabel.textContent = "Username";
  42.             let usernameInput = document.createElement("input");
  43.             usernameInput.disabled = true;
  44.             usernameInput.value = p[1].username;
  45.  
  46.             let hiddenDiv = document.createElement("div");
  47.             hiddenDiv.id = `${p[1].username}HiddenFields`;
  48.             hiddenDiv.style.display = "none";
  49.             let hiddenHr = document.createElement("ht");
  50.             let emailLable = document.createElement("label");
  51.             emailLable.textContent = "Email:";
  52.             let emailInput = document.createElement("input");
  53.             emailInput.disabled = true;
  54.             emailInput.value = p[1].email;
  55.             let ageLabel = document.createElement("label");
  56.             ageLabel.textContent = "Age:"
  57.             let ageInput = document.createElement("input");
  58.             ageInput.disabled = true;
  59.             ageInput.value = p[1].age;
  60.  
  61.             let buttonShow = document.createElement("button");
  62.             buttonShow.textContent = "Show more";
  63.             buttonShow.addEventListener("click", () => (togleVisibility(profileDiv, hiddenDiv)));
  64.  
  65.             hiddenDiv.appendChild(hiddenHr);
  66.             hiddenDiv.appendChild(emailLable);
  67.             hiddenDiv.appendChild(emailInput);
  68.             hiddenDiv.appendChild(ageLabel);
  69.             hiddenDiv.appendChild(ageInput);
  70.  
  71.  
  72.             profileDiv.appendChild(profilePic);
  73.             profileDiv.appendChild(lockLabel)
  74.             profileDiv.appendChild(radioLock);
  75.             profileDiv.appendChild(unlockLabel)
  76.             profileDiv.appendChild(radioUnlock);
  77.             profileDiv.appendChild(hr);
  78.             profileDiv.appendChild(usernameLabel);
  79.             profileDiv.appendChild(usernameInput);
  80.             profileDiv.appendChild(hiddenDiv);
  81.             profileDiv.appendChild(buttonShow)
  82.             main.appendChild(profileDiv)
  83.         })
  84.  
  85.         function togleVisibility(profileDiv, hiddenDiv) {
  86.  
  87.             let unlockedRadio = Array.from(profileDiv.querySelectorAll('input'))[1];
  88.             let showBtn = profileDiv.querySelector("button");
  89.  
  90.             if (unlockedRadio.checked == true) {
  91.  
  92.                 if (showBtn.textContent == "Show more") {
  93.                     hiddenDiv.style.display = "block";
  94.                     showBtn.textContent = "Hide it"
  95.                 } else {
  96.                     hiddenDiv.style.display = "none";
  97.                     showBtn.textContent = "Show more"
  98.                 }
  99.             }
  100.  
  101.  
  102.         }
  103.  
  104.     }
  105.  
  106. }
RAW Paste Data