WDD 330: Web Frontend Development II

W03 Team Activity: Dynamic Header and Footer

Overview

This activity will finish the process of converting the SleepOutside site to a dynamic site.

Activity Instructions

Complete the following assignment as a team. Designate one team member as the "main driver" and collaborate on their copy of the code. Everyone on the team should be actively engaged in writing the code and contributing to the solution. Once the solution is working, make sure that everyone on the team gets a copy of the code. Each week let someone else be the "main driver" of the coding.

There are many spots where code examples have been given. To get the most out of this activity, do not look at the examples until your group has given that section a try. Then after you look at the example, resist the temptation to copy/paste. Use the examples to get correction, or help you get unstuck.

Core Requirements

Trello

  1. In the synchronous meeting, the driver should visit the team's copy of the project Trello board.
  2. Add each of the attending team members to the Team Activity 03: Dynamic header and footer card.
  3. Move it to the "Doing" list in Trello.
  4. Read the details of the card together.

GitHub Branch

  1. Pull any changes from the team GitHub project before proceeding.
  2. Create a new branch named driverinitials--team3 where driverinitials is the driver's initials.

The Header and Footer

The code for the Header and Footer of our site should be same or nearly the same on all pages of a site. We currently have 4 copies, one on each .html file in the site. If we need to make a change to the header we will have to visit each page to keep them the same. That is a bother with 4 pages and it becomes unmanageable with larger sites. Just as it was for the product list, templating can be a solution here as well.

There is a difference this time in that there is only one copy of our template, and there is little information that needs to be updated. The header and footer are mostly static. Instead of embedding the template in JavaScript like we did with the product listing, this time we will pull the template HTML into a separate file that we can load in with AJAX.

  1. Create another directory called partials (make sure you put this in the src/public directory).
  2. Add two new files to the partials directory: header.html and footer.html.
  3. Copy the HTML from the inside of the header and footer elements from the src/index.html page and place that HTML into its respective file.
  4. Add an id attribute to the header and footer elements in the index.html file.
    Example: header.html (Do not copy this code as it may not match up with your work!) 
    <div class="logo">
  <img src="/images/noun_Tent_2517.svg" alt="tent image for logo">
  <a href="index.html"> Sleep<span class="highlight">Outside</span></a>
</div>
<div class="cart">
  <a href="cart.html">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    ...all the SVG code ...
    </svg>
  </a>
</div>
    Example: index.html (Do not copy this code as it may not match up with your work!) 
    <header class="divider" id="main-header">

</header>

  5. To load the templates we can start with the renderListWithTemplate function we wrote last week, but will need to make some changes. We are only rendering one template instead of a list. We also need to write a function to request the HTML file with the header and footer.

    • Copy the renderListWithTemplate function and paste it into the utils.mjs module.
    • Rename it to renderWithTemplate.
  6. Modify the new function by removing the loop and instead of passing in a list, pass in data.
  7. The header should be mostly static HTML. However, if your group has completed the cart icon cards (animation or number of items), you may need to add back that functionality. This is a great use case for a callback function, but the callback will not always be necessary.
    • Add an if statement in renderWithTemplate that checks for the existence of the callback parameter, if it exists then call it.
    Example: utils.mjs 
    export function renderWithTemplate(template, parent, data, callback) {
  parentElement.insertAdjacentHTML("afterbegin", template);
  if(callback) {
    callback(data);
  }
}
  8. Create another function in utils.mjs called loadHeaderFooter. It needs to be able to do the following:
    1. Load the header and footer templates in from our partials (loadTemplate).
    2. Grab the header and footer elements out of the DOM.
    3. Render the header and footer (renderWithTemplate).
  9. In this function make a fetch request to the provided path parameter, then process the response as text using convertToText.
  10. Create a new template element using the document createElement method and set the results of the fetch into the innerHTML of that new element. Return the element from the function.
    Example: utils.mjs 
    export async function loadTemplate(path) {
  const html = await fetch(path).then(convertToText);
  const template = document.createElement('template');
  template.innerHTML = html;
  return template;
}
  11. Update main.js. Import in loadHeaderFooter and then use that function to load the header and footer into src/index.html.
  12. Do the same thing for
    • product_pages/index.html,
    • cart/index.html, and
    • cart/checkout.html (you will probably need to create a checkout.js file for this).

Stretch Activity

The cart was already a dynamic page. It read the list of items out of localStorage and then built the HTML to display the items. Update the shopping cart to match the rest of the application.

Refactor the Shopping Cart

  1. Create a ShoppingCart.mjs module similar to what we did for ProductList.
  2. Convert it to use a template like we did for the ProductList.

Instructor's Solution

As a part of this team activity, you are expected to look over a solution from the instructor, to compare your approach to that one.

Do NOT open the solution until you have worked through this activity as a team for at least one hour. At the end of the hour, if you are still struggling with some of the core requirements, you are welcome to view the instructor's solution and use it to help you complete your own code.

Example Instructor Solution

Finally - Make a Pull Request

After you have completed what you can, reviewed the instructor's solution, and gotten your code working:

  1. the driver should commit and push the changes,
  2. the driver should submit a pull request for this branch,
  3. the team reviews the pull request, closes it, and merges the branch back into the Main, and
  4. finally, someone moves the Trello card to "Done".

Submission

Return to I-Learn to report on your work.