Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function profileTemplate ({ username, email, age }, id) {
- const wrapper = document.createElement('div')
- const btn = document.createElement('button')
- btn.innerText = 'Show more'
- wrapper.className = 'profile'
- wrapper.innerHTML = `<img src="./iconProfile2.png" class="userIcon">
- <label>Lock</label>
- <input type="radio" name="user${id}Locked" value="lock" checked="">
- <label>Unlock</label>
- <input type="radio" name="user${id}Locked" value="unlock"><br>
- <hr>
- <label>Username</label>
- <input type="text" name="user${id}Username" value=${username} disabled="" readonly="">
- <div id="user${id}HiddenFields">
- <hr>
- <label>Email:</label>
- <input type="email" name="user${id}Email" value=${email} disabled="" readonly="">
- <label>Age:</label>
- <input type="email" name="user${id}Age" value=${age} disabled="" readonly="">
- </div>`
- btn.addEventListener('click', () => {
- const checked = wrapper.querySelector('input[type=radio]:checked')
- if (checked && checked.value === 'unlock') {
- if (btn.innerText === 'Show more') {
- wrapper.querySelector(`#user${id}HiddenFields`).style.display = 'block'
- btn.innerText = 'Hide it'
- } else {
- wrapper.querySelector(`#user${id}HiddenFields`).style.display = 'none'
- btn.innerText = 'Show more'
- }
- }
- })
- wrapper.appendChild(btn)
- return wrapper
- }
- async function lockedProfile () {
- const data = await fetch(`http://localhost:3030/jsonstore/advanced/profiles`)
- const des = await data.json()
- const main = document.querySelector('main')
- main.innerHTML = ''
- Object.values(des).forEach((x, i) => main.appendChild(profileTemplate(x, i+1)))
- }
Add Comment
Please, Sign In to add comment