1 New JavaScript Racer Game Exercise

JavaScript POWER UP - 16 Complete projects from scratch including Games and useful mini applications in JavaScript

introduction to JavaScript

1 JavaScript Course Introduction
2 What is JavaScript
3 Course Resources
4 How to add JavaScript to Webpages
5 Source Code
6 Debugging and commenting JavaScript
7 Source Code
8 JavaScript Basic Data Types
9 JavaScript Variables
10 JavaScript Variable Rules
11 Exercise 1 Output to console link to js file
12 Source Code
13 Data type Null vs Undefined JavaScript
14 Declaring multiple variables at once JavaScript
15 JavaScript Operators
16 Increment and Decrement Values JavaScript
17 Assignment Operators JavaScript
18 Comparison Operators JavaScript
19 JavaScript String Operators
20 JavaScript Logical Operators
21 Source Code
22 prompt and alert JavaScript
23 Writing content to the HTML document object
24 Source Code
25 JavaScript Objects
26 JavaScript Objects Dynamic Outputs
27 JavaScript Objects within Objects
28 JavaScript update values
29 Source Code
30 JavaScript Arrays
31 Working with Array Methods JavaScript
32 Array Methods extended
33 Sorting and more with Arrays JavaScript
34 More with Arrays JavaScript
35 Objects and Arrays together
36 Source Code
37 JavaScript if condition statement
38 JavaScript switch statement
39 Source Code
40 JavaScript Do while loops
41 For loops and more JavaScript
42 Looping items in arrays and objects JavaScript
43 Source Code
44 JavaScript introduction to functions
45 Working with JavaScript Functions
46 Global and Local Variables Functions
47 Self-Executing function
48 Break out of function JavaScript
49 Source Code
50 JavaScript String Methods
51 Source Code
52 Strings and Arrays
53 Numbers to strings back to numbers
54 Source Code
55 JavaScript Math Method
56 JavaScript Date Method
58 JavaScript Conclusion
57 Source Code

JavaScript and the DOM

DOMintro
3 What is the DOM
4 Source Code
5 Select Node value using JavaScript
6 JavaScript Objects and selection within the DOM
7 Source Code
8 Windows Object Model
9 document write method
10 Selecting Elements by ID
11 Update Output Div content from input form
12 Source Code
13 Select Elements By Tag Name
14 Selecting elements by Class
15 Source Code
16 document query Selector
17 Making Selections like CSS
18 Source Code
19 Traversing the DOM
20 Source Code
21 Add styling to Elements Dynamically
22 Source Code
23 Append and Remove Elements using JavaScript
24 Source Code
25 Add Event listeners to elements using JavaScript
26 Event listeners click events
27 Source Code
28 Hover over elements make them change background color
29 Source Code
30 Image popup windows
31 Source Code

JSON AJAX and JavaScript

1 JSON course Introduction
2 JSON tools and resources
3 JSON objects vs JavaScript Objects
4 Output JSON javascript objects
5 Source Code
6 Multiple Array Object JSON data
7 Nested objects within Objects JSON
8 Source Code
9 JSON parse use string as object
10 JSON stringify turn into a string value
11 Source Code
12 Example use case for JSON parse and JSON strinify
13 Source Code
14 Loop Object JSON content output to HTML
15 Source Code
16 get JSON with jQuery simple api data loading into HTML
17 Source Code
18 Add content HTTP vs HTTPS
19 ajax method get JSON data
20 Source Code
21 Using different APIs to return JSON data
22 JSON course conclusion
23 Source Code

Project #1 JavaScript Project Build a War Card Game From Scratch

intro
1 course intro Card war game
2 course setup and resources
3 Build structure for gameplay
4 eventlisteners in JavaScript DOM
5 source
6 build deck of cards
7 random array shuffle cards
8 source
9 Modulus and Multidimensional Arrays
10 source
11 card shift and storage to inplay array
12 Create Card output for players
13 CSS stlying playing cards
14 Card battle check for winner
15 source
16 Create Battle Mode loop JavaScript functions
17 Debugging and Tweaking
18 add automation tweaks to gameplay
19 source
20 Code overview conclusion

Project #2 JavaScript Project Build a Memory Game From Scratch

1 Introduction to building JavaScript Memory Game
2 Resource Setup
3 Setup HTML Template
4 Source Code
5 Loop declare image array
6 Add Click Event to start Game
7 Build gameplay array concat
7 Source Code
8 Array Randomizer explained
9 Add player gameplay options buttons JavaScript
9 Source Code
10 Build Game Board Dynamically
11 Make Game interactive flip tiles
12 Source Code
13 Check if item is in array
14 Set Intervals Flip cards back over
15 Gameplay setup match detection
16 Source Code
17 Game Tweaks and updates
18 Course Conclusion
19 Source Code
20 Create css and js files
21 Source Code

Project #3 JavaScript Project HiLo Card Game

1 Course Introduction Interactive Web Application
2 JavaScript Project Resources
3 Create start screen for players
4 Create Start event game play start
5 Build a deck of cards JavaScript Array Objects
6 How to randomize an array with JavaScript
7 Add data to an object within the array JavaScript
8 Output Card value to HTML element JavaScript
9 Add player gameplay options buttons JavaScript
10 source code
11 Adding color to output JavaScript
12 Quick Style your output CSS
13 Winner Check function JavaScript
14 Completed Simple Gamplay JavaScript
15 source code
16 Add betting input HTML
17 CSS to build a card
18 CSS for Card
19 source code
20 Add CSS card debug dashboard
21 Debug Gameplay clean up code
22 Bet adjustments eventlisteners JavaSCript
23 How to debug your javascript
24 Button Styling CSS
25 Debugging JavaScript code
26 Code Tidy up and game ending
27 Overview Styling CSS
28 source code
29 Overview JavaScript
30 source code
31 Course Conclusion
32 source code
33 source code

Project #4 JavaScript Project Dynamic Quiz Application

1 Introduction to building a dynamic web application from scratch
2 Course Resources Setup and tools
3 JavaScript Objects
4 Create Object Array JSON file
5 JSON Parse Data into Object JavaScript
6 Source Code
7 Use AJAX to get JSON data into JavaScript Object
8 Source Code
9 Build Questions display in HTML
10 Bootstrap styling of quiz
11 Move Between Questions
12 JavaScript addEventListener
13 innerText Value check
14 Selecting CLases Toggling Classes in elements
15 Save Selection
16 Movement between questions completion of quiz
17 Dynamic Quiz add new questions
18 Hide show next and previous buttons
19 Create Score Card for Quiz
20 Finish Project - JavaScript Dynamic Quiz from Scratch
20 Source Code

Project #5 Project JavaScript BlackJack Game from Scratch

1 JavaScript game introduction
2 Course intro Resources
3 JavaScript Creating Random Numbers
4 Creating a deck of Cards JavaScript
5 Source Code
6 Output special Characters JavaScript HTML CSS
7 Adding Color to Characters ternary operator JavaScript
8 Source Code
9 How to generate a random card value using JavaScript
10 Source Code
11 Creating a game Start JavaScript
12 Shuffle Array values random order JavaScript
13 Deal the cards setup player and dealer JavaScript Loop
14 Output Dealer and Players Hand of cards JavaScript
15 Source Code
16 Template for a Card CSS
17 Using CSS to create a playing card
18 Output Styled Cards into Gameplay JavaScript CSS
19 Source Code
20 CSS JavaScript Cover Dealer Card
21 Adding gameplay elements HTML
22 Applying Styling CSS to buttons and updating game elements
23 Hide buttons start game JavaScript
24 Source Code
25 Create next options for player JavaScript
26 Player actions JavaScript
27 Create player values and interactions JavaScript
28 Dealer AI JavaScript play the game
29 Blackjack values and calculations JavaScript
30 Determine who won adjust values JavaScript
31 Source Code
32 Gameplay adjustments and tweaks JavaScript
33 User styling and dashboard design CSS HTML
34 Setting click event JavaScript
35 Limit min max for input field values JavaScript onchange event
36 Fix button tweak double JavaScript
37 Testing and tweaks to debug application JavaScript
38 Final test run through of gameplay
39 Game instructions and game play outline
40 Clean up source code final tweaks JavaScript
41 Source Code
42 CSS review code
43 Source Code
44 JavaScript code review part 1
45 JavaScript Code review part 2
46 Source Code

Project #6 Dynamic Shopping Cart using JavaScript

1 Introduction to building a shopping cart from scratch
2 Course Resources and Links
3 Setup Basic HTML template and source links
4 Source Code
5 Create Product add event listener
6 Use data attributes to pass values to jQuery
7 Source Code Event listeners
8 Update add more products
9 Create Shopping cart object array
10 Loop Through Items in the array jQuery
11 Add items increase quantity in the shopping cart
12 Add session storage and parse JSON
13 Use Session Storage to update array object values
14 Create Shopping Cart output
15 How to Display Cart items and totals
16 Output dollars in currency format
17 Source Code Shopping Cart
18 UX add Bootstrap classes
19 Shopping cart dialog window popup
20 Create a bootstrap table
21 Bootstrap 4 Tables
22 Add Checkout Buttons
23 Add Bootstrap Grid
24 Add Cards update Bootstrap styled items
25 Add Bootstrap NavBar
26 More Bootstrap Styling
27 Create Page Footer
28 Source Code Products
29 Create Checkout page
30 Create Paypal Checkout Form
31 Adding event listeners update quantity
32 Tweaking output quantities
33 Complete Shopping Cart Checkout to Paypal
34 Source Code Checkout to Paypal
35 Create Mulitple page website
36 Create About.html page
37 Source Code About.html
38 Create Index.html Carousel
39 Source Code index
40 Overview products.html
41 Source Code products page
42 Source Code CSS
43 Summary overview of JavaScript
44 Source Code JavaScript
45 Course Resources
46 Update intro and thanks
47 Shopping Cart Updates
48 Adding Remove button making event listener
49 remove object from array
50 Update Checkout of shopping cart
51 Checkout Zero Quantity Remove

Project #7 JavaScript Game Exercise - Wild West Shootout Game Practice

Project Introduction Video
0 Game Exercise Introduction
1 Developer Setup Resources
2 HTML Page Structure Planning
3 JavaScript Event Listeners
4 Create a Game Board
5 Style your Game
6 Create More Elements JavaScript
7 JavaScript Hide and Show Elements
8 Ready Set Action JavaScript
9 Gameplay Tweaks and Updates
10 Game Exercise Overview
Resources and Source Code

Project #8 JavaScript Exercise - Tank Shooter Game from Scratch

0 JavaScript Exercise Game Introduction
1 Web development setup
2 HTML CSS page Setup
3 Add Style and Elements HTML
4 JavaScript Start the Game
5 Play the Game JavaScript
6 Create a Tank CSS
6 JavaScript Math CSS trasnform explained
7 Move along with Mouse
8 JavaScript Move Turret
9 Shooter Bullets Create Elements JavaScript
10 Remove elements from document JavaScript
11 Setup Bad Guys JavaScript
12 Moving Elements JavaScript Game
13 JavaScript Element Collision detection
14 Detect Collision with Player and Enemy
15 Update Stats Dashboard values
16 Game Over Function JavaScript
17 Color the elements randomly JavaScript
18 Blast the Bad Guys JavaScript
19 Game Tweaks and bug fixes
20 Source Code Game Review
Source Code and Resources

Project #9 JavaScript Draw on HTML5 Canvas Element

Project Introduction Video
0 JavaScript Canvas Draw Introduction
0 Setup Developer Environment
1 Setup HTML Container
2 Connect to Canvas JavaScript
3 Canvas setup Draw values
4 Interactive Content Events
5 Ready set Draw
6 Draw on Canvas JavaScript
7 Save your Canvas Drawing
8 Create Click save to computer
9 HTML5 Canvas Drawing Overview
Source Code and resources

Project #10 JavaScript Exercise Countdown Timer

Project Introduction Video
0 JavaScript Countdown Timer Exercise
1 Setup HTML
2 Styling for Countdown
3 JavaScript Countdown Variables
4 Event Listeners JavaScript
5 Starting the Clock JavaScript
6 Get Time Remaining
7 Update HTML elements JavaScript
8 Save Timer to LocalStorage
9 JavaScript Exercise Code Review
Source Code and Resources

Project #11 Car Racer JavaScript Game Exercise Vanilla JavaScript

Project Introduction Video
0 Car Racer Introduction
1 New JavaScript Racer Game Exercise
2 HTML setup container
3 CSS setup styling
4 JavaScript Element Selection
5 JavaScript Event Listeners
6 Setup Player Car and Start Functions
7 JavaScript Road Building
8 Interaction with Keyboard
9 Update Dashboard Values
10 Moving Road JavaScript
11 Tweak moving road Side move
12 Keep player on the road
13 Adding other Cars
14 Making other cars move
18 Car hit Car Check
15 Element Overlap Detection
16 Crash Checker JavaScript Collide
17 Game Over Init
19 Game Over Play
20 Restart Game
21 Code Review and Overview
Source Code and Resources

Project #12 JavaScript - Breakout Game Exercise

0 JavaScript Breakout Introduction
1 Page Setup
2 Interactive with JavaScript
3 JavaScript Functionality
4 StartGame Animations JavaScript
5 JavaScript Get Moving
6 Bouncing Ball JavaScript
7 Detect Collision JavaScript
8 Paddle Ball Hits JavaScript
9 Tweak gameplay
10 Bring the Bricks
11 Brick Detection and Hits
12 Tweak and Tune our Code
13 Updates to Game Play
14 Code Review
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
0 JavaScript Mini Game
1 JavaScript Page Setup
2 JavaScript AnimationFrame
2 Source Code
3 JavaScript cancelAnimationFrame
4 Begin Game JavaScript
5 JavaScript Interactive
6 Code Tweak
6 Source Code
7 Get moving JavaScript
8 Collision Detection Elements
9 Bring on the BadGuys
9 Source Code
10 Tweak BadGuys JavaScript
10 Source Code
11 GamePlay in Action
12 Start the Game Tweaks
12 Source Code
13 Final Code Review
14 Source Code

Project #14 JavaScript Exercise - Target Blaster Game from Scratch

Project Promo Video
00 JavaScript Exercise Introduction
01 Development Environment Setup
02 Event Handlers JavaScript
03 JavaScript Create Elements
04 JavaScript Animation Frames
1 Game Setup Code
2 Bring in JavaScript
3 Add Element Updates
4 StartGame Play Animation Frame
5 Collision Detection
6 Create Targets Dynamically
7 Add random Icon images
8 Tweaks and Updates to Targets
9 Fire at Targets
10 Game Over Message
11 Target Movement updates
12 Adding hazards
13 Have a blast more Stuff
14 Source Code Review
Source Code and Resources

Project #15 AJAX API exercises JavaScript Trivia web application

Project Promo Video
00 Introduction to working with AJAX NOi
Web development setup
1 Page Setup
2 Make Request Callback
3 Get API content
4 Output Question format
5 Build Buttons
6 JavaScript Dynamically Build Elements
7 Tweak Quiz and add Scoring
8 Show correct answer
9 More fun with APIs
10 AJAX conclusion
Source Code and resource

Project #16 JavaScript Exercise Local Storage Task List

Project Promo Video
00 Local Storage Exercise introduction
0 Setup Developer Environment
1 HTML CSS page Setup
2 JavaScript DOM Element Selection
3 JavaScript Add a Task
4 JavaScript Map array
5 JavaScript Toggle Class
6 Bring on the LocalStorage
7 Remove from Array JavaScript
8 Code Review and Overview
9 HTML5 Canvas Drawing Overview
Source Code and Resources

1 New JavaScript Racer Game Exercise

Lesson content locked

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

Enroll in Course to Unlock