MONSTER

400+ Code Snippets

500+ Lessons

JAVASCRIP
50+ Projects & Challenges

T
 https://www.udemy.com/javascript-course-projects/
By Laurence Svekis

MONSTER
JAVASCRIP
T
 Course Tips

Welcome to the course introduction

How to use this course
● Learn core concepts of JavaScript - for beginners as well as
current coders.
● Practice JavaScript
● Expand your portfolio - over 50 projects that can be used to
extend on and showcase.
● Create real world code useful for larger projects
● Skip to lessons or do them in order. Lots of content
● Apply JavaScript in Fun mini projects

Laurence Svekis - Instructor

● 18 Years of web development experience
● 500,000+ Students
● Course instructor since 2002
 Get the Most out of the course

Tips for Success

● Source Code is included so you can try the code in your
editor and render it in your browser
● Challenges along the way - TRY THE CODE
● Dedicate time - there is a lot of content a regular schedule
will get you to the end.
● Check out the links and resources for further learning
 Need HELP

Stuck I’m here to help you.

“I’m always ready to help you learn!!!”
Message me or ask within the Q&A section to get more details.
● Clarify content
● Error
● Troubleshoot issues
● New content suggestions
● Course improvements
● Share your successes
Share as much details as possible to help better assist you.

Screenshots - Code snippets - Error messages - Whatever you have

to help understand and diagnose the issue.
 Prerequisites

What is covered and what is NOT

HTML and CSS are not covered!!! - You should have hands on
experience with HTML and CSS
Core focus is JavaScript
No libraries or short cuts covered
Only JavaScript - Vanilla JavaScript
You should already have everything you need.
Have an internet connection - and Browser which you already likely
have.
 Projects

Different ways to try the project code.

Each section has a single working mini application
1 PROJECT = 1 SECTION in the projects sections
Please note that most projects are done within one HTML file to avoid
having multiple files and make it easier for students to copy and
paste.
First LESSON Project Introduction :
Ways to learn from the project
1. Watch each lesson in sequence and try the code alongside
the lessons.
2. Watch the first lesson, try to build a similar application
then watch the videos on how to make it.
3. Watch all the lessons then build the project on your own.
 Projects - MORE

You don’t have to do them in order!

The projects have the core JavaScript code introduced at the first
lesson.
The projects do get progressively harder but not always the case it
depends on YOU. You don’t have to take them in order it’s just
suggested to be in that order.
Most lessons will have a download code snippet attached
The best way to learn is to try the code… did I mention this before
:)
 Projects - Learning Objectives

What to expect
Wide Audience of students with different
experience and skills.
● Each Section has its own learning objectives
● Made for students of various levels of expertise
● Fast pace learning - right to the point
● Content stays on the objectives
● You can 2X the video speed - I don’t mind - nor will I know
● Step by step approach
● Code is presented in simplified format so all students can
benefit the most from the lessons
● You may find some project content to be repetitive - I do my
best to have variety but the steps to make applications can
be similar unfortunately .
 Projects - EVEN MORE

Make your own version - showcase it in your

portfolio

After you complete the project you can continue to extend on it.
The design is a simple working model.
Very little CSS is used - YOU CAN MAKE THEM LOOK WAY BETTER -
I guarantee that. I try to spend as little time as possible on the CSS
as it’s not the focus of what the course is about.
Feel free to create your own versions and use the projects in your
portfolio. I want you to have a wide variety of content to showcase
your skills.
You can always go back on the projects and try them again.
 HELP

Your success is my GOAL YOUR SUCCESS

This course is put together in a step by step process to help you
learn. If you feel something is missed or needs more clarity let me
know.
Q&A and direct messages I do my best to respond ASAP usually
within 24 hours on weekdays.
I also plan on regular updates and additions of new content
depending on what feedback and questions I get in the Q&A.

HAPPY CODING :) Don’t forget to try the code. I will

bug you again, and again.
JavaScript core fundamentals
Getting started with JavaScript
 JavaScript core fundamentals

Downloadable PDF reference GUIDE

This Section Lessons are based around this guide
Over 200+ pages
Includes
● Links to resources
● Code snippets
● Challenges with solutions
● Lesson outline and guide
● Notes on lessons
*Copy and paste the code samples use it as a
reference to the section content.
 JavaScript core fundamentals

Challenges
● Use template literal in code
● Create a Miles to Kilometer converter taking
user input in miles then outputting the value in
kilometers
● Hello greeter - customized greeting to the user.
● Looper array building code
 JavaScript core fundamentals

Learn how to code with JavaScript creating amazing

interactive and dynamic web applications that run in
your web browser.
● Very basics of what JavaScript is and how it
works.
● How to add JavaScript to your web pages
● What you need to write JavaScript code
● Some history - really brief
 JavaScript core fundamentals

● Commenting in code
● Why we comment
● JavaScript Variables
● Assign values - let, const, var
● Variable Setup
● JavaScript Data Types
● Get user input with prompt
● Quotes and Backticks - Template Literal
● JavaScript Operators * - / +
 JavaScript core fundamentals

● Comparison Operators
● If Else Statements
● Ternary Operator
● Handle Multiple Conditions
● JavaScript Switch statement
● JavaScript Functions
● Brief about CLICK event handling
● JavaScript Objects
● JavaScript Arrays
● Array methods
● JavaScript Loops
JavaScript Web page interaction
and dynamic content DOM
 JavaScript Document Object Model

JavaScript Document Object Model creating

interactive and dynamic content with JavaScript
60+ PAGE Downloadable PDF Guide
Includes
● Links to resources
● Code snippets
● Challenges with solutions
● Lesson outline and guide
● Notes on lessons
*Copy and paste the code samples use it as a
reference to the section content.
 JavaScript Document Object Model

Make your content dynamic

● What the DOM is
● JavaScript Element Selection
● Multiple element selection
● Changing things - Element Manipulation
● Element Classes
● Element Children and Traversing
● Element Attributes
● Style Attribute updates
● DOM create Elements
 JavaScript Document Object Model

Challenges
● Dynamic Image Popup
● List Items updater
● Background Color Changer
● Editable list add remove strikethrough
 JavaScript Document Object Model

Make your pages interactive

● Event Listeners DOM.
● Click events
● Key Press Events
● Event Bubbling and capturing
Tip Calculator - Project
 Tip Calculator - Project

Use Math to calculate a value. Get an input from the

user and use it in the calculation. Update the HTML
to show the final value.
● querySelector()
● addEventListener()
● Template Literal ${tip}
● (cost.value *0.15).toFixed(2);
● Set innerHTML
Welcome messages Customized
JavaScript messages
 Customized JavaScript messages

Short only one lesson :) Get input value and output

to the screen a welcome message to the users name
that is entered into the input field.
● document.querySelector()
● button.addEventListener()
● output.innerHTML
Dynamically changing by time
welcome message
 Changing by time welcome message

Customized message using JavaScript dependent on

time of day
● document.querySelector()
● button.addEventListener()
● style.cssText
● const date = new Date();
● output.style.backgroundColor
● output.innerHTML
Coin Toss Application - is it
heads or tails
 Coin Toss Application -heads or tails

Coin Toss Application - is it heads or tails JavaScript.

Simple VS game you against the computer.
● const coinArray = ["Heads", "Tails"];
● document.querySelector()
● document.querySelectorAll()
● for (let i = 0; i < buttons.length; i++)
● buttons[i].addEventListener()
● e.target.innerText
● Math.floor(Math.random() * coinArray.length);
● if (playerGuess === computerGuess)
Rock Paper Scissors Game
 Rock Paper Scissors Game

Who wins ??? Rock Paper Scissors

Paper > Rock > Scissors > Paper > Rock
Pick one at random - see who wins
● Apply Logic conditions for win
● Math.random();
● if (computerSelection < 0.34) {
Ultimate Dice Game
 Ultimate Dice Game

Apply game logic and flow making a JavaScript Dice

Game. Highest rolls wins you vs the computer
● Visual Dice with CSS and Style
● Game Play Win logic
● Random for computer and player roll
 Ultimate Dice Game

● document.querySelector()
● const dice =
[[5],[1,9],[1,5,9],[1,3,7,9],[1,3,5,7,9],[1,3,4,6,7,9]];
● button.addEventListener("click",
● let rolls = [roll(6),roll(6)];
● else { temp="Player 2 wins"; }
● el.appendChild()
● el.children[0].remove()
● document.createElement("div");
● for(let x=1;x<10;x++){
● span.classList.add()
● span.setAttribute()
● Math.floor(Math.random() * num) + 1;
Play audio files and sounds with
JavaScript
Play audio files, sounds with JavaScript

Create interactive audio using JavaScript. Click a

button play an mp3 file.
● const myArray = ["lion", "cougar", "bark"];
● document.addEventListener()
● setAttribute()
● document.createElement()
● document.body.appendChild(div);
● let sound1 = new Audio("sound/" + name +
".mp3");
● classList.remove() and add()
JavaScript Dynamic Typing Test
 JavaScript Dynamic Typing Test

Create an interactive typing test for web users with

JavaScript code
Features
● Random Phrases for typing test
● Counts start time and end time
● Checks for errors counts errors in words
● Shows Results
 JavaScript Dynamic Typing Test

Code behind the scenes

● const wording = [‘’]
● document.querySelector()
● button.addEventListener("click",
● let date = new Date();
● endTime = date.getTime();
● let speed = Math.round((wordCount / totalTime)
* 60);
● let response = strWords.split(" ").length;
● words1.forEach(function (item, index) {
● let randomNum = Math.floor(Math.random() *
wording.length);
● button.innerText = "Done";
Functionator JavaScript
Function practice Code
 Functionator Function practice

Learn and explore more about functions

● All JavaScript NO HTML
● Press Keys setup movement
● Remove actions by click
● Run Action Sequence when ready
● The Box will move
● Change the box color and content
 Functionator Function practice

● const movementArray = ["right", "left", "up",

"down"];
● myBlock.style.width height backgroundColor
color lineHeight textAlign position top
● document.body.appendChild(myBlock);
● addEventListener("keydown", function (e) {
● let keyC = e.keyCode; if (keyC === 37) {
● Math.random() - for color
● myBlock.getBoundingClientRect();
● funList.shift(); - Array methods
● el.textContent.replace("+", "");
● myFunctionList.removeChild(el);
● span.addEventListener("mouseover"
● myBlock.offsetLeft; - Position on screen
Magic Eight Ball JavaScript
 Magic Eight Ball JavaScript

Magic 8 Ball - find out the answer to your questions

● Getting data from input field
● Random return of results
● Simple random response - doesn’t actually
analyze anything
● const answerArray = [....]

● document.querySelector()
● button.addEventListener("click",function(){
● Math.floor(Math.random()*answerArray.length)
Combination guesser Game
 Combination guesser Game

Random values and DOM manipulation

● Can you guess the secret combination
● Random combinations
● Provides feedback when wrong value is
selected - Blue guess was low - Red guess was
high - Green guess was correct
● Tracks guess count
● No HTML elements all JavaScript created
 Combination guesser Game

● document.querySelector()
● button.addEventListener("click", function () {
● gameArea.innerHTML
● document.querySelectorAll()
● for (let i = 0; i < numbers.length; i++) {
● Element.style
● document.createElement("input");
● el.correct = Math.floor(Math.random() * 10);
Word Scramble - guess the word
 Word Scramble - guess the word

JavaScript arrays - randomize array contents Element

selection and manipulation of DOM content
Simple random word scramble - check if the input
matches the random word
 Word Scramble - guess the word

● document.querySelector()
● const myArray = ["javascript", "website", "html",
"document", "course", "new"];
● button.addEventListener("click", function () {
● guess.classList.toggle("hidden");
● randomArray(scramble.split("")).join("");
● Math.floor(Math.random() * myArray.length);
● for (let i = arr.length - 1; i > 0; i--) {
Countdown Timer
 Countdown Timer

Countdown Timer - Pick a date and see how much

time is left with a dynamically updating counter
● Local Storage to store end time
● Time Interval and clear for website updates
● Date calculation
let t = Date.parse(d) - Date.parse(currentDate);
● Math to get time
let seconds = Math.floor((t / 1000) % 60);
Pattern matching game
 Pattern matching game

Pattern matching game Use of JavaScript to setup

game board grid. Watch a sequence of light up
colors. Click the colors in the same sequence to
progress.
● Math to create random sequence
● setTimeout to light up element
● Element style manipulation
Click Popper Game from scratch
using JavaScript
 Click Popper Game

Create a fun interactive DOM based game with

JavaScript. Click only + items as they show up, see
how much you can score in the time provided.
● Use only JavaScript to create the gameboard
● Player scoring and element values
● Game play timer - setTimeout
● Math random for random position
● Click tracking for hits of element
Hi Low Card Game from scratch
using JavaScript mini project
 HI LOW Game

Create an interactive simple card game which the

user needs to select either higher or lower guesses
on the following cards using the current card as the
value.
What’s next Higher or Lower card?
● Build a deck of cards array and objects
construction
● Create elements
● Add style and CSS
● Random cards
● Check win/loss
Click Shape Game
 Click Shape Game Reactions

Random shapes appear on screen the objective is the

user needs to click them quickly. JavaScript mini
game using the DOM for element updates and
manipulation.
● Only JavaScript to style and create elements
● Add event listeners
● Position elements on the screen setTimeout
● Random Color Short Function
Word Finding Game
Word scrambler
 Word Finding Game

Hover over the red boxes to find scrambled words.

Click the one that matches the select this word value.
● Random reorder word letters
● Words from array
● Con time it takes to solve all the words
● Manipulate elements to show red Select and
show word when hover occurs.
JavaScript Car Game
 JavaScript Car Game

Drive your car avoid the other cars. Use the

keyboard to move the car element. Random
movement of other cars.
● Use of RequestAnimationFrame
● Movement of element on Keypress
● Element manipulation CSS and Style
● Check Collision Detection
Input field Character counter
 Input field Character counter

DOM selection and manipulation with input fields

and updating getting values from form inputs using
JavaScript
Turn red when the max number of characters is
reached.
Element Scrolling Content Code
Snippet
 Element Scrolling Content

Apply JavaScript to select elements and event

triggers. Use JavaScript to move element contents,
track position of element and mouse. Update scroll
speed.
Fun with the Document Object
Model
 Fun with the Document Object Model

clone elements - update element style and move

elements. Random Color Generator. Create
elements, move elements, remove elements.
Just JavaScript Click Counter
 Just JavaScript Click Counter

Build content using JavaScript Only count user clicks

on dynamically created elements. Create elements
and add style all using Javascript.
Creating an image popup
window on image elements
 Creating an image popup window

JavaScript event listeners on images. Once clicked

image shows in div and rest of the screen is
darkened. Close the div send back to hidden.
JavaScript Word Guessing
Hangman game
 Word Guessing Hangman game

Create a dynamic and interactive game from scratch.

Create interactive letter buttons, dynamically.
Random word from an array. Check for letters in
word show results with feedback visually.
JavaScript Modal Popup
Example
 JavaScript Modal Popup Example

Create interactive popup windows using JavaScript

Manipulate elements using JavaScript. Shows modal
content in element, darkens the rest of page content.
 Image Carousel JavaScript
animated slideshow application
 Image Carousel animated slideshow

Interval timeout creating elements using JavaScript.

Animated and interactive image slideshow changes
images and text.
Star Rating project click and
hover events
 Star Rating project

Event triggers update element classes. Change

styling on hover and on click. Store results and
display to the user.
Plane Bomber game
 Plane Bomber game

Apply JavaScript to create an interactive game.

Keyboard events tracking and movement of
elements. Collision Detection of elements. Press
spacebar to drop elements on target.
JavaScript Accordion
component
 JavaScript Accordion component

Explore how to create an accordion component for

websites using JavaScript. Click to reveal hidden
element content under link. Remove visible on click.
Chaser Box game
 Chaser Box game

Create the game board using JavaSCript. Create one

box as green and another as red. Not the same one.
Track keyboard presses and move the red box until it
is on top of the green one.
Creating a tooltip popup with
JavaScript
 Creating a tooltip popup

Explore how to apply JavaScript to create a simple

tooltip code snippet. Show popup tooltip over
words when mouse is on top of element.
Email Exacter application
 Email Extractor application

Build a dynamic email extracting application with

JavaScript. Use of RegEx Pattern Match. Paste text
click a button see only emails, unique emails found in
string.
Popup message
 Popup message

Click an element, shows modal popup message with

close button. Message contents from element
attributes.
Clipboard - Copy and Move
 Clipboard - Copy and Move

Explore how you can use JavaScript to select content

from input fields and copy content to users
clipboard. Get content from textarea add content to
clipboard or other textarea.
Pure JavaScript Calculator
 Pure JavaScript Calculator

Use javascript arrays to create calculator dynamically.

Get input values and calculate output for display to
user.
Editable Shopping List
 Editable Shopping List

Create Dynamic Content from input values. Add

items to list, remove items from the list. Edit items
inline within the list. Update list items
Placeholder Image path
Generator
 Placeholder Image path Generator

Select input values add event listeners on change

update output content using JavaScript. Use input
values to create path for images from placeholder
Catch element game
 Catch element game

Moving element moves quickly, try to click the

element and see what happens. (it turns red)
Tracking of mouse coordinates and use of
requestAnimationFrame for animation.
Element Mouse and click events
JavaScript
 Element Mouse and click events

Create element track time it takes player to click the

element - JavaScript game. Exercise to practice
element style.
Create Form Validation
 Create Form Validation

Explore how to apply JavaScript to create form input

validation on form submission. Check values to
ensure they meet requirements set within JavaScript
conditions. Update element input field messages.
Cookie get set tester
 Cookie get set tester

Apply JavaScript to create interactive form to test

cookies. Get Set and Delete cookies from the
browser.
DOM interaction Application
 DOM interaction Application

Create a dynamic interactive web application to

update DOM elements, add toggle classes, create
new elements dynamically and remove elements.
Form selection and input fields to dynamically
manipulate elements.
Google Sheet data to CSV
 Google Sheet data to CSV

Create CSV files for download from arrays. Create

CSV for download using Google Sheet as data source.
User clicks and the file will download to their
computer.
Flying bird game
 Flying bird game

Listen for keyboard presses, track and move element

accordingly. JavaScript RequestAnimationFrame for
animation of content. Create Moving Obstacles for
difficulty. Collision detection between elements.
Number Guessing Game
 Number Guessing Game

Guess the correct number to win. Provides feedback

if number was higher or lower. Takes input value.
Element Catcher game
 Element Catcher game

Keyboard press for element movement. Animation

frame for iteration of function. Create elements and
remove elements with JavaScript. Catch all the falling
elements with your red box.
Alien Invader Game
 Alien Invader Game

Create aliens with CSS and JavaScript. Move aliens

down. Objective is to shoot with space bar to hit
aliens before they get to your level. Move the ship
with arrow keys.
Card War Game
 Card War Game

Create Deck of Cards. Create Game Players. Deal

the cards. Visual Cards for player. All players turn
over top card, whoever has the highest card gets all
the cards. Objective is to get all the cards in the deck.
Multiple Rounds Attack for enhanced gameplay, tie
value playoff.
 Congratulations on completing the section!

Thank you
This ebook uses https://developer.mozilla.org/en-US/docs/Web/JavaScript as a source for examples. Check out
more about JavaScript at MDN.

Find out more about my courses at http://www.discoveryvip.com/

Course instructor : Laurence Svekis -

providing online training to over
500,000 students across hundreds of
courses and many platforms.

https://www.udemy.com/javascript-course-pro
jects