<!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 1< / h2 >
< p > This is the code example for 04_02 in the exercise files. The HTML file is exactly the same as that shown in < a href = "sample1.html" target = "_blank" > sample1.html< / a > , so I .< / p >
< h2 class = "sectiontitle" > The JavaScript file< / h2 >
< pre class = "codesample" >
/**
* 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;< / 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 >
