JavaScript Essential Training

LinkedIn Learning : Morten Rand-Hendriksen

Code Samples

Code Sample 1

This is the code example for 05_02 in the exercise files.

The HTML Document

	<!DOCTYPE html>
	<html lang="en">
	  <head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>BackpackPacker</title>
		<link
		  href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Work+Sans:wght@100..900&display=swap"
		  rel="stylesheet"
		/>
		<link
		  rel="stylesheet"
		  href="../assets/style.css"
		  type="text/css"
		  media="all"
		/>
		<script type="module" src="Backpack.js"></script>
		<script type="module" src="script.js"></script>
	  </head>
	  <body>
		<header class="siteheader">
		  <div class="site-title">BackpackPacker</div>
		  <div class="site-description">All backpack packing, all the time.</div>
		</header>
		<main class="maincontent"></main>
		<footer class="sitefooter">
		  <p>
			Demo project for JavaScript Essential Training, a LinkedIn Learning
			course.
		  </p>
		</footer>
	  </body>
	</html>

The only difference between these two HTML files is that in the second version, there is no HTML in the body.

The JavaScript file

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

	main.innerHTML = content;