Using JavaScript in Websites

Table of Contents

• 

  Setup

  00:00:00 - 00:04:21 View Transcript

  Brian introduces the exercise and instructs students to choose photos to add to their image galleries.
• 

  Image Gallery HTML

  00:04:22 - 00:07:34 View Transcript

  Brian begins coding the HTML for the image gallery.
• 

  Image Gallery Styling

  00:07:35 - 00:16:05 View Transcript

  Brian adds CSS to the image gallery to improve its appearance and structure elements on the page.
• 

  Styling Q&A

  00:16:06 - 00:19:05 View Transcript

  Brian fields student questions about the CSS used in the image gallery so far.
• 

  Adding Buttons

  00:19:06 - 00:20:56 View Transcript

  Brian codes the navigation buttons into the image gallery.
• 

  Adding Interaction

  00:20:57 - 00:25:03 View Transcript

  Brian sets up the file to accept JavaScript and explains how a browser loads style and script resources.
• 

  Next Button

  00:25:04 - 00:31:13 View Transcript

  Brian codes the next button to allow the user to progress forward in the image gallery.
• 

  Edge Case

  00:31:14 - 00:35:00 View Transcript

  Brian codes the logic to disable the next button when the user reaches the last item in the gallery.
• 

  Previous Button

  00:35:01 - 00:38:19 View Transcript

  Brian codes the previous button to work similarly to the next button, going in the opposite direction.
• 

  Image Gallery Q&A

  00:38:20 - 00:40:06 View Transcript

  Brian answers a student question about the add method.
• 

  Image Gallery Review

  00:40:07 - 00:40:57 View Transcript

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

• 

  Third-Party Libraries

  00:40:58 - 00:43:11 View Transcript

  Brian explains how third-party libraries can be a useful tool for developers.
• 

  Swiper Gallery

  00:43:12 - 00:49:42 View Transcript

  Brian teaches how to implement the third-party library Swiper by following documentation.
• 

  Swiper Gallery HTML

  00:49:43 - 00:53:45 View Transcript

  Brian codes the HTML for the image gallery using the Swiper documentation as a guide, reviewing link and script tag placement.
• 

  Swiper Gallery JavaScript

  00:53:46 - 00:58:29 View Transcript

  Brian begins implementing the JavaScript for the Swiper gallery.
• 

  Swiper Gallery Buttons

  00:58:30 - 01:05:50 View Transcript

  Brian codes the Swiper buttons and demonstrates some of the capabilities of the newly created gallery.
• 

  Exploring Documentation

  01:05:51 - 01:13:13 View Transcript

  Brian explores the Swiper API, adding features to the gallery based on the documentation.
• 

  Popmotion

  01:13:14 - 01:20:34 View Transcript

  Brian introduces the Popmotion library and begins to set up the HTML and CSS to implement an animation.
• 

  Implementing Popmotion

  01:20:35 - 01:24:49 View Transcript

  Brian implements the spring animation from the Popmotion library.
• 

  Debugging Popmotion

  01:24:50 - 01:30:42 View Transcript

  Brian debugs an overlap issue in Chrome. A point is made about how to approach launching code across browsers.
• 

  Popmotion Functions

  01:30:43 - 01:35:12 View Transcript

  Brian analyzes the behavior of the code used for a few Popmotion functions.
• 

  Portfolio Interaction Challenge

  01:35:13 - 01:37:42 View Transcript

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

• 

  AJAX & JSON

  01:37:43 - 01:43:13 View Transcript

  Brian introduces AJAX and JSON and gives a few ways they are commonly used on the web.
• 

  Requesting from an API

  01:43:14 - 01:49:44 View Transcript

  Brian demonstrates how to request data from an API, using dog.ceo as an example.
• 

  Viewing the Response

  01:49:45 - 01:53:17 View Transcript

  Brian investigates the API response in a browser and defines terminology students may come across.
• 

  Handling the Response

  01:53:18 - 01:59:38 View Transcript

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

• 

  Dog App Exercise

  01:59:39 - 02:02:50 View Transcript

  Brian introduces the exercise, and shows how to construct an animation using CSS.
• 

  CSS Animations

  02:02:51 - 02:12:07 View Transcript

  Brian creates and modifies different types of animations in CSS using the transform and filter properties.
• 

  Loading Spinner

  02:12:08 - 02:15:05 View Transcript

  Brian outlines the timing for starting and stopping the display of the loading spinner.
• 

  Populating the Dropdown

  02:15:06 - 02:25:55 View Transcript

  Brian populates a dropdown list using an array of all of the breeds returned from the API.
• 

  change Event

  02:25:56 - 02:34:46 View Transcript

  Brian walks students through usage of the change event to detect dropdown selections, and lays out a plan fo the rest of the exercise.
• 

  Implementation Review and Q&A

  02:34:47 - 02:37:30 View Transcript

  Brian reviews what the finished application will do and fields a question about strings from the audience.
• 

  Fetching Data Solution

  02:37:31 - 02:45:18 View Transcript

  Brian live codes the solution for retrieving the correct data from the dog.ceo API, and displaying the result to the page.
• 

  Template Strings Q&A

  02:45:19 - 02:48:35 View Transcript

  Brian goes into further detail about how template strings can be used in JavaScript.
• 

  Loading Spinner Solution

  02:48:36 - 02:54:54 View Transcript

  Brian codes a spinning dog emoji into the webpage that appears while the dog photo is loading.
• 

  Load Event Solution

  02:54:55 - 02:59:23 View Transcript

  Brian modifies the loading spinner functionality to display the spinner until the moment the image has loaded.
• 

  Additional Suggestions and Q&A

  02:59:24 - 03:03:12 View Transcript

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