prof3ssorSt3v3/app.js

## app.js
document.addEventListener('DOMContentLoaded', () => {
  document.body.addEventListener('click', getData);
});

function getData(ev) {
  //get some data from the random-data-api
  const type = 'users'; // beers users credit_cards  addresses
  const url = new URL(`https://random-data-api.com/api/v2/${type}`);
  let params = new URLSearchParams();
  //size - number of records to return (default is 1)
  //response_type - json or xml (default is json)
  params.set('size', 10);
  params.set('response_type', 'json');
  url.search = params;

  fetch(url)
    .then((response) => {
      if (!response.ok) throw new Error('Bad things happened');
      return response.json();
    })
    .then(buildUserHTML)
    .catch(console.warn);
}

function buildBeerHTML(data) {
  console.log(data);
  let main = document.querySelector('main');
  main.innerHTML = data
    .map(({ name, style, id, alcohol }) => {
      return `<div class="card" data-ref="${id}">
      <span class="alcohol">${alcohol}</span>
      <h3>${name}</h3>
      <p>${style}</p>
    </div>`;
    })
    .join('');
}

function buildUserHTML(data) {
  console.log(data);
  let main = document.querySelector('main');
  //build the cards for the users
  main.innerHTML = data
    .map(({ first_name, email, id, avatar }) => {
      return `<div class="card" data-ref="${id}">
      <img src="${avatar}" alt="robohash api" />
      <h3>${first_name}</h3>
      <p>${email}</p>
    </div>`;
    })
    .join('');
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Data API</title>
    <link rel="stylesheet" href="./main.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <header>
      <h1>Random Data API</h1>
      <h2>
        Users, Addresses, Banks, Appliances, Beers, Blood Types, Credit Cards
      </h2>
    </header>
    <main>
      <!-- stick data here -->
    </main>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
}
html {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  color-scheme: dark light;
}
body {
  min-height: 100vh;
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.card {
  width: clamp(150px, 30vw, 400px);
  background-color: #fcf5c7;
  padding: 2rem 1rem 1rem;
  color: #734b5e;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.alcohol {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background-color: #a0ced9;
  color: #565857;
  border-radius: 50%;
  font-size: 1.2rem;
  height: 3rem;
  width: 3rem;
  display: grid;
  place-content: center;
  transform: rotate(15deg);
}
.card h1 {
  font-size: 1.2rem;
}
.card p {
  font-size: 0.8rem;
}
.card img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.16;
  width: 90%;
}
	document.addEventListener('DOMContentLoaded', () => {
	document.body.addEventListener('click', getData);
	});

	function getData(ev) {
	//get some data from the random-data-api
	const type = 'users'; // beers users credit_cards addresses
	const url = new URL(`https://random-data-api.com/api/v2/${type}`);
	let params = new URLSearchParams();
	//size - number of records to return (default is 1)
	//response_type - json or xml (default is json)
	params.set('size', 10);
	params.set('response_type', 'json');
	url.search = params;

	fetch(url)
	.then((response) => {
	if (!response.ok) throw new Error('Bad things happened');
	return response.json();
	})
	.then(buildUserHTML)
	.catch(console.warn);
	}

	function buildBeerHTML(data) {
	console.log(data);
	let main = document.querySelector('main');
	main.innerHTML = data
	.map(({ name, style, id, alcohol }) => {
	return `<div class="card" data-ref="${id}">
	<span class="alcohol">${alcohol}</span>
	<h3>${name}</h3>
	<p>${style}</p>
	</div>`;
	})
	.join('');
	}

	function buildUserHTML(data) {
	console.log(data);
	let main = document.querySelector('main');
	//build the cards for the users
	main.innerHTML = data
	.map(({ first_name, email, id, avatar }) => {
	return `<div class="card" data-ref="${id}">
	<img src="${avatar}" alt="robohash api" />
	<h3>${first_name}</h3>
	<p>${email}</p>
	</div>`;
	})
	.join('');
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Random Data API</title>
	<link rel="stylesheet" href="./main.css" />
	<script src="./app.js"></script>
	</head>
	<body>
	<header>
	<h1>Random Data API</h1>
	<h2>
	Users, Addresses, Banks, Appliances, Beers, Blood Types, Credit Cards
	</h2>
	</header>
	<main>
	<!-- stick data here -->
	</main>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	color-scheme: dark light;
	}
	body {
	min-height: 100vh;
	}
	main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	}
	.card {
	width: clamp(150px, 30vw, 400px);
	background-color: #fcf5c7;
	padding: 2rem 1rem 1rem;
	color: #734b5e;
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	}
	.alcohol {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	background-color: #a0ced9;
	color: #565857;
	border-radius: 50%;
	font-size: 1.2rem;
	height: 3rem;
	width: 3rem;
	display: grid;
	place-content: center;
	transform: rotate(15deg);
	}
	.card h1 {
	font-size: 1.2rem;
	}
	.card p {
	font-size: 0.8rem;
	}
	.card img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0.16;
	width: 90%;
	}