<![CDATA[
<div class="container">
<h1>Conectando a una API pública para mostrar datos en nuestra página web.</h1>
<p>Utilizaremos la API de "JSONPlaceholder", que es una API pública para pruebas y prototipos.</p>
<div id="users"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// URL de la API pública
const apiURL = 'https://jsonplaceholder.typicode.com/users';
// Función para mostrar los datos en el HTML
function displayUsers(users) {
const usersContainer = document.getElementById('users');
users.forEach(user => {
const userDiv = document.createElement('div');
userDiv.className = 'user';
userDiv.innerHTML = `
<h3>${user.name}</h3>
<p><strong>Email:</strong> ${user.email}</p>
<p><strong>Phone:</strong> ${user.phone}</p>
<p><strong>Website:</strong> <a href="http://${user.website}" target="_blank">${user.website}</a></p>
`;
usersContainer.appendChild(userDiv);
});
}
// Obtener los datos de la API
axios.get(apiURL)
.then(response => {
displayUsers(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>]]>