website/webdevelopment/javascriptessentialtraining.../codesamples/chapter8/no_conditional.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</h2>
	<p>This is the JavaScript code for 08_11 in the exercise files.  In this case, we are not using a conditional statement, but we will use one to improve this code.</p>
	<h2 class="sectiontitle">Backpack.js</h2>
	<p>This is the code for the Backpack object</p>
	<pre class="codesample">
	class Backpack {
	  constructor(
		name,
		volume,
		color,
		pocketNum,
		strapLengthL,
		strapLengthR,
		lidOpen,
		dateAcquired,
		image
	  ) {
		this.name = name;
		this.volume = volume;
		this.color = color;
		this.pocketNum = pocketNum;
		this.strapLength = {
		  left: strapLengthL,
		  right: strapLengthR,
		};
		this.lidOpen = lidOpen;
		this.dateAcquired = dateAcquired;
		this.image = image;
	  }
	  toggleLid(lidStatus) {
		this.lidOpen = lidStatus;
	  }
	  newStrapLength(lengthLeft, lengthRight) {
		this.strapLength.left = lengthLeft;
		this.strapLength.right = lengthRight;
	  }
	  backpackAge() {
		let now = new Date();
		let acquired = new Date(this.dateAcquired);
		let elapsed = now - acquired; // elapsed time in milliseconds
		let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
		return daysSinceAcquired;
	  }
	}

	export default Backpack;</pre>
	<h2 class="sectiontitle">script.js</h2>
	<p>This code creates a backpack object, generates an HTML element to display the object and adds it to the HTML document.</p>
	<pre class="codesample">
	/**
	 * Create a new element and append it to the &lt;main&gt; element.
	 * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
	 * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
	 */

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

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

	const newArticle = document.createElement("article");
	newArticle.classList.add("backpack");
	newArticle.setAttribute("id", "everyday");
	newArticle.innerHTML = content;

	main.append(newArticle);</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>