Complete Modern JavaScript Firebase BootCamp the beginner

The HTML DOM document object is the owner of all other objects in your web page. We will talk about the properties and methods can be used on HTML documents

In this lecture, we will talk about document classList, classNames, DOM Token List and also scripts

In this lecture, we will talk about using document.getElementById to get the single element. Then we use it to change the style and the text.

In this lecture, we are going to use the querySelector to select single element to do manipulation

In this part, we will talk about the javascript child nodes. By using this , we are going to add the custom id to the element.

In JavaScript, we can select different elements or nodes , like their children, parent and siblings

In this part, we are going to create new list by using Javascript createElement method

In this part, we are going to use Javascript replaceChild to replace the old element with new element

In JavaScript, we can add event listener to the element. We can also check the element object by using event.target. Use clientX clientY, offsetX and offsetY to check the coordinates.

Javascript has mouse event, in this lecture, we will talk about the difference between mouseover, mouseenter, mouseleave and mouseout

Javascript has another set of mouse event, in this lecture, we will talk about the click, dblclick, mousedown, mouseup, mousemove

In this lecture, we will talk about JavaScript keyboard events like keypress, keydown and keyup differences

In this lecture, we will talk about JavaScript keyboard events like cut, copy, paste, input, focus, blur

In this lecture, we will talk about JavaScript other events like onchange and submit

In this lecture, we will introduce the event bubbling and event stop propagation

In JavaScript, there are localStorage and sessionStorage, in this lecture, we will talk about what is the difference between these two, how to store and get the items from these storages

In this lecture, we will talk about how to stringify a JSON array and parse the string back to JSON array.

In this lecture we will look at the constructor function and "this" keyword in JavaScript

In this lecture, we will add a function to the constructor to calculate the age

In JavaScript, actually there are some built in constructors. In this lecture, we will discuss these and also the difference between the  == and ===

In this lecture, we will demonstrate other JavaScript constructors

In this lecture, we will talk about why we need to use JavaScript prototype instead of just adding the function directly inside  the constructor.

Here we will show the use of hasOwnProperty of JavaScript

In this lecture, we demonstrate the use of Object.create to create an object

es6 classes formalise the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes.

ES6 allows for inheritance, where one class uses another as a base, and then extends it by adding more features of its own. In this lecture, you will learn inherit properties by using subclasses

In this lecture, we will talk about how to use the xhr object to get the data from a text file.

The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. An XHR client exists in different states and we will discuss in this lecture

In this lecture, we will use the xhr to get the json object

In this part, we will use xhr to get json array

In this part, we will use the xhr to get the remote data

In this part, we will learn how to create asychronous function by adding a callback function. But first, we will demonstrate the problem of synchronous function

In this part, we will create our own http library to fetch the data

In this part, we will modify the http library such that it can pop up an error when there is error occur

In this part , we continue to create the post, put and delete request

In this part, we will convert the previous project from using callback function to using JavaScript es6 promises

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the text file

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the json file

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the remote data

Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax

In the previous lecture, we already introduce the arrow function, so now we convert the old project by using arrow functions

This part we will use fetch api to create the custom http library

In this part we will talk about async await. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

In this part, we will apply the async await that we just learnt to modify the http library.

Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on try and catch

Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on finally and throw. In addition, we will talk about different types of errors.

In this project, we will apply the JavaScript regular expression that we just learnt. First, we need to create the form with the use of Bootstrap.

While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative. In this lecture, we will talk about both

Symbol is a primitive data type of JavaScript which is newly introduced in es6

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The Map object holds key-value pairs and remembers the original insertion order of the keys. Let's explore how we can work around them.

We can also loop through the map object directly or  convert the map object into an array. Let's explore how we can do it.

Set objects are collections of values. You can iterate through the elements of a set in insertion order. Let's explore it in this lecture.

In this lecture , we will implement our own JavaScript module pattern using an IIFE.

Singleton pattern is a software design pattern that restricts the instantiation of a class to one "single" instance. In this lecture , we will implement our own JavaScript singleton pattern.

A Factory Pattern or Factory Method Pattern says that just define an interface or abstract class for creating an object but let the subclasses decide which class to instantiate. Let's learn more about it in this lecture.

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. Let's dive into that in this lecture.

Mediator pattern defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program's running behavior. I will describe how it work in this lecture.

The state pattern is a behavioral software design pattern that allows an object to alter its behavior when its internal state changes. This pattern is close to the concept of finite-state machines.

In this lecture, we will just focus on building the UI of the todo list

In this part we will learn how to set up Cloud Firestore, add data, connect firestore to your JavaScript project

The firebase firestore can detect different type of document changes, like removed, added and also modified, we will handle these different cases.

Since we will use firebase auth, so we also need to add buttons for login, logout and signup. Let's modify together now.

In this part, we will go to setup the authentication in firebase, then we back to our web and create a form to let the user to signup to the firebase backend.

In this part, we will create the login and logout function for this todo app.