Unit07 Presidents

Overview

In this assignment we will be accessing a JSON data file that contains information about the presidents of the US and displaying it on a page.

Vocabulary

JSON

The acronym for Java Script Object Notation, a way to store data.

JavaScript Modules

Allow you to separate your code into pieces and import and export only the data and functions that you need.

Objectives

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

• Use figure with images and division
• Use JSON data
• Practice JSON Object Literals
• Implement JavaScript Modules
• Implement JS import
• Implement JS export

Tasks

• Use JSON data to build a page showing the US Presidents
• Download the start file for this unit.
• Download the presidents JSON data file.
• Link to the parent folder for all the presidents photos.

Watch

• Unit Lectures
• Watch 1720_07a Presidents-Overview
• Watch 1720_07b Stooges
• Watch 1720_07c Linking-the-JSON
• Watch 1720_07d Looping-through-Data
• Watch 1720_07e Appending-Elements
• Watch 1720_07f Design

Reflection Questions

Read The Rise and Rise of JSON by two bit history

• Explain to a potential employee why JSON data is your choice for data storage.

Assignment Example

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

Assignment Checklist

Unit07 Presidents (10 pts)

A listing of all the presidents using JSON data and external images.

Page Header

• Load a custom google font of your choice

Footer

• Add a footer tag containing your name and the class

Content

• Display all the data from the Presidents JSON data file
• Link to an external president image with an alt tag

Design

Using your very best design skills, make this page look nice

• Implement a color scheme
• Implement Alignment, Proximity, Repetition, Contrast, and avoid Visual Tangent errors.
• Implement borders, backgrounds, lines, shadows, etc.
• DO NOT use my red, white and blue color scheme!
• Implement multi-column responsive design.

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