Autoplay
Autocomplete
Previous Lesson
Complete and Continue
JavaScript POWER UP - 16 Complete projects from scratch including Games and useful mini applications in JavaScript
introduction to JavaScript
1 JavaScript Course Introduction (8:30)
2 What is JavaScript (2:39)
3 Course Resources (3:16)
4 How to add JavaScript to Webpages (8:21)
5 Source Code
6 Debugging and commenting JavaScript (5:34)
7 Source Code
8 JavaScript Basic Data Types (3:53)
9 JavaScript Variables (5:02)
10 JavaScript Variable Rules (4:16)
11 Exercise 1 Output to console link to js file (3:43)
12 Source Code
13 Data type Null vs Undefined JavaScript (5:08)
14 Declaring multiple variables at once JavaScript (2:13)
15 JavaScript Operators (9:10)
16 Increment and Decrement Values JavaScript (4:01)
17 Assignment Operators JavaScript (2:57)
18 Comparison Operators JavaScript (5:38)
19 JavaScript String Operators (2:21)
20 JavaScript Logical Operators (7:05)
21 Source Code
22 prompt and alert JavaScript (4:03)
23 Writing content to the HTML document object (3:07)
24 Source Code
25 JavaScript Objects (5:44)
26 JavaScript Objects Dynamic Outputs (4:44)
27 JavaScript Objects within Objects (5:55)
28 JavaScript update values (3:14)
29 Source Code
30 JavaScript Arrays (5:17)
31 Working with Array Methods JavaScript (5:31)
32 Array Methods extended (8:56)
33 Sorting and more with Arrays JavaScript (4:30)
34 More with Arrays JavaScript (3:47)
35 Objects and Arrays together (9:28)
36 Source Code
37 JavaScript if condition statement (6:44)
38 JavaScript switch statement (4:41)
39 Source Code
40 JavaScript Do while loops (5:54)
41 For loops and more JavaScript (4:02)
42 Looping items in arrays and objects JavaScript (4:34)
43 Source Code
44 JavaScript introduction to functions (5:14)
45 Working with JavaScript Functions (7:56)
46 Global and Local Variables Functions (5:57)
47 Self-Executing function (2:56)
48 Break out of function JavaScript (2:03)
49 Source Code
50 JavaScript String Methods (7:51)
51 Source Code
52 Strings and Arrays (2:17)
53 Numbers to strings back to numbers (2:27)
54 Source Code
55 JavaScript Math Method (3:19)
56 JavaScript Date Method (7:30)
58 JavaScript Conclusion (7:26)
57 Source Code
JavaScript and the DOM
DOMintro (5:31)
3 What is the DOM (6:43)
4 Source Code
5 Select Node value using JavaScript (7:00)
6 JavaScript Objects and selection within the DOM (7:53)
7 Source Code
8 Windows Object Model (4:15)
9 document write method (2:09)
10 Selecting Elements by ID (8:05)
11 Update Output Div content from input form (7:09)
12 Source Code
13 Select Elements By Tag Name (10:00)
14 Selecting elements by Class (3:11)
15 Source Code
16 document query Selector (5:39)
17 Making Selections like CSS (6:00)
18 Source Code
19 Traversing the DOM (7:39)
20 Source Code
21 Add styling to Elements Dynamically (4:52)
22 Source Code
23 Append and Remove Elements using JavaScript (6:51)
24 Source Code
25 Add Event listeners to elements using JavaScript (4:39)
26 Event listeners click events (5:07)
27 Source Code
28 Hover over elements make them change background color (8:28)
29 Source Code
30 Image popup windows (6:35)
31 Source Code
JSON AJAX and JavaScript
1 JSON course Introduction (4:26)
2 JSON tools and resources (7:03)
3 JSON objects vs JavaScript Objects (8:17)
4 Output JSON javascript objects (4:14)
5 Source Code
6 Multiple Array Object JSON data (4:07)
7 Nested objects within Objects JSON (4:17)
8 Source Code
9 JSON parse use string as object (3:05)
10 JSON stringify turn into a string value (3:51)
11 Source Code
12 Example use case for JSON parse and JSON strinify (11:20)
13 Source Code
14 Loop Object JSON content output to HTML (5:50)
15 Source Code
16 get JSON with jQuery simple api data loading into HTML (7:25)
17 Source Code
18 Add content HTTP vs HTTPS (2:18)
19 ajax method get JSON data (2:40)
20 Source Code
21 Using different APIs to return JSON data (7:46)
22 JSON course conclusion (4:37)
23 Source Code
Project #1 JavaScript Project Build a War Card Game From Scratch
intro (4:11)
1 course intro Card war game (2:47)
2 course setup and resources (4:22)
3 Build structure for gameplay (5:44)
4 eventlisteners in JavaScript DOM (9:59)
5 source
6 build deck of cards (10:03)
7 random array shuffle cards (9:13)
8 source
9 Modulus and Multidimensional Arrays (8:44)
10 source
11 card shift and storage to inplay array (5:16)
12 Create Card output for players (10:26)
13 CSS stlying playing cards (10:24)
14 Card battle check for winner (9:50)
15 source
16 Create Battle Mode loop JavaScript functions (6:40)
17 Debugging and Tweaking (6:21)
18 add automation tweaks to gameplay (9:31)
19 source
20 Code overview conclusion (8:19)
Project #2 JavaScript Project Build a Memory Game From Scratch
1 Introduction to building JavaScript Memory Game (4:11)
2 Resource Setup (3:09)
3 Setup HTML Template (4:23)
4 Source Code
5 Loop declare image array (6:25)
6 Add Click Event to start Game (5:37)
7 Build gameplay array concat (5:51)
7 Source Code
8 Array Randomizer explained (14:33)
9 Add player gameplay options buttons JavaScript (4:34)
9 Source Code
10 Build Game Board Dynamically (11:02)
11 Make Game interactive flip tiles (10:38)
12 Source Code
13 Check if item is in array (10:30)
14 Set Intervals Flip cards back over (8:47)
15 Gameplay setup match detection (8:48)
16 Source Code
17 Game Tweaks and updates (10:19)
18 Course Conclusion (13:41)
19 Source Code
20 Create css and js files (2:37)
21 Source Code
Project #3 JavaScript Project HiLo Card Game
1 Course Introduction Interactive Web Application (4:27)
2 JavaScript Project Resources (5:24)
3 Create start screen for players (6:32)
4 Create Start event game play start (4:16)
5 Build a deck of cards JavaScript Array Objects (9:42)
6 How to randomize an array with JavaScript (9:40)
7 Add data to an object within the array JavaScript (4:09)
8 Output Card value to HTML element JavaScript (5:21)
9 Add player gameplay options buttons JavaScript (4:34)
10 source code
11 Adding color to output JavaScript (2:55)
12 Quick Style your output CSS (2:30)
13 Winner Check function JavaScript (5:45)
14 Completed Simple Gamplay JavaScript (5:35)
15 source code
16 Add betting input HTML (4:58)
17 CSS to build a card (10:35)
18 CSS for Card (5:17)
19 source code
20 Add CSS card debug dashboard (3:22)
21 Debug Gameplay clean up code (5:42)
22 Bet adjustments eventlisteners JavaSCript (3:36)
23 How to debug your javascript (9:08)
24 Button Styling CSS (4:16)
25 Debugging JavaScript code (6:15)
26 Code Tidy up and game ending (7:24)
27 Overview Styling CSS (3:44)
28 source code
29 Overview JavaScript (10:10)
30 source code
31 Course Conclusion (3:07)
32 source code
33 source code
Project #4 JavaScript Project Dynamic Quiz Application
1 Introduction to building a dynamic web application from scratch (3:06)
2 Course Resources Setup and tools (5:59)
3 JavaScript Objects (4:12)
4 Create Object Array JSON file (6:32)
5 JSON Parse Data into Object JavaScript (5:00)
6 Source Code
7 Use AJAX to get JSON data into JavaScript Object (10:07)
8 Source Code
9 Build Questions display in HTML (8:54)
10 Bootstrap styling of quiz (10:46)
11 Move Between Questions (8:29)
12 JavaScript addEventListener (5:06)
13 innerText Value check (3:49)
14 Selecting CLases Toggling Classes in elements (8:07)
15 Save Selection (4:33)
16 Movement between questions completion of quiz (8:18)
17 Dynamic Quiz add new questions (5:43)
18 Hide show next and previous buttons (6:04)
19 Create Score Card for Quiz (10:29)
20 Finish Project - JavaScript Dynamic Quiz from Scratch (4:45)
20 Source Code
Project #5 Project JavaScript BlackJack Game from Scratch
1 JavaScript game introduction (4:29)
2 Course intro Resources (2:35)
3 JavaScript Creating Random Numbers (4:25)
4 Creating a deck of Cards JavaScript (5:00)
5 Source Code
6 Output special Characters JavaScript HTML CSS (3:07)
7 Adding Color to Characters ternary operator JavaScript (4:56)
8 Source Code
9 How to generate a random card value using JavaScript (8:41)
10 Source Code
11 Creating a game Start JavaScript (3:06)
12 Shuffle Array values random order JavaScript (6:54)
13 Deal the cards setup player and dealer JavaScript Loop (8:05)
14 Output Dealer and Players Hand of cards JavaScript (5:36)
15 Source Code
16 Template for a Card CSS (7:48)
17 Using CSS to create a playing card (7:20)
18 Output Styled Cards into Gameplay JavaScript CSS (7:37)
19 Source Code
20 CSS JavaScript Cover Dealer Card (5:31)
21 Adding gameplay elements HTML (11:17)
22 Applying Styling CSS to buttons and updating game elements (9:57)
23 Hide buttons start game JavaScript (3:08)
24 Source Code
25 Create next options for player JavaScript (8:30)
26 Player actions JavaScript (5:53)
27 Create player values and interactions JavaScript (11:47)
28 Dealer AI JavaScript play the game (9:42)
29 Blackjack values and calculations JavaScript (6:34)
30 Determine who won adjust values JavaScript (10:09)
31 Source Code
32 Gameplay adjustments and tweaks JavaScript (7:07)
33 User styling and dashboard design CSS HTML (4:55)
34 Setting click event JavaScript (3:03)
35 Limit min max for input field values JavaScript onchange event (3:09)
36 Fix button tweak double JavaScript (6:39)
37 Testing and tweaks to debug application JavaScript (9:57)
38 Final test run through of gameplay (4:03)
39 Game instructions and game play outline (4:09)
40 Clean up source code final tweaks JavaScript (7:17)
41 Source Code
42 CSS review code (3:31)
43 Source Code
44 JavaScript code review part 1 (10:52)
45 JavaScript Code review part 2 (5:55)
46 Source Code
Project #6 Dynamic Shopping Cart using JavaScript
1 Introduction to building a shopping cart from scratch (5:18)
2 Course Resources and Links (4:38)
3 Setup Basic HTML template and source links (5:20)
4 Source Code
5 Create Product add event listener (7:43)
6 Use data attributes to pass values to jQuery (8:35)
7 Source Code Event listeners
8 Update add more products (6:39)
9 Create Shopping cart object array (4:19)
10 Loop Through Items in the array jQuery (4:55)
11 Add items increase quantity in the shopping cart (5:26)
12 Add session storage and parse JSON (9:09)
13 Use Session Storage to update array object values (3:49)
14 Create Shopping Cart output (6:17)
15 How to Display Cart items and totals (6:34)
16 Output dollars in currency format (3:17)
17 Source Code Shopping Cart
18 UX add Bootstrap classes (8:19)
19 Shopping cart dialog window popup (7:48)
20 Create a bootstrap table (4:24)
21 Bootstrap 4 Tables (6:45)
22 Add Checkout Buttons (3:23)
23 Add Bootstrap Grid (10:40)
24 Add Cards update Bootstrap styled items (3:43)
25 Add Bootstrap NavBar (8:19)
26 More Bootstrap Styling (3:37)
27 Create Page Footer (2:41)
28 Source Code Products
29 Create Checkout page (7:08)
30 Create Paypal Checkout Form (9:37)
31 Adding event listeners update quantity (6:54)
32 Tweaking output quantities (5:07)
33 Complete Shopping Cart Checkout to Paypal (6:01)
34 Source Code Checkout to Paypal
35 Create Mulitple page website (4:37)
36 Create About.html page (3:21)
37 Source Code About.html
38 Create Index.html Carousel (9:51)
39 Source Code index
40 Overview products.html (3:22)
41 Source Code products page
42 Source Code CSS
43 Summary overview of JavaScript (7:26)
44 Source Code JavaScript
45 Course Resources
46 Update intro and thanks (1:46)
47 Shopping Cart Updates (2:11)
48 Adding Remove button making event listener (6:04)
49 remove object from array (5:53)
50 Update Checkout of shopping cart (5:58)
51 Checkout Zero Quantity Remove (8:27)
Project #7 JavaScript Game Exercise - Wild West Shootout Game Practice
Project Introduction Video (0:24)
0 Game Exercise Introduction (1:26)
1 Developer Setup Resources (2:31)
2 HTML Page Structure Planning (3:40)
3 JavaScript Event Listeners (5:24)
4 Create a Game Board (4:55)
5 Style your Game (7:25)
6 Create More Elements JavaScript (4:44)
7 JavaScript Hide and Show Elements (6:59)
8 Ready Set Action JavaScript (3:22)
9 Gameplay Tweaks and Updates (5:08)
10 Game Exercise Overview (5:23)
Resources and Source Code
Project #8 JavaScript Exercise - Tank Shooter Game from Scratch
0 JavaScript Exercise Game Introduction (2:02)
1 Web development setup (4:32)
2 HTML CSS page Setup (2:41)
3 Add Style and Elements HTML (13:37)
4 JavaScript Start the Game (5:38)
5 Play the Game JavaScript (3:40)
6 Create a Tank CSS (4:22)
6 JavaScript Math CSS trasnform explained (3:55)
7 Move along with Mouse (7:40)
8 JavaScript Move Turret (3:38)
9 Shooter Bullets Create Elements JavaScript (10:10)
10 Remove elements from document JavaScript (3:43)
11 Setup Bad Guys JavaScript (17:29)
12 Moving Elements JavaScript Game (7:23)
13 JavaScript Element Collision detection (8:01)
14 Detect Collision with Player and Enemy (4:49)
15 Update Stats Dashboard values (3:21)
16 Game Over Function JavaScript (5:48)
17 Color the elements randomly JavaScript (3:42)
18 Blast the Bad Guys JavaScript (4:53)
19 Game Tweaks and bug fixes (2:41)
20 Source Code Game Review (10:26)
Source Code and Resources
Project #9 JavaScript Draw on HTML5 Canvas Element
Project Introduction Video (1:11)
0 JavaScript Canvas Draw Introduction (1:43)
0 Setup Developer Environment (2:29)
1 Setup HTML Container (6:29)
2 Connect to Canvas JavaScript (3:28)
3 Canvas setup Draw values (2:39)
4 Interactive Content Events (4:44)
5 Ready set Draw (3:43)
6 Draw on Canvas JavaScript (3:56)
7 Save your Canvas Drawing (2:54)
8 Create Click save to computer (4:05)
9 HTML5 Canvas Drawing Overview (5:21)
Source Code and resources
Project #10 JavaScript Exercise Countdown Timer
Project Introduction Video (1:07)
0 JavaScript Countdown Timer Exercise (2:17)
1 Setup HTML (7:35)
2 Styling for Countdown (5:36)
3 JavaScript Countdown Variables (6:02)
4 Event Listeners JavaScript (4:10)
5 Starting the Clock JavaScript (4:21)
6 Get Time Remaining (6:38)
7 Update HTML elements JavaScript (5:09)
8 Save Timer to LocalStorage (4:04)
9 JavaScript Exercise Code Review (6:47)
Source Code and Resources
Project #11 Car Racer JavaScript Game Exercise Vanilla JavaScript
Project Introduction Video (1:08)
0 Car Racer Introduction (2:48)
1 New JavaScript Racer Game Exercise (3:45)
2 HTML setup container (2:41)
3 CSS setup styling (4:48)
4 JavaScript Element Selection (6:16)
5 JavaScript Event Listeners (5:14)
6 Setup Player Car and Start Functions (6:27)
7 JavaScript Road Building (5:06)
8 Interaction with Keyboard (11:59)
9 Update Dashboard Values (5:30)
10 Moving Road JavaScript (6:10)
11 Tweak moving road Side move (7:16)
12 Keep player on the road (7:32)
13 Adding other Cars (10:18)
14 Making other cars move (7:02)
18 Car hit Car Check (4:17)
15 Element Overlap Detection (8:59)
16 Crash Checker JavaScript Collide (3:43)
17 Game Over Init (2:59)
19 Game Over Play (6:01)
20 Restart Game (4:12)
21 Code Review and Overview (10:49)
Source Code and Resources
Project #12 JavaScript - Breakout Game Exercise
0 JavaScript Breakout Introduction (2:30)
1 Page Setup (7:49)
2 Interactive with JavaScript (4:04)
3 JavaScript Functionality (7:30)
4 StartGame Animations JavaScript (4:55)
5 JavaScript Get Moving (5:20)
6 Bouncing Ball JavaScript (10:20)
7 Detect Collision JavaScript (8:16)
8 Paddle Ball Hits JavaScript (4:08)
9 Tweak gameplay (5:46)
10 Bring the Bricks (11:19)
11 Brick Detection and Hits (5:15)
12 Tweak and Tune our Code (7:50)
13 Updates to Game Play (3:20)
14 Code Review (9:41)
Source Code 1
Source Code 2
Source Code 3
Source Code 4
Source Code 5
Project #13 JavaScript Game Exercise built from scratch Catch Objects
Game introduction video (1:11)
0 JavaScript Mini Game (2:37)
1 JavaScript Page Setup (1:59)
2 JavaScript AnimationFrame (5:21)
2 Source Code
3 JavaScript cancelAnimationFrame (7:29)
4 Begin Game JavaScript (9:10)
5 JavaScript Interactive (8:10)
6 Code Tweak (2:52)
6 Source Code
7 Get moving JavaScript (10:16)
8 Collision Detection Elements (8:27)
9 Bring on the BadGuys (8:57)
9 Source Code
10 Tweak BadGuys JavaScript (8:51)
10 Source Code
11 GamePlay in Action (5:42)
12 Start the Game Tweaks (13:03)
12 Source Code
13 Final Code Review (10:58)
14 Source Code
Project #14 JavaScript Exercise - Target Blaster Game from Scratch
Project Promo Video (1:09)
00 JavaScript Exercise Introduction (2:07)
01 Development Environment Setup (2:53)
02 Event Handlers JavaScript (4:25)
03 JavaScript Create Elements (14:40)
04 JavaScript Animation Frames (8:39)
1 Game Setup Code (6:47)
2 Bring in JavaScript (6:46)
3 Add Element Updates (2:43)
4 StartGame Play Animation Frame (6:47)
5 Collision Detection (11:04)
6 Create Targets Dynamically (11:18)
7 Add random Icon images (5:02)
8 Tweaks and Updates to Targets (19:02)
9 Fire at Targets (8:18)
10 Game Over Message (6:41)
11 Target Movement updates (4:36)
12 Adding hazards (5:21)
13 Have a blast more Stuff (14:12)
14 Source Code Review (13:33)
Source Code and Resources
Project #15 AJAX API exercises JavaScript Trivia web application
Project Promo Video (0:02)
00 Introduction to working with AJAX NOi (1:51)
Web development setup (4:11)
1 Page Setup (3:34)
2 Make Request Callback (3:28)
3 Get API content (4:18)
4 Output Question format (4:58)
5 Build Buttons (6:19)
6 JavaScript Dynamically Build Elements (4:25)
7 Tweak Quiz and add Scoring (6:05)
8 Show correct answer (6:59)
9 More fun with APIs (7:10)
10 AJAX conclusion (2:40)
Source Code and resource
Project #16 JavaScript Exercise Local Storage Task List
Project Promo Video (1:11)
00 Local Storage Exercise introduction (1:49)
0 Setup Developer Environment (2:29)
1 HTML CSS page Setup (3:54)
2 JavaScript DOM Element Selection (8:24)
3 JavaScript Add a Task (7:52)
4 JavaScript Map array (8:43)
5 JavaScript Toggle Class (10:33)
6 Bring on the LocalStorage (5:52)
7 Remove from Array JavaScript (7:23)
8 Code Review and Overview (6:17)
9 HTML5 Canvas Drawing Overview (5:21)
Source Code and Resources
16 Template for a Card CSS
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock