Table of Contents
Document Object ModelAnjana walks through what an HTML document looks like by drawing out a tree of HTML elements and briefly discussing the elements contained in the provided example.
Finding Elements in a Web PageAnjana demonstrates how to use the web browser's inspect tool to find specific HTML elements and their contents on a webpage. Discussions regarding using various selector syntaxes, including querySelector, getElementsByTagName, and querySelectorAll to query for particular details, are also covered in this segment.
.length & .textContentAnjana discusses getting the number of matching elements using the .length selector and the text contained in an element using .textContent Student questions regarding the difference between an HTML collection and a node list and why it is .length and not .count are also covered in this segment.
Finding Elements ExerciseAnjana walks through an exercise using console commands to find all the p elements, the text "X," the number of squares on the board, and the text "A game you know."
Changing a Web Page ExerciseAnjana walks through an exercise of using the console to edit the webpage HTML. This exercise includes changing the player names, swapping the player symbols, and changing the subtitle to "A game you know and love."
Values & Data Types
StringsAnjana discusses the data type string, what strings are composed of, how to determine the length of a string, and demonstrates how characters are organized in a string.
IndexAnjana demonstrates searching for the first occurrence of a specified string, substring, or character using the indexOf method. Also covered in this segment are includes, startsWith, toLowerCase, and how to combine two strings.
Working with Strings ExerciseAnjana provides an exercise to practice inserting strings, searching for the first occurrence of a character, searching for the existence of a string in a document, and manipulating the case of strings.
Operators ExerciseAnjana provides an exercise to practice using arithmetic operators, including, addition, subtraction, multiplication, and division.
const & Accessing VariablesAnjana briefly discusses the difference between the const and let keywords, how to utilize a variable, and demonstrates various naming conventions for variables.
Variables ExerciseAnjana provides an exercise to practice declaring and assigning variables and discusses a student's question regarding the difference between the let, const, and var keywords. Students are instructed to declare and assign variables to remember their name, the combined age of their parents, and the #board element on the Tic Tac Toe page.
ArraysAnjana demonstrates how items are arranged in an array, the array index, finding the .length of an array, and how to check if an array contains a specific value. Replacing, removing, and appending array items are also demonstrated in this segment.
Useful Array MethodsAnjana demonstrates some practical array methods, including sort, join, and concat. A demonstration of the push method is also provided in this segment.
MutabilityAnjana discusses mutable and immutable data and demonstrates actions that mutate and do not mutate data. Some actions "mutate" an array while others do not mutate the original array but instead create a new copy.
Mutable & Immutable Data ExerciseAnjana provides some exercises to practice determining which actions will and will not mutate data.
Immutable Variables & ValuesAnjana demonstrates the interactions between an immutable variable with a mutable value. Using immutable data and variables is best to avoid errors caused by unintentional data mutations.
Variables & ArraysAnjana discusses student questions regarding what happens when declared variables point towards arrays and if arrays should be declared using const or let.
Objects ExerciseAnjana provides an exercise to practice creating objects and adding properties. A student's question regarding creating sub-objects within objects is also covered in this segment.
Object MethodsAnjana discusses properties on objects that point to functions, also known as methods, and briefly discusses the .this method. Nested objects and objects in arrays and objects are also demonstrated in this segment.
Object Methods ExerciseAnjana provides an exercise to practice retrieving data from objects. Students are instructed to retrieve "Girl Power", the object representing Ginger Spice, "Spiceworld", and "Victoria" from the spiceGirls object.
Tic Tac Toe DemoAnjana walks through playing a tic tac toe game using the material covered thus far. Creating a players array that contains objects for each player with the player's name, symbol (X or O), and score (0 initially), displaying each player's name in the appropriate element on the page, and playing the game by placing symbols on the board are all covered in this segment.
Declaring & Assigning a VariableAnjana walks through the second TODO task of the DOM exercise, declaring and assigning a variable called fact. The fact variable is a constant object containing the properties fact, answer, and explanation.
Setting Statement ElementAnjana live codes the third TODO task of the DOM exercise, setting the text of the statement element to the fact statement.
Quiz Project Functions
Functions, Parameters, & ArgumentsAnjana discusses declaring and calling functions, the difference between function parameters and arguments, and what happens when a function receives an incorrect argument. A function's parameters are the expected inputs, while the arguments are the actual values the function is called with.
Function Return ValuesAnjana demonstrates specifying the output value of a function in a return statement and what happens when there is no return. A student's question regarding if a return statement functions similarly to console.log is also covered in this segment.
Creating Functions ExerciseAnjana provides an exercise to practice declaring functions and walks through the solution to each function. Students are instructed to declare three functions: multiply, given two numbers, return their product; yell, given a lowercase string, log it in all caps to the console; and longerThan, given two arrays, return whether the first is longer than the second.
Arrow FunctionsAnjana discusses creating unnamed functions using the arrow syntax to declare the function. More complicated arrow functions can be made by utilizing curly braces to define a function body, but a return statement is still required.
Arrow Functions ExerciseAnjana provides an exercise to practice writing arrow functions by refactoring the previously written functions in the creating functions exercise as arrow functions.
Quiz Project Disable & Enable SolutionAnjana walks through the solution to TODO number four of declaring functions that disable or enable a button.
Quiz Project isCorrect SolutionAnjana walks through the solution to TODO number five of declaring an isCorrect(guess) function that compares the given argument string to the previously defined fact's answer string.
Boolean Q&AAnjana answers a student's question regarding how fact.answer works since it compares a string to a boolean and demonstrates how to convert a non-string value into a string using toString.
let & ScopeAnjana demonstrates the ability to allow variables from a narrower scope to be accessed in a broader scope using the let keyword. A student's question regarding how the scope changed when strings are immutable is also covered in this segment.
var vs letAnjana discusses the differences between the var and let keywords. The var statement declares a function-scoped or globally-scoped variable while the let declaration declares a block-scoped local variable.
Events & Handlers
Event ListenersAnjana provides a brief overview of the quiz project and discusses detecting events on the DOM with the method .addEventListener. The event listener method takes in two parameters, the name of the event being listened for and a handler function to run when that event is detected.
Event ObjectAnjana demonstrates the properties contained within the event object and how they are used to describe the event that occurred. Events are fired to notify code of "interesting changes" that may affect code execution.
Events ExerciseAnjana provides an exercise to practice adding event listeners in the console and walks through the solutions. The events click, mouseover, and mouseout are demonstrated in this segment.
ConditionalsAnjana demonstrates using if and else statements to execute code only under the specified conditions. The if statement executes a statement if a specified condition is truthy; if it evaluates to falsy, the else clause will instead be executed.
Conditionals ExerciseAnjana provides an exercise to practice writing conditional statements and walks through the solutions. Students are instructed to write a conditional that logs whether first name or last name is longer, a function isEmpty(array) that returns whether a given array is empty or not, and a conditional that returns whether an empty array is truthy or falsy.
Logical & Ternary OperatorsAnjana demonstrates using the logical operators and, or, and not to expand the flexibility of boolean conditional statements. A demonstration of using ternary operators to quickly write boolean conditionals is also provided in this segment.
LoopsAnjana demonstrates how to iterate over a function multiple times while only running a single statement using loops. The += and ++ increment operators and the for and for of loops are covered in this segment.
Explanation Loop Project ExerciseAnjana walks through TODO six of the quiz project. Students are instructed to create a for loop to attach an event handler and add the statement text to the appropriate div on the page.
Disable Loop Project ExerciseAnjana walks through TODO seven of the quiz project, where students are instructed to create another for loop that disables all of the buttons when one is clicked.
isCorrect Project ExerciseAnjana walks through TODO eight of the quiz project, where students are instructed to retrieve the guessed value from the clicked button, compare the guess to the answer, and apply the correct or incorrect class accordingly.
Map & Filter
map & filterAnjana demonstrates using the filter method to process an array for specified data and the map method to call a function on each item and create a new array.
map & filter ExerciseAnjana live codes an exercise to practice mapping and filtering through an array. This example creates new arrays, including a new "name" array and an array for just nicknames that end in y.
SpreadAnjana demonstrates inserting all of the items from one array into another using the spread operator. Instead of looping over an array for each item, the spread operator can also be used.
Doggos Quiz Game
Doggos Quiz Game SetupAnjana discusses the next project for this course, a guess the dog breed quiz. Setup instructions are also provided in this segment.
while LoopsAnjana demonstrates using while loops to run a section of code repeatedly until a defined condition is true. The while loop can be dangerous; if the given condition is always true, a never-ending loop is created that will break the browser.
Doggo Quiz while ExerciseAnjana provides an exercise to practice creating while loops by completing TODO number one for the doggo quiz. Students are instructed to use a while loop and the getRandomElement function to create an array with several choices, including the correct answer.
Doggo Quiz while SolutionAnjana walks through the solution to the doggo quiz while exercise. Implementing both the random item and shuffle utility functions are covered in this segment.
Doggo Quiz while ReviewAnjana inserts the correct function argument and demonstrates the resulting code from the doggo quiz while exercise.
setTimeoutAnjana discusses creating an asynchronous function by setting a task to a to-do list by running it in a setTimeout function. Asynchronous refers to code that allows a program to have a task be performed alongside the original task (or tasks) without stopping to wait for the task to complete.
Data Fetching & Promises
APIs & fetchAnjana discusses using the fetch function to load data from an API endpoint on the internet. If the request is successful, the API will respond with data contained in a JSON object.
Working with PromisesAnjana discusses the states of a promise, including pending, fulfilled, and rejected. A student's question regarding if promises are only seen with API called is also covered in this segment.
Destructuring Objects & ArraysAnjana discusses destructuring as a method to declare multiple variables at once by retrieving the values from the parent object. Altering the destructuring syntax to use square brackets allows the destructuring of arrays.
Destructuring ExerciseStudents are instructed to follow TODO number two of the doggo quiz project and complete the getBreedFromURL function with destructuring and the .string() method.
Destructuring Solution: Return BreedAnjana walks through the solution to returning the unformatted breed name from the given URL.
Destructuring Solution: Format StringAnjana walks through the solution to appropriately formatting the returned breed name using the .split() method. Brief demonstrations of the .reverse() and .trim() methods are also provided in this segment.
Async FunctionsAnjana demonstrates combining async fetching and parsing the resulting code into a single function to create an async function. The async function also needs to be awaited to retrieve the contents of the returned promise.
Adding Choice Buttons ExerciseStudents are instructed to complete TODO number four of the doggo fetch project. Create a button element for each choice in the choicesArray, attach a click event listener with the buttonHandler function, and append the button as a child of the options element.
Adding Choice Buttons SolutionAnjana walks through the solution to the adding choice buttons exercise.
Render Quiz ExerciseAnjana provides an exercise to practice asynchronously calling functions and using the returned imageUrl, correctAnswer, and choices data to render the completed quiz page. This exercise completes the TODO number 5 for the doggo fetch project.
Modules Q&AAnjana answers student questions regarding if only utility functions are imported, importing modules on the internet compared to locally, and recommendations for where to start breaking a webpage into modules. Resources to look into after this course are also provided in this segment.
DebuggingAnjana discusses methods to go about debugging and how to provide more information on bugs and errors using console.log, .warn(), .error(), and the console's debugger.
Browser DebuggerAnjana demonstrates using the browser's built-in debugger, including showing multiple ways of setting breakpoints to assist in finding errors.
try catch Error HandlingAnjana demonstrates error handling using try catch blocks to be aware of potential errors and then manage them if they occur.