<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)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.