<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lesson3</title>
<style>
.user-list{
width: 900px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.user{
width: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<button id="btn-show-users" >Show Users</button>
<div class="user-list" id="user-container"></div>
<script>
class UserList{
constructor(url, container){
this.url = url;
this.container = container;
this.allUsers = [];
}
renderUsers(){
this.allUsers.forEach(userInfo => {
console.log(userInfo);
const user = new User(userInfo);
this.container.insertAdjacentHTML("beforeend", user.render())
})
}
getUsers(){
this.appleUsers()
.then(result => this.allUsers.push(...result))
.catch(err => console.error(err));
this.renderUsers()
}
appleUsers(){
return new Promise((resolve, reject) => {
console.info(`started`);
const xhr = new XMLHttpRequest();
xhr.open(`GET`, this.url);
xhr.onload = () => {
if (xhr.status >= 400){
reject(xhr.response)
}else{
resolve(JSON.parse(xhr.response))
}
};
xhr.onerror = () => {
reject(xhr.response);
};
xhr.send()
})
}
}
class User {
constructor(userInfo){
this.userInfoObject = userInfo
}
render(){
return `
<div class="user">
<h3>${this.userInfoObject.name}</h3>
<h4>${this.userInfoObject.username}</h4>
</div>
`
}
}
const userContainer = document.getElementById('user-container');
document.getElementById('btn-show-users').addEventListener("click", () =>{
const usersList = new UserList('http://jsonplaceholder.typicode.com/users', userContainer);
usersList.getUsers()
});
</script>
</body>
</html>
getUsers(){
this.appleUsers()
.then(result => {
this.allUsers.push(...result);
this.renderUsers();
})
.catch(err => console.error(err));
}