estoy aprendiendo a usar fetch. mi consulta es como hacer para yo al hacer click en el boton me devuelva por ejemplo 15 personas y no sola una como hasta ahora. y cualquier mejora en el codigo por favor diganmela como por ejemplo otra manera de mostrar los resultados en el html que la que tengo.
<!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>