Unit09 People

Overview

In this unit, you will filter a large JSON data store using dynamically created buttons.

Vocabulary

Logical AND (&&)

(sky==blue && grass==green) Both items must be true to evaluate to true

Logical OR (||)

(sky==blue || grass==purple) Either item can be true to evaluate to true

Not equal (!=)

(water!=orange) Items must not match to evaluate to true

Filter

This method creates a subset array of the parent array based on passing a test

Objectives

At the end of this module, you should be able to...

• Implement a for each loop
• Operate a filter on an array
• Use fat arrow functions
• Implement a switch to dynamically assign class names
• Implement && as a comparison

Tasks

• Download the start file for this unit.
• View the Star Wars visual guild people link.
• Download the JSON data set for star wars people
• Remember to export the JSON data on the first line using export const xxx =

Watch

• Unit Lectures
• Watch 1720_09a People-Overview
• Watch 1720_09b Data-Connection
• Watch 1720_09c Page-HTML
• Watch 1720_09d forEach-Loop
• Watch 1720_09e Display-Data
• Watch 1720_09f Image-Path
• Watch 1720_09g Basic-CSS
• Watch 1720_09h Switch-Classes
• Watch 1720_09i Filtering
• Watch 1720_09j Final-People

Reflection Questions

Read One Formula To Rule Them All: The ROI Of A Design System by Max and Guido

• Please describe a "Design System" as you would in a job interview.

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit09 People (10 pts)

Create a responsive, dynamic page from the Star Wars People JSON file provided with buttons to filter the displayed results.

Page Header

• Styled header for this assignment

Navigation

• Create 4 buttons and add them to the page using JavaScript
• Each button has an event listener attached
• Each button filters the Star Wars data
• Style the buttons with rounded border and a CSS graidents

Page Content

• Create cards for each charactor displaying their name and photo
• Use a JavaScript to change the card styles based on gender
• Change design elements of each card based on the styles
• Style the cards with rounded borders

Footer

• People Project by (your name) © 202X
• Styled to look nice

Overall Page Requirements

Your page needs to meet these requirements

• Link to a normailze.css file (this creates a common starting point for all browsers)
• Link to a small.css file
• Link to a medium.css file
• Link to a large.css file
• Link to an external Google Font of your choice
• Media Queries are included in the medium and large css files
• Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Upload your assignemnt to GitHub
• Change your repository to private
• Publish the GitHub repository to Netlify using the name that they provide

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail