classList and className | CodingAddict

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Javascript

Course Kickoff

Intro (0:29)
Javascript Info (2:34)
Course Goals (1:43)
Course Structure (2:16)
Course Resources
Useful Info
Q&A

Visual Studio Code and Google Chrome

Intro (1:00)
Install Google Chrome (3:10)
Install VS-Code (1:49)
VS-Code Overview (3:56)
Install Live-Preview (3:38)
Install Prettier (2:58)
Emmet (3:37)
My Setup (1:04)

Javascript Fundamentals

Javascript Tutorial Continued

Connecting the Dots (0:24)
String Properties and Methods (16:35)
Template Literals (6:10)
Strings Challenge (7:14)
Array Properties and Methods (11:51)
Exercise - Full Name (10:13)
Exercise - Calculate Total (14:40)
Value vs Reference (5:51)
Null and Undefined (2:16)
Truthy and Falsy (4:34)
Ternary Operator (4:16)
Global Scope (7:25)
Local Scope (7:02)
Variable Lookup (6:52)
Callback Functions, Higher Order Functions (15:07)
Array Iterators (2:22)
forEach (9:44)
map (10:43)
filter (3:55)
find (8:30)
reduce (9:49)
Array Challenge - Intro (1:00)
Array Challenge - Setup Data (3:43)
Array Challenge - Multiple Files (6:15)
Array Challenge - Map (4:49)
Array Challenge - Filter (3:30)
Array Challenge - Filter Alternative Syntax (4:09)
Array Challenge - Find (3:59)
Array Challenge - Reduce #1 (5:51)
Square Bracket Notation (3:22)
Array Challenge - Reduce #2 (6:05)
Math Object (8:33)
Date Object (9:18)

DOM

DOM - Intro (2:39)
DOM - General Concepts (8:40)
Window and Document Overview (4:15)
getElementById (6:51)
getElementsByTagName (8:21)
getElementsByClassName (1:57)
querySelector and querySelectorAll (7:29)
Navigate the DOM - Children (4:54)
Navigate the DOM - parentElement (3:06)
Navigate the DOM - nextSibling, previousSibling (4:28)
Navigate the DOM - nextElementSibling, previousElementSibling (1:15)
textContent and nodeValue (2:57)
getAttribute() and setAttribute() (8:09)
classList and className (9:28)
createElement, createTextNode, appendChild (8:09)
insertBefore (3:43)
replaceChild (2:23)
prepend, innerText (3:10)
remove, removeChild (4:52)
innerHTML, textContent (8:24)
Change CSS with Style Property (5:07)
Events Overview (1:53)
Click Event (7:24)
Function Reference (4:51)
Mouse Events (5:17)
Key Events (4:14)
Event Object (10:48)
currentTarget, target (7:33)
Event Propagation, Bubbling, Capturing (10:39)
Event Propagation Example (7:31)
Forms (5:48)
Local Storage (9:22)
Local Storage with Multiple Values (9:05)
setTimeout (9:36)
setInterval (3:22)
Events - "DOMContentLoaded" (6:07)
Events - "load" (6:10)
Events - "scroll" (2:48)
Width, Height, GetBoundingClientRect (7:09)
Events - "resize" (1:07)

DOM Projects

Intro (1:17)
Starter Project
Setup (4:11)
Color Flipper - HTML (4:10)
Color Flipper - JS (8:58)
Color Flipper - Hex (10:16)
Counter - HTML (2:25)
Counter - JS (11:14)
Reviews - HTML (4:45)
Reviews - JS (22:40)
Navbar - HTML (2:48)
Navbar General Concepts (4:08)
Navbar - JS (7:56)
Sidebar - HTML (3:44)
Sidebar Manual Setup (3:07)
Sidebar - JS (5:51)
Modal - HTML (3:39)
Modal - Challenge (2:42)
Modal - JS (3:02)
Questions - HTML (7:14)
Questions - General Concepts (2:54)
Questions - Traversing the DOM (7:32)
Questions - Using Selectors Inside the Element (10:20)
Menu - HTML (6:56)
Menu - Display Items When Page Loads (14:39)
Menu - Refactor (3:12)
Menu - Filter Buttons HTML (1:57)
Menu - Filter Buttons JS (11:42)
Menu - Dynamic Filter Buttons (4:01)
Menu - Unique Categories (7:29)
Menu - Dynamic Filter Buttons Complete (9:40)
Video - Intro (1:12)
Video - HTML (2:44)
Video - Overlay Setup (2:42)
Video - JS (4:59)
Video - Preloader (4:51)
Scroll - Intro (3:31)
Scroll - HTML (10:37)
Scroll - Setup Date (2:11)
Scroll - Toggle Simple Setup (6:17)
Scroll - Toggle Dynamic Setup (10:44)
Scroll - Fixed Navbar (8:50)
Scroll - Smooth Scroll Setup (10:23)
Scroll - Smooth Scroll Complete (10:53)
Tabs - HTML (11:42)
Tabs - JS (10:56)
Countdown - HTML (5:53)
Countdown - Set Date (19:51)
Countdown - Calculate Remaining Time (27:47)
Countdown - Time From Now (4:10)
Lorem Ipsum - HTML (4:26)
Lorem Ipsum - JS (17:20)
Grocery Bud - Intro (3:22)
Grocery Bud - HTML (5:09)
Grocery Bud - Select Elements (3:13)
Grocery Bud - Add Item Setup (7:26)
Grocery Bud - "Truthy" Shortcut (3:32)
Grocery Bud - Display Alert (5:29)
Grocery Bud - Add Item Complete (8:49)
Grocery Bud - Set Back To Default (2:34)
Grocery Bud - Clear Items (6:54)
Grocery Bud - Select Edit and Delete Buttons (7:23)
Grocery Bud - Delete Item (7:18)
Grocery Bud - Edit Item (11:16)
Grocery Bud - Local Storage Info (4:25)
Grocery Bud - Add To Local Storage (8:38)
Grocery Bud - Remove From Local Storage (5:39)
Grocery Bud - Edit Local Storage (4:47)
Grocery Bud - Load Items From Local Storage (6:49)
Slider - Intro (1:29)
Slider - HTML (3:34)
Slider - General Concepts (5:14)
Slider - JS Setup (3:27)
Slider - Slides Approach (6:07)
Slider - Button Approach (2:48)

Deployment

Netlify Intro (1:08)
Drag and Drop Option (3:32)
Continuous Deployment (8:02)

Objects

Intro (2:10)
Object Basics (6:13)
Nested Objects, Bracket Notation (11:59)
'this' - Keyword Basics (8:20)
'this' - Keyword Advanced (7:10)
Factory Functions (6:42)
Constructor Functions (7:48)
Constructor Property (4:51)
Prototype Property (9:58)
Property Lookup (5:45)
ES6 Class Syntax (12:14)
Call (9:42)
Apply Arguments (5:42)
Bind (2:15)
Button Example (8:48)

OOP Projects

Intro (2:10)
Setup (1:47)
Counter - HTML (3:10)
Counter - Initial Setup (7:56)
Counter - Select Elements (5:13)
Counter - Functions (4:05)
Counter - Complete (5:43)
Counter - Class Refactor (3:43)
Gallery - Intro (1:08)
Gallery - HTML (9:25)
Gallery - Select Elements (6:37)
Gallery - Open Modal Setup (12:10)
Gallery - Open Modal Complete (12:06)
Gallery - Close Modal (6:31)
Gallery - Prev and Next (5:22)
Gallery - Select Images (5:31)
Gallery - Class Refactor (0:39)

Functions

Intro (0:18)
IFFE (8:59)
Hoisting (6:26)
Closure (8:28)
Closure - Basic Example (3:53)
Closure - Complete Example (8:53)

ES6

ES6 Module Intro (2:20)
VAR, LET, CONST (6:07)
Function Scope and Block Scope (10:18)
Template Strings (3:43)
Template Strings - HTML (5:26)
Tagged Template Literals (11:08)
Arrow Functions - Basics (14:16)
Arrow Functions - Objects and "this" (6:55)
Arrow Functions - Select Element and "this" (4:47)
Default Parameters and Hoisting Gotchas (3:50)
Array Destructuring (5:24)
Swap Variables (2:39)
Object Destructuring (5:03)
Destructuring Function Parameters (3:01)
New String Methods (7:32)
"for of" - Loop (3:59)
Spread Operator - Basics (5:27)
Spread Operator - Objects (3:01)
Spread Operator - DOM Elements (3:27)
Spread Operator - Function Arguments (3:38)
Rest Operator (10:37)
Array.of (2:06)
Array.from - Strings and Arguments Object (4:34)
Array.from - DOM Elements (NodeList) (7:00)
find, findIndex, every, some (8:59)
"for in" - loop (1:44)
Object.keys() (1:15)
Object.values() (0:26)
Object.entries() (4:41)
new Set() - General Overview (4:21)
new Set() - Use Case (6:02)
String - includes() (5:31)
Array - includes() (3:08)
Important Info (1:22)

ES6 - Projects

Projects - Intro (0:40)

Numbers Project

Intro (0:23)
Setup (0:36)
Readme (0:50)
HTML Structure (3:09)
Select Elemetns (4:25)
Initial Variables (3:20)
Complete (6:55)

Dark Mode Project

Intro (0:59)
Setup (0:27)
HTML Structure (3:42)
Toggle CSS (7:09)
Important Data (3:26)
Render Items (4:22)
Moment.js (6:21)

Filters Project

Intro (1:48)
HTML Structure (6:47)
Display Products (7:59)
Text Filter (9:40)
Let and Original Array (4:40)
Empty Array (3:27)
Display Buttons (6:12)
Buttons Filter (5:36)

Modules

Intro (2:31)
Setup (6:47)
Named Export (5:54)
Default Export (8:48)
Get Element (8:54)

Async Javascript

Intro (0:54)
Synchronous (3:33)
Recipe Example (4:54)
Asynchronous (12:21)
Callback Hell (10:44)
Callback Hell - DOM Example (10:25)
Promises (10:45)
Important Unsplash API update !!!
Reject Example (20:05)
Promises - DOM Example (13:32)
Async/Await (12:58)

AJAX

Intro (1:06)
AJAX, HTTP, API (4:32)
Simple Text (26:33)
Add Button (5:15)
JSON (16:56)
Fetch (9:59)
Fetch - Errors "gotcha" (2:02)
Fetch - Big Picture (1:55)
Fetch with Function (6:35)
Fetch with async/await (4:34)
Try / Catch (5:00)

AJAX Projects

AJAX Projects - Intro (1:03)

Dad Jokes - Project

Intro (0:10)
HTML Structure (1:37)
API Fundamentals (3:29)
Docs (4:50)
Select Elements (1:40)
Fetch Random Joke (8:39)
Loading (1:58)
Try / Catch (1:48)
Throw New Error (6:28)

Products - Project

Intro (0:33)
HTML Structure (7:39)
Possible AJAX States (4:01)
API Docs (3:28)
Fetch Products (3:34)
Loading and Error (3:50)
Start Function (5:03)
Display Products (11:57)
Query Params (5:47)
Single Product HTML (5:25)
Initial Logic (4:31)
Fetch Product (8:04)
Display Single Product (5:38)
Display Colors (3:06)

Random User - Project

Intro (1:18)
HTML (10:06)
API (4:44)
Select Elements (14:37)
Fetch User (20:46)
Display User (18:28)

Cocktails - Project

Intro (1:14)
Setup (2:51)
HTML (9:49)
API (7:36)
Present Drinks (5:35)
Fetch Drinks (5:08)
Display Drinks (16:08)
Search Form (10:26)
Loading (6:57)
Set Drink (14:43)
Single Drink HTML (3:34)
Single Drink (10:40)
Display Single Drink (11:28)

Additional Projects

Intro (1:03)

Slider

Intro (0:24)
Starter Project
HTML Setup (6:47)
Display People (12:53)
Apply CSS (7:11)
Next Slide (7:35)
Next Slide - End of Array (2:27)
Prev Slide (6:01)

Stripe Submenus

Intro (1:39)
Starter Project
HTML (9:10)
Sidebar Toggle (9:50)
Sidebar Complete (11:47)
Submenu Setup (12:37)
Submenu Links (6:38)
Submenu - Hide and Column Layout (6:53)

Pagination

Starter Project
Intro (1:04)
Setup (3:35)
Fetch Followers (5:10)
Display Followers (10:21)
Paginate - Create Pages (12:54)
Display Buttons (14:44)
Button Functionality (9:15)

Wikipedia API

Intro (1:16)
HTML Structure (4:02)
API Docs (4:33)
Initial Setup (4:55)
Fetch Pages (5:38)
Render Results (3:27)

Comfy Store

Teach online with

classList and className

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock