Modern JavaScript Projects Course 60 plus Apps Games DOM

Master the core JavaScript fundamentals and basics of adding JavaScript to pages, guided by a 200+ page PDF with code samples and challenges like template literals and a miles-to-kilometers converter.

Discover how JavaScript powers modern web apps by mastering core concepts, setting up your development environment, and using tools like brackets, Chrome dev tools, and CodePen to practice.

Trace JavaScript history from Netscape's Live Script to Ecmascript nine and see how it powers HTML in browsers. Experiment with the browser console and basic variables to practice interaction.

Declare and assign JavaScript variables using the equal sign and console.log values. Observe dynamic typing and updating variables that may hold numbers or strings.

Master declaring variables with let, const, and var in ES6 JavaScript. Explore data types like booleans, strings, numbers, undefined, and null, and learn about scope and reassignment.

Explore JavaScript operators in depth, including assignment operators, increment, concatenation, and arithmetic like addition, subtraction, multiplication, and division; practice predicting console outputs.

Create a miles to kilometers converter by prompting how many miles and converting the input to a number. Multiply by 1.60934 and log a template literal message with the kilometers.

Explore comparison operators, including equal, strict equal, not equal, and greater than, and less than, and learn how truthy and falsy values, undefined, null, and NaN influence console conditions.

Explore function parameters and multiple arguments, including three default-value methods: modern default values, undefined checks, and a ternary operator. See adder functions illustrate arguments and defaults.

Define and use functions with input, code, and return values to multiply two numbers, log results, and compare function declarations with anonymous function expressions.

Learn how to execute a function from an html element using an onclick attribute, invoking message one, two, and three, with counters and console output to illustrate basic function calls.

learn to modernize event handling by removing onClick attributes and selecting all buttons with document.querySelectorAll, then attach click event listeners in JavaScript, accessing the DOM and node list.

Explore declaration and expression functions in JavaScript, comparing hoisting, placement, and flexibility. The lecture demonstrates two functions that each add five to a number, producing ten, and previews function scope.

Explore JavaScript function recursion that creates a loop by a function calling itself until it matches a secret number. Use prompts and a ternary hint to go higher or lower.

Explore JavaScript immediately invoked function expressions (iife) and their self-executing anonymous design, learn how to invoke, scope variables, pass arguments, and return values with practical examples.

Explore ES6 arrow function syntax as a shorthand for traditional functions, and learn browser compatibility with Babel to convert code to older versions and test console output.

Explore JavaScript objects and arrays, learn dot and bracket notation, access properties and methods, and understand let and const within objects, with practical car and person examples.

Explore how JavaScript objects and arrays work, and create object methods to turn a car on, drive, and output actions to the console using this.

Learn to create objects with functions by passing color, miles, and company as parameters, constructing car objects like my car, and logging results to the console.

Explore arrays in JavaScript by using a single variable to hold mixed types, including objects and nested arrays, and learn to access values with zero-based indexing, dot and bracket notation.

Create an array of objects in a loop from one to nine with template literals for names and odd/even status, then log and filter to true objects.

Use the map method to transform an existing number array into a brand new array by multiplying each value by 50 and logging the results to the console.

Master core JavaScript fundamentals and apply concepts to build more advanced applications using in-browser practice. Access downloadable slides, revisit lessons, and connect with the instructor for clarity.

Explore the JavaScript DOM and the document object model, learn to select elements, access the document, and update content and styles with innerText, innerHTML, and querySelector.

Learn to select DOM elements by id, class, tag, and CSS selectors with querySelector or getElementById, then update their background color using the element's style attribute.

Master element manipulation using innerHTML, innerText, and textContent, and learn to set and get attributes and styles. Complete a sequencing challenge by updating list items and classes and removing elements.

Select all link elements with querySelectorAll and loop through them to read and set href attributes. Update list item ids and text content while inspecting classes in the console.

Traverse dom by selecting an element, then explore its children, parent, and siblings; compare html collection of children with node list of child nodes and view next and previous siblings.

Learn to create elements and text nodes with createElement and createTextNode, then insert and append them. Use append, appendChild, and insertBefore to place elements and add text content.

Learn to attach and remove event listeners on elements using addEventListener, handle clicks and other events, and toggle the red class on elements with the class list item via querySelectorAll.

In this challenge, students select all images with querySelector, loop through them, and make them clickable to open a popup showing the image source with window.open and addEventListener.

Listen for keydown and keyup events across the document or inputs, track pressed keys in a dynamic object, and update visuals based on key codes and input length.

Track key presses with a keydown listener and output the related key and keyCode. Create list items appended to an unordered list for each pressed key.

Learn how to handle mouse events in JavaScript, including mouse over, mouse out, mouse enter, and mouse leave, using event listeners to toggle classes and styles on list items.

Explore JavaScript number methods, including parse integer and two fixed, to convert values to numbers, format decimals for currencies, and validate numeric input.

Master JavaScript math basics, including random numbers, floor and ceiling, and their use in games. Implement a getRandom(min, max) function with inclusive min and exclusive max.

Combine includes with the ternary operator to produce yes or no, then build a function that generates 50 random numbers from 1 to 20, excluding specific values via recursion.

generate a random hex color using math random, substring, and base 16, then prefix with a hash. update the page background by clicking a button using a dom event listener.

Explore the JavaScript date object, create and set dates with new Date, and read year, month (zero-based), day, and time. Learn about milliseconds since 1970 and UTC versus local time.

Learn to stringify JavaScript objects into JSON strings and parse them back into objects, with practical examples and tips for handling undefined, functions, and date objects.

Master local storage by storing, retrieving, updating, and clearing values in the browser. Learn to increment a counter on page refresh and store objects using JSON stringify and parse.

Learn to use JavaScript timers to schedule code with setTimeout and setInterval, manage interval IDs, and apply requestAnimationFrame for smooth animations, including a countdown example.

Explore regular expressions in JavaScript by creating patterns and using flags to match, replace, test, and search strings. Practice with examples that extract words, digits, and emails.

Explore JavaScript prototypes by extending object prototypes to add methods like full name and greet, extend the date prototype to add days, and prototype-based object creation and inheritance.

Explore try catch in JavaScript, throwing custom errors and using finally to run code. Handle inputs with DOM, validate values, and display clear error messages before resetting the field.

Explore advanced JavaScript by combining concepts to build more impressive projects, using the included guide, code samples, and source code to tweak in your editor and browser.

Learn to draw a line in canvas by selecting the canvas, getting the 2d context, starting a path at 0,0, moving to 300,100, and stroking the line.

Learn to draw a circle on a 600 by 200 canvas with a black border and red fill, and adjust stroke and fill order and line width to change appearance.

Learn to draw a semicircle on a canvas using JavaScript by beginning a path, configuring the arc with x, y, radius, start angle, end angle, and stroking the path.

Animate a blue square across a canvas using the request animation frame, with adjustable speed and size, looping back after reaching the canvas edge.

Master interactive web development by building a tip calculator that takes user input, performs a calculation with JavaScript, and updates the HTML to show the tip amount.

Select the value of a number input and display it in the output element using querySelector and the input's value property.

Build a customized JavaScript welcome message by reading input values, updating the inner text in HTML, and using a button click event listener to display Hello, Welcome, [name].

Create a dynamic welcome message that changes with time of day using date object. Use event listeners, query selectors to update inner html and background color with adjustable time variable.

Attach click event listeners to button elements, loop through the button node list, and use event.target and innerText to distinguish heads or tails in a toss coin interaction.

Introduce randomness in a JavaScript game by using Math.random and Math.floor to generate a heads or tails toss, compare with the player's guess, and track wins and losses.

Build a heads or tails game by comparing the player's guess with the computer's random guess using if-else logic, update scores, and display outcomes.

Explore building a rock paper scissors game with three buttons for rock, paper, and scissors, implementing win conditions, random opponent choices, scoring, and winner logic.

Make the page interactive by looping the button node list, attaching click listeners, and using the clicked button's inner text to drive a rock-paper-scissors game that updates the score.

Improve a JavaScript game by randomly selecting the computer, handling player input, determining the round winner or draw, and updating the score display with a score array and innerHTML.