<div id='user'></div>
// Template for your HTML
const createUserHTML = function (props) {
const { name, email, website } = props;
return `
<div>
<h2 class="name">${name}</h2>
<p class="email"><b>Email :</b> ${email}</p>
<p class="website"><b>Website :</b> ${website}</p>
</div>
`;
}
// fetch JSON data from your PHP
const fetchUser = async function (id = 1) {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
return response.json();
}
const renderUser = async function(id) {
const userContainer = document.querySelector('#user');
const userData = await fetchUser(id);
userContainer.insertAdjacentHTML('afterbegin', createUserHTML(userData));
}
renderUser(2)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.