Let's create a customElement with my favorite framework.
It's not well written, but it's late :-)
You can test it here RandomUsers
<random-users count=1></random-users>
<random-users count=3></random-users>
<random-users count=5></random-users>
let styleGallery = {
display :"flex",
flexWrap : "wrap",
justifyContent : "space-around"}
let Users = function ({attrs:{count}}) {
let users = []
let request = `
https://randomuser.me/api/?results=${count}
`
return {
init : m.request(request).then((d) => {
users = d.results
}),
view: () => [
m("div",{style : styleGallery},
users.map((u) => m("div", [
m("img", {src : u.picture.large}),
m("div.name", {style : {textAlign:"center"}},
u.name.first + " " + u.name.last)
])))
]
}}
class ListUsers extends HTMLElement {
constructor() {
super();
this.count = 100
}
connectedCallback() {
m.mount(this, {
view: () =>
m(Users, {count: (this.getAttribute('count') || this.count)
})})
}
}
window.customElements.define('random-users', ListUsers);