IIRF Online > Development > Web Development > JavaScript > Complete JavaScript Projects Course Games 55 Modern JS DOM
Complete JavaScript Projects Course Games 55 Modern JS DOM by Udemy
Real Projects! AJAX Java Script Projects Apps 55+ Projects Modern JS DOM JavaScript Games Portfolio Games DOM
Course Highlights
- Perfect to get started with JavaScript - loaded with starter projects to get you coding
- Master the DOM (document object model)
- Modular learning sections with over 50 real world projects with pure JavaScript sing DOM interaction.
- Explore how you can learn JavaScript while building FUN real world JavaScript projects from Scratch
- How to use JavaScript and how JavaScript works behind the scenes
- Explore JavaScript Document Object Model Make interactive and Dynamic Web Pages
- Manipulate elements using JavaScript - Bring your web pages to LIFE with JavaScript
- How to create elements dynamically and more - With Games and Amazing Projects to Build
- Develop Basic JavaScript Skills variables, boolean logic, if/else, loops, functions, arrays, etc.
- Go from a total beginner to an advanced JavaScript developer
- JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
- Wow create real-world apps with both ES5 and ES6+
- Modern JavaScript for 2020
- Source Code include - Build YOUR own version of the app TODAY
- Go from a total beginner to an advanced JavaScript developer
Skills you will learn!
Curriculum
3 Topics
Introduction to learning JavaScript
Project Outline and Downloadable resources
Code Editor Visual Studio Code
44 Topics
Core JavaScript Section Introduction
Section Downloadble Ebook Guide
JavaScript Powers The Web
More about JavaScript
JavaScript and HTML create i
JavaScript Comments Coding
JavaScript Variables
JavaScript Variables Let Const
Data Types and Variable Setup
JavaScript Prompt
Template Literal JavaScript
JavaScript Data Types
JavaScript Operators
JavaScript Operators More
JavaScript Challenge 2
Comparison Operators
If Else Statements
Ternary Operator
Multiple Conditions
Code Challenge #3
JavaScript Switch
JavaScript Functions
Function Parameters
Function the return
Function in HTML
Quick DOM events
declaration vs expression functions
Function Scope
function recursion
IIFE JavaScript
ES6 Arrow Function
JavaScript Objects Arrays
Object Method
Create Objects with Functions
Objects and Arrays
Arrays JavaScript
Power up with Arrays
JavaScript Arrays More
Array Filter
JavaScript Loops
Challenge 3 Loops
Loop Object and Array Data
JavaScript Map
JavaScript Conclusion
22 Topics
JavaScript DOM Section introduction
Downloadable PDF Section Guide
JavaScript DOM
JavaScript Element Selection
Multiple element selection
Element Manipulation
Element Manipulation 2
Element Classes
Element Children and Traversing
Element Style Updates
DOM create Elements
Event Listeners DOM.
Challenge 1 Image Popup.
Challenge 2 List Items
Challenge 3 Background Changer
Event Object
Key Press Events
Key Press Events 2
Mouse Events
Challenge 4 List
Challenge 4 Final
Event Bubbling and capturing
24 Topics
JavaScript Introduction developer environment setup
Downloadable PDF Section Guide
JavaScript Number Methods
String Methods
JavaScript Math
Array include and Ternary
Challenge 1 Array Message.
Challenge 2 Background Color
DOM content Loaded
Key vs KeyCode UPDATE
Challenge 3 Keyboard Mover
JavaScript Date
JSON parse stringify
JavaScript LocalStorage
getBoundingClientRect method JavaScript
JavaScript Timers
encode decode URI component
RegEx JavaScript
ProtoType JavaScript
Try and Catch
xHR and Fetch
xHR and Fetch 2
xHR and Fetch 3
Advanced JavaScript Final
10 Topics
Drawing a line in Canvas
Drawing a circle canvas
Drawing a semi circle
Drawing multiple circles
Creating dashed lines
Setting Line width
User input
Moving rectangle
clearing canvas
request animation frame
9 Topics
Tip Calculator Introduction
HTML input Element Setup
JavaScript Select Elements
JavaScript querySelector
Adding an Event Listener
Element Value JavaScript
Tweak and Adjust output.
Backtick template JavaScript
Tip Calculator FINAL SOURCE
3 Topics
Section Introduction welcome message
Select element value
FINAL source welcome message
6 Topics
Section Introduction dynamic welcome message
JavaScript Date Method
Dynamic message depending on Time
Element Background Color Update
Element Style with JavaScript
Final source Dynamic Greeter
7 Topics
Coin Toss Application Section Introduction
JavaScript Setup
Element Event Triggers
Game Logic.
Check Winner Logic
Coin Toss Game Code Review
Coin toss Game FINAL source code
8 Topics
Rock Paper Scissors Game section introduction
Rock Paper Scissors Setup
Make it interactive event listeners
Math Random Computer Play
Check Winner of Game
Update Score GamePlay
Player Message Function
Rock Paper Scissors FINAL source code
13 Topics
Ultimate Dice Game Section Introduction
Dice Roller Game Setup
JavaScript Element Objects
JavaScript Math Random
Winner Logic Conditions
Add Dice Face Visual
Create Elements using JavaScript
Remove Element inside Parent.
Dots to the Dice Dynamically
Dice Game Tweaks and Adjustments
Rebuild Dice Game
Dice game read
Dice game FINAL source Code
8 Topics
JavaScript Sound player Section Introduction
JavaScript Play Sounds
EventListeners to Multiple Elements
Sound selector on click
Make active add Class
Make it shorter Code update
JavaScript Create Elements
Play MP3 Final Source Code
10 Topics
JavaScript Dynamic Typing Test Section Introduction
Typing Test Mini Application
Play the Game
JavaScript Random
JavaScript Timer Date
GameEnd Calculations
Count words in string
Typing Test Code Review
Word by Word Compare
Typing Tester Final source Code
13 Topics
Intro to section Functionator JavaScript Function practice Code
Setup Elements JavaScript.
JavaScript add Style
Function Mover
Updated
KeyBoard events
Random HEX color
Action List Maker
Element Mover
Quick Fixes
Remove Action from List
Code Review and Tweaks
DOM mover FINAL Source code
4 Topics
Section introduction Magic Eight Ball JavaScript
Magic 8Ball Setup
Respond to Question
Magic 8Ball FINAL source code
10 Topics
JavaScript Accordion Introduction
HTML setup for Accordion
Bonus PDF Resource Guide
Setup CSS for the Accordion
Accordion Interactions JavaScript
Accordion JavaScript Event
Toggle Active Class
Hide all open panels
Section Conclusion
Accordion Project Source Code Final
8 Topics
Section introduction Combination guesser Game
Setup Safe Cracker
JavaScript Create Elements
Random Combo generator
Guess Checker and Response
Player Scoring
Combo Lock Code Review
Lock Combo FINAL source code
9 Topics
Word Scramble section introduction
Word Scrambler Setup
Game interaction and output
Randomize Array
Random order array
Gameplay JavaScript
Player Guess checker
Code Review Word Game
Word Scrambler FINAL source Code
10 Topics
Countdown timer project introduction
Countdown Timer Setup
Get time set Countdown
Calculate Time Left
Update InnerHTML elements
Interval Updater
LocalStorage JavaScript
Countdown Timer Code Review
Bonus CSS updates
Final Source Code
11 Topics
Pattern matching game project introduction
Pattern Matching Game
JavaScript Create Game Board
Dynamic and Interactive Elements
Store Sequence in Array
Set Timeout of style
Random Sequence of Colors
Complete Sequence Loop
End Gameplay Check
Code Code review and Tweaks
Final Game Source Code Pattern matching
16 Topics
Click Popper Game introduction
Setup HTML
Select Elements JavaScript DOM
Setup Player Stats update HTML
Handle Button Click
Updated Source for JSON
Get Game Data
CSS with Start Game
Add Elements JavaScript.
Game Play Starter
Make Element Clickable
Add random Icon
Add Score Elements JavaScript
Game Over JavaScript
Final Code Review
Click Popper Source Code FINAL
11 Topics
High Low Game Introduction
Game Board Setup
Setup Game Variables
Play the Game
Build Card Deck
Draw Random Card
Build Card CSS
Visual Card JavaScript Builder
Game Logic Play Conditions
9 Code Review and Tweaks.mp4
High Low Card game final source
12 Topics
Reaction game project introduction
Click Reaction Game.
Make it interactive
Player Message
Start the Gameplay JavaScript
JavaScript Math Random
JavaScript Create Elements
Random Colors JavaScript
Set Timeout Game
Interactive Dynamic Element
Reaction Game Review
Click Reaction Game FINAL source Code
11 Topics
Hidden word game project introduction
Setup Word Guess Game
JavaScript start Game
Foreach Arrays JavaScript
build interactive elements
Add Game Play Show Word
Check Correct and Win
JavaScript Date Start Timer
Game Tweaks and Update
Source Code Review
Final Source Word Scrambler
17 Topics
Car game project introduction
JavaScript Car Game Setup
KeyPress Event Listeners
RequestAnimationFrame Method
Move Div with Keypress
Road Builder
Road lines moving
Road Line Movement 2
Generate More Cars.
Check Collision Detection
End Game Scoring
Restart Game Function
Random Color value
Game Tweaks and adjustments
Quick CSS update
Car Game Code Review
Final Source Code Car Driving Game
6 Topics
Character counter project introduction
TextArea Character Counter Setup
Add Eventlisteners Multiple
Character Counter
Character Warning Message
Final Source Code Character Counter
8 Topics
Element scroller project introduction
Text Scroller Setup
Setup Scroll JavaScript
Ready set Scroll
Mouse Over stopper
Dynamic Speed Interactive
Scroller Code Review
Element Scrolling Content Final Source Code
10 Topics
DOM fun project introduction
DOM Element Fun
Clone elements
Moving New Elements.
Drag new elements
Random Color Generator
Trash Bin for Elements
Remove Elements from Page
Code Review DOM Elements
DOM element Final Source Code
6 Topics
Click counter project introduction
Just JavaScript Click Example
Create Element Interaction
Complete Click Counter
Clicker Code Review
All JavaScript Click Counter Final Source Code
7 Topics
Image popup project introduction
image PopUp
Interactive Elements Images
Add image src to popup
Add close interaction
Image PopUp Code Review
Image PopUp Final Source Code
11 Topics
Hangman game introduction
Setup Hangman Game
Random Sort Array
Build the Game Area
Add Alphabet Letters
Add Event Handler
Game Logic Checker
Game End and restart
Final Tweaks and Clean Up
Final Code Review Hangman Game
Final Source Code Hangman game
7 Topics
Modal popup project introduction
JavaScript Modal Setup
Make you page Interactive
Show Modal
Hide Modal Remove Class.
PopUp Modal Code Review
Popup Modal Final Source Code
10 Topics
Slideshow carousel project introduction
Project Introduction
Setup JavaScript Slideshow
Add Content with JavaScript
Build Content for User
Adding clickable Indicators
Play SlideShow
Indicator Click Handle
SlideShow Code Review
Final Source Code Image Carousel
8 Topics
Star rating project introduction
Star Rating Setup Code
Add Event Listeners
More Events to Add
Manipulate Elements
Star Message To User
Star Rating Code Review
Final Source Code Star rating project
15 Topics
Plane bomber game project introduction
Game Area Setup
KeyBoard Events
Start Game
Add animation frame
Game fixe
Game Scoring
Show Scoreboard to player
Add Enemy Base
Make the bombs
Move bombs Automatically
Collision Detection
Final Gameplay Tweaks
Bomber Plane Code Review
Plane bomber Game final source code
5 Topics
Accordion project introduction
Setup HTML and JavaScript
Add some JavaScript
Remove Active
Accordion Component Final Source Code
11 Topics
Box chaser game project introduction
Setup Box Chaser Game
JavaScript bring your project to life
Build the Grid Dynamically
KeyBoard Events Movement
Move element on page
Set boundaries of GameArea
Create Active Element
Final GamePlay Updates
Box Chaser Game Code Review
Final Source Code Box Chaser
6 Topics
Tooltip project introduction
Creating ToolTips with JavaScript
JavaScript Select Elements.
Display Tooltip data
Tooltip Code Review
Final Source Code Tool Tip
7 Topics
Email extractor project introduction
Email Extractor Application
Use of RegEx Pattern Match
Output Emails only
Remove Duplicates from array
Email Extractor Code Review
Email Extractor Final Source Code
6 Topics
Popup message project introduction
PopUp Message Setup
Element Interaction JavaScript
Hide Show PopUp
Code Review PopUp Message
Final Source Code Popup Message
6 Topics
Copy to clipboard project introduction
Setup copy to clipboard
Add interaction Event Listeners
Clipboard app final tweak
Copy to Clipboard Code Review
Copy to Clipboard Final Source Code
10 Topics
Calculator project introduction
HTML Setup and CSS
Build a Calculator JavaScript
Add Calculator Keys
Click the button.
JavaScript Eval Method
Check Last Character in String
Calculator Fix
JavaScript Calculator Code Review
Final Source Code JavaScript Calculator
9 Topics
List editor maker project introduction
Grocery List Maker Setup
Create Dynamic Content
Add Event Listeners
Add item to List
Edit Element Content
Code Tweaks
Code Review List Application
Final Source Code Shopping list updater
7 Topics
Placeholder project introduction
Image Path Generator
Make the form interactive
Generate Image Path
Tweak and Updates
Image Generator Code Review
Placeholder Image path generator final source code
9 Topics
Element catcher project introduction
Game HTML Setup
DOM MouseEvents
Create Target Element
Eventlisteners on new elements
Animate the new element
Add Scoring Game Tweaks
Code Review Catch Me Application
Final Source Code Catch me Game
8 Topics
Mouse event project introduction
Reaction Game Setup
Play the Game.
Create Target Element
Event Handling Element
Continue GamePlay
Code Review Reaction Game
Final Source Click catch reaction game
10 Topics
Form validation project introduction
Setup Email Form
JavaScript Event Listeners.
Get all input values
Check length and Required.
Check for Valid Email
Valid Password Checker.
Final Code Updates
Validation App Code Review
Final Source Code Form Validation
11 Topics
Cookie project introduction
Setup Cookie Tester
Select Elements Add Events
Updated Date Object
JavaScript Set Default Date Value
Input Name and Value.
Set Cookie JavaScript.
Update and Delete Cookie
List Cookies
Cookie Machine Code Review
Cookie Tester Final Source Code
14 Topics
DOM project introduction
Element Selection
Element Events.
Element Manipulate Content
Element Updater
Add Remove Classe
More Classes DropDown
More Elements in DropDown
DropDown Builder.
JavaScript Add New Elements.
Create Element Dynamically
Element Remover
DOMinator Code Review
FINAL source code for DOM interactive Project
12 Topics
CSV maker project introduction
Setup CSV Maker
Setup Data Values
Process CSV Data
Avoid Memory Leaks
Create CSV File.
Export Fixer
Final CSV exporter Source Code
Please note the following 3 lessons on Google Sheet Data will no longer work
Google Sheet Data
Fetch Data from JSON
Google Sheet to CSV
17 Topics
Flapping birdy game project introduction
Game Setup Structure.
Add Event Listeners
Keyboard event tracking
Add element to page
JavaScript RequestAnimationFrame
Move Conditions
Wing Movements.
Scoring and gravity.
Game End Conditions.
Create Obstacles
Moving Obstacles.
Checking Collision Detection
Handle Game Over
Game Code Review
Bonus Add Color
Flying Bird Game Final Source Code
11 Topics
Number guess project introduction
Number Guess Game Setup
DOM content Loaded
Game Setup Function
Get Random Number
Add Event Listener
Element Manipulation DOM
GameOver and Restart
Code Tweaks
Number Guesser Code Review
Number Guessing Game Final Source Code
14 Topics
Catcher game project introduction
Setup Game Elements
Add Styling CSS
Start Game Button
Keyboard event Listener
Add Animation frame
Stay within Container
Setup Bad Guys
Move the Elements
Check Collision
End the Game
Customize GamePlay
Dropper Elements Game Code Review
Element Catcher FINAL SOURCE code
18 Topics
Alien invader game project introduction
Game Play Setup
Start Game Action
Move Player Keyboard
Starting the Game
Container Boundary.
Fire Away Shooting
Start Game Prep Aliens
Create some Aliens
Add Eyes and Features.
Lets Get Moving
Tweaks and Fixes
Hit Detection
Hit Target handle
Final Code Tweaks and Updates
Quick Fix Alien Count
Alien Invader Code Review.
Final Source Code Alien Invader Project Game
17 Topics
card war project introduction
Game Area Setup
Start the Game
Create Deck of Cards
Create Game Players
Deal the cards.
Make Cards for Players
Make the Card Look Better
Game Logic
Handle Winner of Deal
Multiple Rounds Attack.
Fix Playoff Function.
Game Restart
Tweaks and Fixes.
Battle Game Code Review
Debug of Playoff Issue
Card Game Final Source Code
11 Topics
YouTube API Introductio
Setup web dev environment
YouTube API key
Create Fetch request.
Event Handler
Handle Response Data
JavaScript Map Prototype
Fetch Update
Next Page
Next Page part 2
Code Review YouTube API
15 Topics
Brick Breaker Game
Game Setup
Create Elements
Keypresses Interaction
Start Game Setup
Setup Bricks
Create Brick
Quick Fix
Bouncing Ball
Collision Detection
Brick Breaker
Tweaks and Adjustments
Tweaks and Adjustments 2
Tweaks and Adjustments 3
Code Review
16 Topics
JavaScript Objects OOP introduction
Section PDF download and Resources
JavaScript Objects
Car an Object
Shopping Cart Challenge.
Shopping Cart Challenge 2
Shopping Cart Challenge 3
Object Oriented Programming
Objects Construction
Dice Game OOP
Dice Game OOP 2.
Shopping cart OOP
Shopping cart OOP 2
Shopping cart OOP 3
Shopping cart OOP 4
Shopping cart OOP 5
18 Topics
Section Deal Game Introduction
Development Setup.
Setup HTML and DOM
JavaScript Page Elements
Make it Look nice CSS
JavaScript Interactive Elements
Start Game features
Modal Popup Window.
Build Game Board.
Build Game Board Part 2
Build Game Board Part 3
Check the Case
Check the Case 2.
Game Player Offers
Accept or Decline Offer.
Final Tweaks and Adjustments
Source Code
Deal Game Conclusion
11 Topics
Scroll Loader Introduction
HTML page setup
Get Data JSON fetch Request
Output Data to Web Page
On Scroll Load More
Source Code
Load more content on Scroll
Source Code
User Message Box.
Source Code
Scroll Tweaks and Conclusion
29 Topics
Introduction to JavaScript BlackJack game
Source Code and Files
1 Web Developer Setup HTML
2 Get coding JavaScript.
3 DOMContentLoaded run app code
4 Game Variables Element Building.
5 Remove HTML only JavaScript
6 HTML buttons with JavaScript
Source Code
7 Deck of Cards.
8 Shuffle Deck of Cards
9 Add Event listeners to Buttons
10 Button Toggle On Off.
11 Dealing of Cards.
12 Show card on WebPage
13 Element CSS.
CSS Source
14 Hide Top Card
15 Begin Game Play Conditions Part 1
16 Begin Game Play Conditions part 2.
17 Add Game Player options
18 Dealer Playing Game
19 Find the Game Winner.
20 Game Tweaks and Adjustments.
21 Game Bets and scoring
Source Code
22 GamePlay Updates
23 Final Updates
24 Final Code Review.
17 Topics
Common Questions with code examples
RemoveNode from Parent How to use removeChild Method Example
Quirks Mode JavaScript
Before and After Insert. with JavaScript
Append Prepend with JavaScript
window request and cancelAnimationFrame.
parseInt vs Number methods
Switch Statement
JavaScript Continue and Break Statement
Add Page Elements - Add Keyboard event listeners
Create Elements on the Page add Event Listeners
Source Code
Pure JavaScript Dice Maker - Only using JavaScript create Rolling Dice
JavaScript Fetch vs XHR
How to Create a Dynamic List from a JSON file
Try Throw Catch Finally JavaScript Code Example
Array Map Example
11 Topics
Section Source Code and exercises
Web page dynamic welcome message
Web Page Counters
Counters with Function Expressions and Function Declarations
JavaScript DOM element Creation and Styling with code
DOM page slider with interactive elements
JavaScript Email Extrator RegExp with match method on string values
Simple Random Number Guessing Game
Lock Combo Guessing Game
Adding Fade Effects to new and existing Page Elements
Create Page elements with Code
26 Topics
JavaScript Coding Examples Guide
Pure JavaScript Fade Effect
Fetching Data with JavaScript
JavaScript Counting vowels
Simple JavaScript Closure
Create Page Elements with JavaScript
Create an Interactive List with JavaScript
JavaScript to create new page elements
JavaScript and JSON data
JavaScript Closure Examples
HTTP request and fetch Request
JavaScript Image Gallery
JavaScript Closure
Adding Page elements with JavaScript
Use of Template Literals
Use of Strict
Use of Higher Order Functions
Use of ForEach
Use of Arrow Functions
Let and Const Variables
JavaScript Destructing Objects and Array
JavaScript Coding example add list item
change background color
change image source
change Image path
Toggle visibility of elements
12 Topics
Deep Cloning an Object
Implementing a Simple Promise
Custom Map Function
Debouncing Function
Throttle Function JavaScript
Simple Router Implementation
Image Lazy Loader
Flatten Nested Array
Drag and Drop with JavaScript code
Custom tooltip with JavaScript
Currying Function Advanced JavaScript
Modal Window with JavaScript
Complete JavaScript Projects Course Games 55 Modern JS DOM
Related JavaScript Courses
.webp)
Thank You!
Your review has been submitted successfully.