JavaScript Essential Training

LinkedIn Learning : Morten Rand-Hendriksen

Code Samples

Code Sample 2

This is the code example for the practice exercise 05_04 in the exercise files.

The HTML file

	<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="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">
		  <div class="page-header">
			<h2 class="page-header__heading">A pack for every purpose</h2>
			<p>
			  If you're carrying a heavy load, you can't find a better tool than a
			  backpack. Distributing the weight evenly across your shoulders, back,
			  and hips, the backpack lets you use the natural frame of your body to
			  literally <em>shoulder</em> the weight while your legs do the
			  carrying.
			</p>
		  </div>
		  <article class="backpack" id="pack01">
			<figure class="backpack__image">
			  <img src="../../assets/images/everyday.svg" alt="" loading="lazy" />
			</figure>
			<h1 class="backpack__name">Everyday Backpack</h1>
			<ul class="backpack__features">
			  <li class="feature backpack__volume">Volume:<span> 30l</span></li>
			  <li class="feature backpack__color">Color:<span> grey</span></li>
			  <li class="feature backpack__age">Age:<span> 684 days old</span></li>
			  <li class="feature backpack__pockets">
				Number of pockets:<span> 15</span>
			  </li>
			  <li class="feature backpack__strap" data-side="left">
				Left strap length: <span>26 inches</span>
				<form class="leftlength" data-children-count="1">
				  <input
					type="number"
					name="leftLength"
					placeholder="New left length"
				  />
				  <button>Update</button>
				</form>
			  </li>
			  <li class="feature backpack__strap" data-side="right">
				Right strap length: <span>26 inches</span>
				<form class="rightlength" data-children-count="1">
				  <input
					type="number"
					name="rightLength"
					placeholder="New right length"
				  />
				  <button>Update</button>
				</form>
			  </li>
			  <li class="feature backpack__lid">Lid status: <span>closed</span></li>
			</ul>
			<button class="lid-toggle">Open lid</button>
		  </article>
		  <article class="backpack" id="pack02">
			<figure class="backpack__image">
			  <img src="../../assets/images/frog.svg" alt="" loading="lazy" />
			</figure>
			<h1 class="backpack__name">Frog Backpack</h1>
			<ul class="backpack__features">
			  <li class="feature backpack__volume">Volume:<span> 8l</span></li>
			  <li class="feature backpack__color">Color:<span> green</span></li>
			  <li class="feature backpack__age">Age:<span> 369 days old</span></li>
			  <li class="feature backpack__pockets">
				Number of pockets:<span> 3</span>
			  </li>
			  <li class="feature backpack__strap" data-side="left">
				Left strap length: <span>10 inches</span>
				<form class="leftlength" data-children-count="1">
				  <input
					type="number"
					name="leftLength"
					placeholder="New left length"
				  />
				  <button>Update</button>
				</form>
			  </li>
			  <li class="feature backpack__strap" data-side="right">
				Right strap length: <span>10 inches</span>
				<form class="rightlength" data-children-count="1">
				  <input
					type="number"
					name="rightLength"
					placeholder="New right length"
				  />
				  <button>Update</button>
				</form>
			  </li>
			  <li class="feature backpack__lid">Lid status: <span>closed</span></li>
			</ul>
			<button class="lid-toggle">Open lid</button>
		  </article>
		</main>
		<footer class="sitefooter">
		  <p>
			Demo project for JavaScript Essential Training, a LinkedIn Learning
			course.
		  </p>
		</footer>
		<!-- Code injected by live-server -->
	  </body>
	</html>

The DOM Tree

This is a list of all the elements tabulated to show the nesting levels and to assist in identifying different elements within the DOM tree for the exercise practice. Note that where an element has a class, the classname has been provided, starting with a . and coloured dark red. Similarly, an id starts with a # and is coloured dark green.

	•	html
		•	head
			•	meta
			•	meta
			•	title
			•	link
			•	link
			•	script
		•	body
			•	header .siteheader
				•	div .site-title
				•	div .site-desription
			•	main .maincontent
				•	div .page-header
					•	h2 .page-header_heading
					•	p
				•	article #pack01
					•	figure .backpack__image
						•	img
					•	h1 .backpack__name
					•	ul .backpack__features
						•	li backpack__volume
							•	span
						•	li backpack__color
							•	span
						•	li backpack__age
							•	span
						•	li backpack__pockets
							•	span
						•	li backpack__strap
							•	span
							•	form .leftlength
								•	input
								•	button
						•	li backpack__strap
							•	span
							•	form .rightlength
								•	input
								•	button
						•	li backpack__lid
							•	span
					•	button .lid-toggle
				•	article #pack02
					•	figure .backpack__image
						•	img
					•	h1 .backpack__name
					•	ul .backpack__features
						•	li backpack__volume
							•	span
						•	li backpack__color
							•	span
						•	li backpack__age
							•	span
						•	li backpack__pockets
							•	span
						•	li backpack__strap
							•	span
							•	form .leftlength
								•	input
								•	button
						•	li backpack__strap
							•	span
							•	form .rightlength
								•	input
								•	button
						•	li backpack__lid
							•	span
					•	button .lid-toggle
			•	footer .sitefooter
				•	p