Written HW

  1. What is the Document Object Model (DOM)?
  2. What is the difference between HTML and the DOM?
  3. What are the main types of DOM nodes?
  4. How can you traverse the DOM tree and access specific elements or nodes?
  5. What are some common methods for adding, modifying, or deleting elements in the DOM?
  6. What are events and event listeners in the context of the DOM?
  7. What is the difference between a "live" NodeList and a "static" NodeList? When would you use each?
  8. What is event delegation, and why is it useful when working with the DOM?
  9. How can you use the DOM to apply CSS styles to elements dynamically?
  10. What are some performance considerations and best practices when working with the DOM?

Answer these questions in an html file using an ordered list ol and li and style the page to your liking.

Practical HW - DOM "Menu" Lab - Part 2

Intro

In the DOM Events lesson we saw how to run a function, i.e., an event listener, when an event, such as a click, was dispatched.

This lab continues where Part 1 left off and provides practice defining event listeners used to manipulate the DOM in response to user interaction. It also provides additional practice styling DOM elements dynamically using JavaScript.

Setup

  1. Continue to use the "DOM Lab" HTML/CSS/JS Repl you created in Part 1. This is what you should have thus far:

  1. Insert an additional <nav> element within the <header> element in index.html:

    <header>
  <nav id="top-menu"></nav>
  <!-- Add the <nav> element below -->
  <nav id="sub-menu"></nav>
</header>

    Note: Other than the above changes, DO NOT modify index.html in any way.

  2. Add the following CSS to the bottom of style.css:

    header, #top-menu {
  position: relative;
}

#top-menu {
  z-index: 20;
}

#sub-menu {
  width: 100%;
  z-index: 10;
  transition: top 0.5s ease-out;
}

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

nav a.active {
  background-color: var(--sub-menu-bg);
  color: var(--main-bg);
}

    Note: Other than the above changes, DO NOT modify style.css in any way.

Tasks

Tasks 1.0 thru 3.1 were completed in Part 1.

Task 4.0

Select and cache the <nav id="sub-menu"> element in a variable named subMenuEl.

Task 4.1

Set the height subMenuEl element to be 100%.

Task 4.2

Set the background color of subMenuEl to the value stored in the --sub-menu-bg CSS custom property.

Task 4.3

Add the class of flex-around to the subMenuEl element.

Progress Check:

Task 4.4

Set the CSS position property of subMenuEl to the value of absolute.

Task 4.5

Set the CSS top property of subMenuEl to the value of 0.

Task 5.0

Update the menuLinks array in script.js to this:

var menuLinks = [
  {text: 'about', href: '/about'},
  {text: 'catalog', href: '#', subLinks: [
    {text: 'all', href: '/catalog/all'},
    {text: 'top selling', href: '/catalog/top'},
    {text: 'search', href: '/catalog/search'},
  ]},
  {text: 'orders', href: '#' , subLinks: [
    {text: 'new', href: '/orders/new'},
    {text: 'pending', href: '/orders/pending'},
    {text: 'history', href: '/orders/history'},
  ]},
  {text: 'account', href: '#', subLinks: [
    {text: 'profile', href: '/account/profile'},
    {text: 'sign out', href: '/account/signout'},
  ]},
];

Task 5.1

Select and cache the all of the <a> elements inside of topMenuEl in a variable named topMenuLinks.

Declare a global showingSubMenu variable and initialize it to false;

Task 5.2

Attach a delegated 'click' event listener to topMenuEl.

The first line of code of the event listener function should call the event object's preventDefault() method.

The second line of code function should immediately return if the element clicked was not an <a> element.

console.log the content of the <a> to verify the handler is working.

Progress Check

Ensure that clicking ABOUT, CATALOG, etc. logs out about, catalog, etc. when a link is clicked.

Clicking anywhere other than on a link should do nothing.

Task 5.3

Next in the event listener, if the clicked <a> link has a class of active:

  1. Remove the active class from the clicked <a> element.
  2. Set the showingSubMenu to false.
  3. Set the CSS top property of subMenuEl to 0.
  4. return to exit the handler.

Task 5.4

Next, the event listener should remove a class name of active from each <a> element in topMenuLinks - whether the active class exists or not.

Hint: Removing a non-existent class from an element does not cause an error, so just remove it!

Task 5.5

Next, the event listener should add a class name of active to the <a> element that was clicked.

Task 5.6

Set showingSubMenu to true if the clicked <a> element's "link" object within menuLinks has a subLinks property (all do, except for the "link" object for ABOUT), otherwise, set it to false.

Hint: Saving the "link" object in a variable will come in handy for passing its subLinks array in Task 5.7

Progress Check

Clicking any of the links should make that link "active" and clear the others:

Clicking an "active" link should clear that link.

Task 5.7

Next in the event listener...

If showingSubMenu is true:

  1. Call a buildSubMenu function passing to it the subLinks array for the clicked <a> element.
  2. Set the CSS top property of subMenuEl to 100%.

Otherwise (showingSubMenu is false):

  1. Set the CSS top property of subMenuEl to 0.

Task 5.8

Code the buildSubMenu function so that it:

  1. Clears the contents of subMenuEl.

  2. Iterates over the subLinks array passed as an argument; and for each "link" object:

    • Create an <a> element.
    • On the new element, add an href attribute with its value set to the href property of the "link" object.
    • Set the new element's content to the value of the text property of the "link" object.
    • Append the new element to the subMenuEl element.

Progress Check

Take the menu for a test drive!

Task 6.0

Attach a delegated 'click' event listener to subMenuEl.

The first line of code of the event listener function should call the event object's preventDefault() method.

The second line of code function should immediately return if the element clicked was not an <a> element.

console.log the content of the <a> to verify the handler is working.

Task 6.1

Next, the event listener should:

  1. Set showingSubMenu to false.
  2. Set the CSS top property of subMenuEl to 0.

Task 6.2

Remove the class name of active from each <a> element in topMenuLinks - whether the active class exists or not.

Task 6.3

Update the contents of mainEl to the contents of the <a> element, within an <h1>, clicked within subMenuEl.

Task 6.4

If the ABOUT link is clicked, an <h1>about</h1> should be displayed.

Congrats!

Solution

Don't peek!

Solution

Theoretical HW: charCount

In this homework, you will be practicing working with frequency counters by creating a function called charCount that counts the occurrences of each character in a given string.

Instructions

  • Build this homework in repl.it.
  • Write a function named charCount that accepts a single string argument and returns an object that represents the count of each character in the string.
  • The returned object should have keys that represent the character with its value set to the how many times the character appears in the string argument.
  • Upper and lower case characters should be counted as the same character. (Hard part)
  • Space characters should be completely ignored. (Hard part)

Examples

  • charCount('hello') should return { h: 1, e: 1, l: 2, o: 1 }.
  • charCount('Today is fantastic!') should return { t: 3, o: 1, d: 1, a: 3, y: 1, i: 2, s: 2, f: 1, n: 1, c: 1, '!': 1 }.

Submission

  • Submit the link to your repl.it solution.