You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
9.2 KiB
236 lines
9.2 KiB
<!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 2</h2> |
|
<p>This is the code example for the practice exercise 05_04 in the exercise files. </p> |
|
<h2 class="sectiontitle">The HTML file</h2> |
|
<pre class="codesample"> |
|
<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></pre> |
|
|
|
<h2 class="sectiontitle">The DOM Tree</h2> |
|
<p>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.</p> |
|
<pre class="inset"> |
|
• html |
|
• head |
|
• meta |
|
• meta |
|
• title |
|
• link |
|
• link |
|
• script |
|
• body |
|
• header <darkred>.siteheader</darkred> |
|
• div <darkred>.site-title</darkred> |
|
• div <darkred>.site-desription</darkred> |
|
• main <darkred>.maincontent</darkred> |
|
• div <darkred>.page-header</darkred> |
|
• h2 <darkred>.page-header_heading</darkred> |
|
• p |
|
• article <darkgreen>#pack01</darkgreen> |
|
• figure <darkred>.backpack__image</darkred> |
|
• img |
|
• h1 <darkred>.backpack__name</darkred> |
|
• ul <darkred>.backpack__features</darkred> |
|
• li <darkred>backpack__volume</darkred> |
|
• span |
|
• li <darkred>backpack__color</darkred> |
|
• span |
|
• li <darkred>backpack__age</darkred> |
|
• span |
|
• li <darkred>backpack__pockets</darkred> |
|
• span |
|
• li <darkred>backpack__strap</darkred> |
|
• span |
|
• form <darkred>.leftlength</darkred> |
|
• input |
|
• button |
|
• li <darkred>backpack__strap</darkred> |
|
• span |
|
• form <darkred>.rightlength</darkred> |
|
• input |
|
• button |
|
• li <darkred>backpack__lid</darkred> |
|
• span |
|
• button <darkred>.lid-toggle</darkred> |
|
• article <darkgreen>#pack02</darkgreen> |
|
• figure <darkred>.backpack__image</darkred> |
|
• img |
|
• h1 <darkred>.backpack__name</darkred> |
|
• ul <darkred>.backpack__features</darkred> |
|
• li <darkred>backpack__volume</darkred> |
|
• span |
|
• li <darkred>backpack__color</darkred> |
|
• span |
|
• li <darkred>backpack__age</darkred> |
|
• span |
|
• li <darkred>backpack__pockets</darkred> |
|
• span |
|
• li <darkred>backpack__strap</darkred> |
|
• span |
|
• form <darkred>.leftlength</darkred> |
|
• input |
|
• button |
|
• li <darkred>backpack__strap</darkred> |
|
• span |
|
• form <darkred>.rightlength</darkred> |
|
• input |
|
• button |
|
• li <darkred>backpack__lid</darkred> |
|
• span |
|
• button <darkred>.lid-toggle</darkred> |
|
• footer <darkred>.sitefooter</darkred> |
|
• p</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> |