Today’s topics

• Today’s first goal is to complete the customer database.
• The next task is to prepare to start working with fetch and AJAX tomorrow.
  • 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

✅ Pre-work for before class tomorrow

• Complete Thinkific: JavaScript and the Fetch API
• Complete Code Academy Lesson on Fetch
• Read AJAX explained by analogy

🎯 Project: Choose Your Own Adventure

Your assignment is to do one of the following assignments. Whichever you choose, it will be due on Friday morning.

• 🌶 AJAX GitHub profile
• 🌶🌶 AJAX Currency Converter

🔖 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

⭐ 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
• Starter code for the assignment: using fetch with the Github API

Today’s topics

• Introduction to the object data structure in JavaScript
• Storing data in and retrieving data from objects

🎯 Project: Build a customer directory

Link to assignment invitation For Tuesday Morning, 4/5: Start HTML and get at least one customer rendered on the page

Examples from class that will help you

• JS Objects with The Simpsons
• Find People By City
• Monday afternoon video about objects Access Passcode: t^k8w.US

🔖 Resources

• MDN JavaScript Object Basics
• Eloquent JavaScript, chapter 4: Objects and Arrays
• 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

• Using JS in the browser
• The DOM: the Document Object Model
• DOM manipulation with JS
• Events in JS

🎯 Project: JavaScript Calculator

This assignment is due Monday, April 4.

Link to the assignment invitation for part 1

If you complete part 1, continue to part 2. Continue in the same repository as part 1, nothing additional to clone. You can read the instructions for part 2 here.

🐈 Kittens and Puppies 🐶

• Use the notes) and the example from class as a guide.
• The video from morning class is also available, where we talk about DOM mapipulation. Passcode: .TJ4@Nw@

🔖 Resources to use as reference

• CSS-Tricks: What Is the DOM?
• MDN Introduction to Events
• MDN Element Events -> this is where you can see the events that are defined for elements (like “click” or “mouseover”)
• MDN Event Reference -> this is a huge list of all the available events, useful mainly to get an idea of what’s possible
• 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

🗓️ Today’s topics

• Review what we have seen so far in JS
• Scope and arrow functions
• Get your reps in! Practice and more practice

🎯 Project

More Loop Practice

Examples from morning class Code Academy Loops

👻 Exercism: JavaScript Track

To get some more practice writing JavaScript, we’re going to use an awesome free online tool called Exercism.

Please sign up (you can use your GitHub account) and choose the JavaScript track.

There are two ways to use Exercism: on their site with their online editor or by installng a command line tool and working on the exercises locally. It is much easier to use the online editor, so I recommend that you do that. However, you are welcome to work locally if you want to work through the setup (their documentation is excellent). Here is an overview summarizing the two options for solving exercises.

If your exercises are locked you need to switch from Learning Mode to Practice Mode. Here’s a short video showing you how to do that.

Complete at minimum the first three following exercises in the JavaScript track. For each exercise, make all the tests pass and follow the instructions on Exercism to submit your solution.

1. Hello World (required)
2. TwoFer (required)
3. Raindrops (required)
4. Hamming
5. ResistorColor
6. If you finish those, try any other learning exercise that looks interesting to you!

To submit your homework, paste your solution urls into this form.

⭐ EXTRA/TMI

• Exponentially Easy Selection Sort by Vaidehi Joshi - A lot more about the selection sort algorithm if you’re curious

🔖 Resources

• MDN JS Guide
• JS for Cats If you want a low-key walk through of basics that is full of 😺 😼 😹 🐈‍⬛ 🐈, this is pretty helpful. It’s older so you will see references to the var keyword instead of let or const.

🦉 Code & Notes

• Code examples for passing tests in problem set 2