display-a-list-practice: An HTML repository from ARCHIVED: Alchemy Code Lab

Display a list practice

The goal here is to help you see web development the way experienced developers do: as a series of finite and repeatable tasks.

There are only so many things we do in an app.

Here is a list of the 10 major plain JavaScript patterns.

Let's practice the 'display a list' and 'render function' patterns.

Scoring rubric: 2.5 point for each array displayed to the page.

Goal

Render 4 separate lists of things to the same index.html file. Minimally,

One list should be a list of string,
One should be a list of simple objects,
One should be a list of objects where one property is a nested object,
Another list of of simple objects, or
- STRETCH: A list of objects where one property is an array. This means that you need to render a sub-list for each item in the main list!

Setup

Start with the list practice template repo.

Process

Repeat the following process 4 times, with 4 different domains, all in the same repo

Note: do this process one array at a time. Do not write 4 arrays, then 4 render functions, etc. Work through the first array, then the first render function, then the first display function.

Come up with a domain for this data (lie 'dogs' or 'candies'). Let's assume you picked 'candies' for your list of simple objects

1) Data

Rename array-one.js to candies-data.js. In that data file:

Create an exported variable with an array of at least 3 objects for that domain
Each object should have at least 3 properties (unless you are doing the string list)
Objects in the array should all have the same properties

For example:

export const candies = [
    {
        name: 'Twix',
        flavor: 'chocolate caramel',
        type: 'candy bar',
    },
    {
        name: 'Bubblicious',
        flavor: 'strawberry watermelon',
        type: 'gum',
    },
    {
        name: 'Smarties',
        flavor: 'tart fruity',
        type: 'waffers',
    },
];

2) HTML

In index.html:

Rename the header to your domain, e.g. <h2>Candies</h2>
Rename the id of your list container, e.g. <ul id="candy-list"></ul>

Design how the <li> element will look, so you have a target for the render function. Simple is best for this exercise!

<h2>Candies</h2>
<ul id="candy-list">
    <li class="candy-item">
        <h2>Twix</h2>
        <p>chocolate caramel candy bar</p>
    </li>
</ul>

3) Render Function

Rename render-one.js to render-candy.js file for your candy array

Write an exported render function with a name like renderCandy that accepts one object and returns DOM elements.
This function should return an <li> element with a css class of candy-item.
Create a minimum of two child elements (h2, span, p etc.) and use the object properties to correctly populate those elements

export function renderCandy(candy) {
    const li = document.createElement('li');
    li.classList.add('candy-item');

    const headerEl = document.createElement('h2');
    headerEl.textContent = candy.name;

    const pEl = document.createElement('p');
    pEl.textContent = candy.flavor + ' ' + candy.type;

    li.append(headerEl, pEl);

    return li;
}

4) Display Function

In app.js:

import both your array and render function
Grab the list element from the DOM. (getElementById)
Rename the display function from displayOne to displayCandies
In this function, loop through your array, and for each object:
- render a candy element using the render function
- append the element to the list element you grabbed from the DOM

alchemycodelab/display-a-list-practice