R-ALAB 308H.12.1 - DOM Manipulation (Part One)


Learning Objectives

After this lab, learners will have demonstrated the ability to:

  • Manipulate the DOM using JavaScript.

 CodeSandbox

This lab uses CodeSandbox as one of its tools.

If you are unfamiliar with CodeSandbox, or need a refresher, please visit our reference page on CodeSandbox for instructions on:

  • Creating an Account
  • Making a Sandbox
  • Navigating your Sandbox
  • Submitting a link to your Sandbox to Canvas

Instructions

  1. Create a Vanilla CodeSandbox and name it "DOM Manipulation Lab."
  2. Follow along with the instructions below.
  3. Submit the link to your CodeSandbox on Canvas when you are finished.

Deliverables

  1. A link to a CodeSandbox that contains your completed lab with no errors (comment things out if they do not work).

Introduction

This is the first of a two-part lab that builds a menu bar with a slide-down submenu.

Note: Several of the tasks in this lab would be better done upfront in the markup or CSS instead of using JS; however, the goal of this lab is to provide practice modifying the DOM using JS. In your projects, if the HTML or CSS is known in advance and/or static (unchanging), code it in HTML and CSS!


Getting Started

  1. Update the <body> element in the index.html to this:
<body>
	<header>
	<nav id="top-menu"></nav>
	</header>
	<main></main>

	<script src="index.js"></script>
</body>

Note: The markup is complete - DO NOT modify it in any way - do not add any classes or ids.

  1. Add the following CSS within styles.css:
* {
	box-sizing: border-box;
}

/* CSS Custom Properties */
:root {
	--main-bg: #4a4e4d;
	--top-menu-bg: #0e9aa7;
	--sub-menu-bg: #3da4ab;
}

body {
	font-family: Tahoma, Geneva, sans-serif;
	height: 100vh;
	margin: 0;
	display: grid;
	grid-template-rows: 3rem auto;
	color: white;
}

.flex-ctr {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

nav a {
	line-height: 3rem;
	padding: 0 1rem;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
}

#top-menu a:hover {
	background-color: var(--sub-menu-bg);
}

Note: The CSS is complete - DO NOT modify it in any way.

Take five minutes to familiarize yourself with CSS Custom Properties (variables) - they are an amazing new addition to CSS. If you're familiar with using variables with SASS/LESS pre-processors, CSS Custom Properties are similar, but far more powerful because they are dynamic (their values can be changed during runtime) - and they are built into the CSS language!


Building the Menu

  1. Select and cache the <main> element in a variable named mainEl.

  2. Set the background color of mainEl to the value stored in the --main-bg CSS custom property.

    • Hint: Assign a string that uses the CSS var() function like this: 'var(--main-bg)'.
  3. Set the content of mainEl to <h1>DOM Manipulation</h1>.

  4. Add a class of flex-ctr to mainEl.

Progress Check - Here's what it should look like so far:

  1. Select and cache the <nav id="top-menu"> element in a variable named topMenuEl.
  2. Set the height topMenuEl element to be 100%.
  3. Set the background color of topMenuEl to the value stored in the --top-menu-bg CSS custom property.
  4. Add a class of flex-around to topMenuEl.

Progress Check - Here's what it should look like so far:

  1. Copy the following data structure to the top of index.js:
// Menu data structure
var menuLinks = [
  {text: 'about', href: '/about'},
  {text: 'catalog', href: '/catalog'},
  {text: 'orders', href: '/orders'},
  {text: 'account', href: '/account'},
];
  1. Iterate over the entire menuLinks array and for each "link" object:
  2. Create an <a> element.
  3. On the new element, add an href attribute with its value set to the href property of the "link" object.
  4. Set the new element's content to the value of the text property of the "link" object.
  5. Append the new element to the topMenuEl element.

Progress Check - Here's what it should look like so far:


Complete

You're done for now! Remember to submit the link to your project to Canvas.

There is a Part Two to this lab, which you should complete as instructed.

Copyright © Per Scholas 2024