I am learning to use fetch. my question is how to do for me to click on the button I returned for example 15 people and not just one as before. and any improvement in the code please tell me as for example another way to show the results in the html that I have.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button{
border: none;
padding: 15px;
margin: 30px;
border-radius: 5px;
display: flex;
justify-content: center
}
button:hover{
cursor: pointer;
color: brown
}
</style>
</head>
<body>
<button onclick="traer()">Traer</button>
<p id="app3"></p>
<script>
const popo = document.querySelector("#app3")
const traer = ()=>{
const url = ' https://randomuser.me/api/?results=20&nat=us';
fetch(url)
.then(function(res){
console.log(res)
return res.json()
})
.then(function(data){
console.log(data)
// return data
popo.innerHTML = '
<li>
Nombre ${data.results["0"].name.first},
apellido ${data.results["0"].name.last},
Imagen
<img src = "${data.results["0"].picture.large}"
</li>
'
})
.catch(function (error) {
console.log('Something went wrong', error);
return error
})
}
</script>
</body>
</html>