Using JavaScript in Websites

Making an Image Gallery

• 
  00:00:00 - 00:04:21

  Setup

  Brian introduces the exercise and instructs students to choose photos to add to their image galleries.
• 
  00:04:22 - 00:07:34

  Image Gallery HTML

  Brian begins coding the HTML for the image gallery.
• 
  00:07:35 - 00:16:05

  Image Gallery Styling

  Brian adds CSS to the image gallery to improve its appearance and structure elements on the page.
• 
  00:16:06 - 00:19:05

  Styling Q&A

  Brian fields student questions about the CSS used in the image gallery so far.
• 
  00:19:06 - 00:20:56

  Adding Buttons

  Brian codes the navigation buttons into the image gallery.
• 
  00:20:57 - 00:25:03

  Adding Interaction

  Brian sets up the file to accept JavaScript and explains how a browser loads style and script resources.
• 
  00:25:04 - 00:31:13

  Next Button

  Brian codes the next button to allow the user to progress forward in the image gallery.
• 
  00:31:14 - 00:35:00

  Edge Case

  Brian codes the logic to disable the next button when the user reaches the last item in the gallery.
• 
  00:35:01 - 00:38:19

  Previous Button

  Brian codes the previous button to work similarly to the next button, going in the opposite direction.
• 
  00:38:20 - 00:40:06

  Image Gallery Q&A

  Brian answers a student question about the add method.
• 
  00:40:07 - 00:40:57

  Image Gallery Review

  Brian presents ideas about extra functionality that can be added to the image gallery.

Third-Party Libraries

• 
  00:40:58 - 00:43:11

  Third-Party Libraries

  Brian explains how third-party libraries can be a useful tool for developers.
• 
  00:43:12 - 00:49:42

  Swiper Gallery

  Brian teaches how to implement the third-party library Swiper by following documentation.
• 
  00:49:43 - 00:53:45

  Swiper Gallery HTML

  Brian codes the HTML for the image gallery using the Swiper documentation as a guide, reviewing link and script tag placement.
• 
  00:53:46 - 00:58:29

  Swiper Gallery JavaScript

  Brian begins implementing the JavaScript for the Swiper gallery.
• 
  00:58:30 - 01:05:50

  Swiper Gallery Buttons

  Brian codes the Swiper buttons and demonstrates some of the capabilities of the newly created gallery.
• 
  01:05:51 - 01:13:13

  Exploring Documentation

  Brian explores the Swiper API, adding features to the gallery based on the documentation.
• 
  01:13:14 - 01:20:34

  Popmotion

  Brian introduces the Popmotion library and begins to set up the HTML and CSS to implement an animation.
• 
  01:20:35 - 01:24:49

  Implementing Popmotion

  Brian implements the spring animation from the Popmotion library.
• 
  01:24:50 - 01:30:42

  Debugging Popmotion

  Brian debugs an overlap issue in Chrome. A point is made about how to approach launching code across browsers.
• 
  01:30:43 - 01:35:12

  Popmotion Functions

  Brian analyzes the behavior of the code used for a few Popmotion functions.
• 
  01:35:13 - 01:37:42

  Portfolio Interaction Challenge

  Brian challenges students to add an element of interactivity to their current portfolios and then makes a change to the Popmotion animation.

AJAX

• 
  01:37:43 - 01:43:13

  AJAX & JSON

  Brian introduces AJAX and JSON and gives a few ways they are commonly used on the web.
• 
  01:43:14 - 01:49:44

  Requesting from an API

  Brian demonstrates how to request data from an API, using dog.ceo as an example.
• 
  01:49:45 - 01:53:17

  Viewing the Response

  Brian investigates the API response in a browser and defines terminology students may come across.
• 
  01:53:18 - 01:59:38

  Handling the Response

  Brian verifies the response from the API, then handles the data using JavaScript.

Dog App

• 
  01:59:39 - 02:02:50

  Dog App Exercise

  Brian introduces the exercise, and shows how to construct an animation using CSS.
• 
  02:02:51 - 02:12:07

  CSS Animations

  Brian creates and modifies different types of animations in CSS using the transform and filter properties.
• 
  02:12:08 - 02:15:05

  Loading Spinner

  Brian outlines the timing for starting and stopping the display of the loading spinner.
• 
  02:15:06 - 02:25:55

  Populating the Dropdown

  Brian populates a dropdown list using an array of all of the breeds returned from the API.
• 
  02:25:56 - 02:34:46

  change Event

  Brian walks students through usage of the change event to detect dropdown selections, and lays out a plan fo the rest of the exercise.
• 
  02:34:47 - 02:37:30

  Implementation Review and Q&A

  Brian reviews what the finished application will do and fields a question about strings from the audience.
• 
  02:37:31 - 02:45:18

  Fetching Data Solution

  Brian live codes the solution for retrieving the correct data from the dog.ceo API, and displaying the result to the page.
• 
  02:45:19 - 02:48:35

  Template Strings Q&A

  Brian goes into further detail about how template strings can be used in JavaScript.
• 
  02:48:36 - 02:54:54

  Loading Spinner Solution

  Brian codes a spinning dog emoji into the webpage that appears while the dog photo is loading.
• 
  02:54:55 - 02:59:23

  Load Event Solution

  Brian modifies the loading spinner functionality to display the spinner until the moment the image has loaded.
• 
  02:59:24 - 03:03:12

  Additional Suggestions and Q&A

  Brian offers additional suggestions for the Dog App, discusses semicolon usage, and answers a question about setting styles using JavaScript.