website/webdevelopment/javascriptessentialtraining.../codesamples/chapter5/sample2.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Learning Website</title>
<link href="/styles/styles.css" rel="stylesheet" type="text/css">
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<h1 class="courselink">JavaScript Essential Training</h1>
<h2 class="lecturer">LinkedIn Learning : Morten Rand-Hendriksen</h2>
<h1 class="episodetitle">Code Samples</h1>

<article>
    <h2 class="sectiontitle">Code Sample 2</h2>
	<p>This is the code example for 05_03 in the exercise files.  </p>
	<h2 class="sectiontitle">The script.js file</h2>
	<pre class="codesample">
	/**
	 * Traverse the DOM tree using querySelector() and querySelectorAll()
	 * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
	 * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
	 */

	import Backpack from "./Backpack.js";

	const everydayPack = new Backpack(
	  "Everyday Backpack",
	  30,
	  "grey",
	  15,
	  26,
	  26,
	  false,
	  "December 5, 2018 15:00:00 PST",
	  "../assets/images/everyday.svg"
	);

	const main = document.querySelector(".maincontent");

	const content = `
	  &lt;article class="backpack" id="everyday"&gt;
		&lt;figure class="backpack__image"&gt;
		  &lt;img src=${everydayPack.image} alt="" /&gt;
		&lt;/figure&gt;
		&lt;h1 class="backpack__name"&gt;${everydayPack.name}&lt;/h1&gt;
		&lt;ul class="backpack__features"&gt;
		  &lt;li class="packprop backpack__volume"&gt;Volume:&lt;span&gt; ${
			everydayPack.volume
		  }l&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="packprop backpack__color"&gt;Color:&lt;span&gt; ${
			everydayPack.color
		  }&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="backpack__age"&gt;Age:&lt;span&gt; ${everydayPack.backpackAge()} days old&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="packprop backpack__pockets"&gt;Number of pockets:&lt;span&gt; ${
			everydayPack.pocketNum
		  }&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="packprop backpack__strap"&gt;Left strap length:&lt;span&gt; ${
			everydayPack.strapLength.left
		  } inches&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="packprop backpack__strap"&gt;Right strap length:&lt;span&gt; ${
			everydayPack.strapLength.right
		  } inches&lt;/span&gt;&lt;/li&gt;
		  &lt;li class="packprop backpack__lid"&gt;Lid status:&lt;span&gt; ${
			everydayPack.lidOpen
		  }&lt;/span&gt;&lt;/li&gt;
		&lt;/ul&gt;
	  &lt;/article&gt;
	`;

	main.innerHTML = content;</pre>
</article>

<div class="btngroup">
	<button class="button" onclick="window.location.href='javascriptessentialtraining2021.html'">
			Course Contents
	</button>
	<button class="button" onclick="window.location.href='/webdevelopment/webdevelopment.html'">
			Web Development Page
	</button>
	<button class="button" onclick="window.location.href='/index.html'">
			Home
	</button>
</div>

</body>
</html>