General Assembly

In-class lab: Feedr

Wilson Espina

Review

What did we do last lesson?

In-class lab: Feedr

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Familiarise yourself with the API documentation from the APIs list.
  • Fork and clone your starter code.
  • Call APIs and display the data on the Feedr site.
  • Strategise ways to hide the loader and replace the content of the #main container with that of the API.

In-class lab: Feedr

Agenda

  • Project 2 Overview
  • Same Origin Policy
  • Template Literals
  • Project 2 Lab Time

In-class lab: Feedr

Classroom Resources

  • Pull changes from the wilson-espina/jsd-9-resources repo to your computer
  • In your editor, open the following folder: Documents/JSD/jsd-9-resources/13-feedr-lab

In-class lab: Feedr

In-Class Lab: Feedr

In-class lab: Feedr

Same-Origin Policy

In-class lab: Feedr

Cross Origin Request

CORS diagram

In-class lab: Feedr

Cross Origin Request

CORS error ecxample

In-class lab: Feedr

Cross Origin Resource Sharing

Response Header:

Accesss-Control-Allow-Origin: *

In-class lab: Feedr

Template Literals

In-class lab: Feedr

Structure of a Webpage

Venn diagram

In-class lab: Feedr

Model vs View

Model vs View

In-class lab: Feedr

DOM Maniplulation


$resultDiv.text(degCInt + ' C / ' + degFInt + ' F');

In-class lab: Feedr

Template Literals


$resultDiv.text(`${degCInt} C / ${degFInt} F`);

In-class lab: Feedr

Template Literals

Template literals explanation 1

In-class lab: Feedr

Template Literals

Template literals explanation 2

In-class lab: Feedr

Building Template Literals

Template literals steps

Code along

Code Along

Open up: 00-templating-codealong-1

Code Along

In-class lab: Feedr

Building a Template Function

Template function steps

Code along

Code Along

Open up: 01-templating-codealong-2

Code Along

Lab - Templating

Exercise

Type of Exercise

  • Individual

Location

  • starter-code > 02-templating-lab

Timing

8 mins
  1. Follow the instructions for PART 1 and PART 2 in main.js
  2. BONUS: Overwrite Lasagne recipe with data in the favourites object.

In-class lab: Feedr

Feedr Example

Discussion - Feedr Planning

Discussion

Type of Exercise

  • Individual, then pairs

Timing

8 mins
  1. Take a minute or two to decide on your next step for your Feedr project. (It’s okay to have a few possible next steps at this point.)
  2. Share your next step(s) with one or two classmates. If you have different approaches, talk about how you decided on your approach.
  3. Share the list of news sources or API's you’ve selected for your project, and any pseudocode you’ve written, with your group, and discuss.

In-class lab: Feedr

Exercise

Type of Exercise

  • Individual

Location

Timing

until 20:45
  1. Follow the instructions in the Feedr Start code repo.

In-class lab: Feedr

Learning Objective

Learning Objectives

  • Familiarise yourself with the API documentation from the APIs list.
  • Fork and clone your starter code.
  • Strategise ways to hide the loader and replace the content of the #main container with that of the API.

In-class lab: Feedr

Homework

In-class lab: Feedr

Exit Ticket

(Lesson #13)