JavaScript Essential Training

LinkedIn Learning : Morten Rand-Hendriksen

Code Samples

Code Sample 1

This is the code example for 04_02 in the exercise files. The HTML file is exactly the same as that shown in sample1.html, so I .

The JavaScript file

	/**
	 * Use template literals to output HTML
	 * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
	 *
	 */
	// import { doc } from "prettier";
	import Backpack from "./Backpack.js";

	const everydayPack = new Backpack(
	  "Everyday Backpack",
	  30,
	  "grey",
	  15,
	  26,
	  26,
	  false,
	  "December 5, 2018 15:00:00 PST"
	);

	const content = `
	  <main>
	  <article>
		<h1>${everydayPack.name}</h1>
		<ul>
		  <li>Volume: ${everydayPack.volume}</li>
		  <li>Color: ${everydayPack.color}</li>
		  <li>Age: ${everydayPack.backpackAge()}</li>
		  <li>Number of pockets: ${everydayPack.pocketNum}</li>
		  <li>Left strap length: ${everydayPack.strapLength.left}</li>
		  <li>Right strap length: ${everydayPack.strapLength.right}</li>
		  <li>Lid status: ${everydayPack.lidOpen}</li>
		</ul>
	  </article>
	  </main>
	`;

	document.body.innerHTML = content;