prof3ssorSt3v3/index.html

## 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>DOM Events</title>
    <link rel="stylesheet" href="main.css" />
    <script src="main.js" type="module"></script>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>DOM Events</h1>
        <h2>Your Name Here</h2>
      </header>
      <main>
        <h2>Click List Items to Load Images</h2>
        <ul class="img-list">
          <li data-url="https://picsum.photos/id/0/600/400" data-alt="Photo by Alejandro Escamillo">Laptop on wooden table</li>
          <li data-url="https://picsum.photos/id/10/600/400" data-alt="Photo by Paul Jarvis">Distant mountains</li>
          <li data-url="https://picsum.photos/id/20/600/400" data-alt="Photo by Aleks Dorohovich">Mobile design</li>
          <li data-url="https://picsum.photos/id/27/600/400" data-alt="Photo by Yoni Kaplan-Nadel">Standing at the shore</li>
          <li data-url="https://unsplash.com/photo/does-not-exist/" data-alt="An unimaginable photo">You won't believe your eyes</li>
          <li data-url="https://picsum.photos/id/28/600/400" data-alt="Photo by Jerry Adney">Forest River</li>
        </ul>
      </main>
    </div>
  </body>
</html>

## main.css
:root {
  --cardbg: #aaa;
  --cardtxt: #333;
  --oddbg: #eee;
}
* {
  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;
  line-height: 1.6;
  font-weight: 300;
}
li {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem;
  border-bottom: 1px solid var(--cardbg);
}
li:nth-child(odd) {
  background-color: var(--oddbg);
}
li:hover {
  color: var(--cardtxt);
}
li:hover::after {
  content: ' ' attr(data-alt);
}
li img {
  height: 200px;
  vertical-align: middle;
  margin: 1rem;
}
li:has(img) {
  width: 400px;
  color: var(--cardtxt);
  border: 1px solid var(--cardtxt);
  margin: 1rem;
  padding: 1rem;
  cursor: auto;
}
li:has(img)::after {
  content: ' ' attr(data-alt);
}
li:has(img) img {
  width: calc(100% - 2rem);
  height: auto;
}

## main.js
(() => {
  //this function runs when the page has loaded.
  let ul = document.querySelector('ul.img-list');
  //add a listener for when a user clicks on the <ul>
  //call the pickedListItem function when the <ul> is clicked
})();

function pickedListItem(ev) {
  //get the data-url and data-alt attributes from the clicked <li>
  //create an image element
  //add a load listener to the image
  //when the image has loaded, append the image to the <li>
  //add an error listener to the image
  //if the image fails to load, replace the text in the <li> with an error message
  //set the src and the alt attributes on the new <img>
}
	<!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>DOM Events</title>
	<link rel="stylesheet" href="main.css" />
	<script src="main.js" type="module"></script>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>DOM Events</h1>
	<h2>Your Name Here</h2>
	</header>
	<main>
	<h2>Click List Items to Load Images</h2>
	<ul class="img-list">
	<li data-url="https://picsum.photos/id/0/600/400" data-alt="Photo by Alejandro Escamillo">Laptop on wooden table</li>
	<li data-url="https://picsum.photos/id/10/600/400" data-alt="Photo by Paul Jarvis">Distant mountains</li>
	<li data-url="https://picsum.photos/id/20/600/400" data-alt="Photo by Aleks Dorohovich">Mobile design</li>
	<li data-url="https://picsum.photos/id/27/600/400" data-alt="Photo by Yoni Kaplan-Nadel">Standing at the shore</li>
	<li data-url="https://unsplash.com/photo/does-not-exist/" data-alt="An unimaginable photo">You won't believe your eyes</li>
	<li data-url="https://picsum.photos/id/28/600/400" data-alt="Photo by Jerry Adney">Forest River</li>
	</ul>
	</main>
	</div>
	</body>
	</html>
	:root {
	--cardbg: #aaa;
	--cardtxt: #333;
	--oddbg: #eee;
	}
	* {
	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;
	line-height: 1.6;
	font-weight: 300;
	}
	li {
	cursor: pointer;
	list-style: none;
	padding: 0.5rem;
	border-bottom: 1px solid var(--cardbg);
	}
	li:nth-child(odd) {
	background-color: var(--oddbg);
	}
	li:hover {
	color: var(--cardtxt);
	}
	li:hover::after {
	content: ' ' attr(data-alt);
	}
	li img {
	height: 200px;
	vertical-align: middle;
	margin: 1rem;
	}
	li:has(img) {
	width: 400px;
	color: var(--cardtxt);
	border: 1px solid var(--cardtxt);
	margin: 1rem;
	padding: 1rem;
	cursor: auto;
	}
	li:has(img)::after {
	content: ' ' attr(data-alt);
	}
	li:has(img) img {
	width: calc(100% - 2rem);
	height: auto;
	}
	(() => {
	//this function runs when the page has loaded.
	let ul = document.querySelector('ul.img-list');
	//add a listener for when a user clicks on the <ul>
	//call the pickedListItem function when the <ul> is clicked
	})();

	function pickedListItem(ev) {
	//get the data-url and data-alt attributes from the clicked <li>
	//create an image element
	//add a load listener to the image
	//when the image has loaded, append the image to the <li>
	//add an error listener to the image
	//if the image fails to load, replace the text in the <li> with an error message
	//set the src and the alt attributes on the new <img>
	}