Today’s topics

• The next task is to start working with fetch and AJAX.
  • Using JSON for data
  • Basics of HTTP requests
  • Make GET requests with Insomnia client
  • Make GET requests using the Fetch API and display response data on a page

🎯 Project: MyTunes

You will build a clone of iTunes using the iTunes API. It will be due Thursday morning.

• Assignment Invitation

🔖 Resources

HTTP

• MDN: HTTP Messages
• Response Codes With Cats

APIs

• Illustrated Dev: Meet the Robowaiter APIs Serving Us Data
• Insomnia client
• GitHub API Docs

AJAX, Fetch, & JSON

• MDN AJAX
• MDN Fetch API
• MDN fetch() method
• CSS-Tricks article on using Fetch
• MDN Working with JSON
• Code Academy Lesson on Fetch
• AJAX explained by analogy

⭐ EXTRA/TMI

Fetch requests use JavaScript promises to handle responses. Promises are a much bigger topic than we will get into right now, but if you want to know more about what a promise is and how to use it beyond the context of AJAX requests, you can start with the MDN documentation about it.

• MDN JS Promise

🦉 Notes

• Notes on AJAX

Today’s topics

• Introduction to the object data structure in JavaScript
• Storing data in and retrieving data from objects
• Using DOM manipulation to render data from objects on the page

🎯 Project: Build a customer directory

• Customer Database Link to assignment invitation
  • We will be working on this assignment as teams in class.
• ➡️ Continue to preview the next topic, Asynchronous JavaScript and the Fetch API, by completing this section in Thinkific. We will use what we are learning about objects to handle the data we get back from our fetch() requests.

Examples

• JS Objects Exercise from class
• JS Objects with The Simpsons
• Mari Edwards Video on Objects

🔖 Resources

• MDN JavaScript Object Basics
• Eloquent JavaScript, chapter 4: Objects and Arrays
• Eloquent JavaScript Objectos enm Español
• blog post on JS objects
• Prettier Code Formatter This is information about the extenstion that you can (and should) install in VS Code.
• How to format code with Prettier

⭐ EXTRA/TMI

• Podcast on learning to code with the founder of Code Newbie, Saron Yitbarek
• Rebecca Murphey on using objects to write more concise code (short video)
• Lodash - This is a JS utility library – lots of handy little functions that can make it easier to do common things
• Moment.js - This is a very commonly used library for working with dates in JS. It’s big and kind of old, but handy for reformatting how dates are displayed. You could also check out modern alternatives like Luxon or date-fns.

🦉 Code, Notes & Videos

• Notes on JS objects
• Example of a basic working calculator - This is just one way you can do this!
• Example: working with JS object data and the DOM

Today’s topics

• Calculator Wrap Up
• Pre-work for next week
  • Thinkific Unit JS and the Fetch API

🎯 Project for the week: JavaScript Calculator

Part 2: Due 4pm Today, July 28

Directions.

🔖 Resources to use as reference on Fetch

• MDN AJAX
• MDN Fetch API
• MDN fetch() method
• CSS-Tricks article on using Fetch
• MDN Working with JSON
• Code Academy Lesson on Fetch
• AJAX explained by analogy

⭐️ EXTRA/TMI

This resource is really not at all necessary to understand or do the project, but if you want to know more about the concept of tree structures in computer science, check out this piece from Vaidehi Joshi’s BaseCS blog series. She is awesome! There is also a thoroughly delightful accompanying BaseCS podcast with the equally amazing Saron Yitbarek.

• BaseCS blog series: How Not to be Stumped by Trees

And here is more info about what is happening when a browser renders a page – very enlightening, although not strictly necessary at this stage:

• About the browser rendering engine
• How browser rendering works

This is a good explanation about how JS events “bubble” up the chain of elements on the page:

• JS Event Bubbling and Capturing

If you would like to know more about the JavaScript Event Loop and how it works, I highly recommend this resource. Don’t miss the video of the conference talk that goes along with it – it’s excellent:

• Loupe: Visualizing the JS Event Loop

Today’s topics

• Continue with more examples of:
  • DOM manipulation with JS
  • Events in JS
• Work on Calculator Project
• Event Delegation
• In-class practice CodePen to fork

🎯 Project for the week: JavaScript Calculator

Part 2: Due 4pm Thursday, July 28

When you complete part 1, continue to part 2. Continue in the same repository as part 1, nothing additional to clone for part 2. here.

🐈 Events 🐶

• Use the notes) and the example from class as a guide.
• Pig Game Example

🔖 Resources to use as reference

• DOM Manipulation with Vanilla JS
• How JS Event Delegation Works
• Chapters 13-15 of Eloquent JavaScript

⭐️ EXTRA/TMI

This resource is really not at all necessary to understand or do the project, but if you want to know more about the concept of tree structures in computer science, check out this piece from Vaidehi Joshi’s BaseCS blog series. She is awesome! There is also a thoroughly delightful accompanying BaseCS podcast with the equally amazing Saron Yitbarek.

• BaseCS blog series: How Not to be Stumped by Trees

And here is more info about what is happening when a browser renders a page – very enlightening, although not strictly necessary at this stage:

• About the browser rendering engine
• How browser rendering works

This is a good explanation about how JS events “bubble” up the chain of elements on the page:

• JS Event Bubbling and Capturing

If you would like to know more about the JavaScript Event Loop and how it works, I highly recommend this resource. Don’t miss the video of the conference talk that goes along with it – it’s excellent:

• Loupe: Visualizing the JS Event Loop