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.

Create an index.html and link JavaScript to run in the browser with alert and console outputs. Explore inline versus external JavaScript (app.js) and HTML5 script tag usage.

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 how the JavaScript prompt creates user interaction, captures input into a variable, and outputs it to the console using plus-concatenation and a preview of template literals.

Discover JavaScript data types, including booleans, numbers, strings, null, undefined, and symbol, and learn type coercion and explicit conversion using toString and Number.

Explore JavaScript operators and the order of operations, including addition, subtraction, multiplication, division, and modulus. Learn how strings, booleans, and numbers interact through type coercion and how brackets affect precedence.

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 the ternary operator to shorten conditionals in JavaScript, using a true/false result to set status (adult or minor) and determine odd or even numbers with modulus.

Explore how to use JavaScript logical operators, including and, or, not, with a ternary check to control access based on age and membership.

Create a JavaScript time-based greeter by setting a 24-hour time and using if, else if, and switch logic to output to console.log: good morning, good afternoon, or good evening.

Explore how the JavaScript switch statement evaluates an expression against multiple cases, uses breaks and a default, and provides a cleaner alternative to many else-if blocks.

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.

Examine function scope, comparing global and local variables, and observe how the scope chain resolves values while redeclaration creates inner shadows and missing variables yield undefined.

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.

Objects and arrays in JavaScript are memory references, so their internal values can change even when declared with const. Reassignment with const causes errors; use let for reassignment.

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.

Explore how arrays power JavaScript projects by using methods like push, pop, shift, unshift, splice, and indexOf, and learn to access length and iterate through arrays.

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.

discover how javascript interacts with the dom to manipulate content, change elements, add classes and styles, and respond to click and mouse events, with a 60-page pdf guide.

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.

Select multiple elements with class, tag name, and querySelectorAll, iterating through HTMLCollection or NodeList with for loops or forEach. Update content and styles via DOM manipulation and template literals.

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.

Explore how to manipulate element classes with the classList API, including add, remove, toggle, and replace, plus contains checks and looping to apply changes across list items.

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 style web elements with JavaScript by updating the style property, including background color, color, border, font size, padding, and display, using document querySelector to target elements.

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.

Take input value on button click, and create a list item. Append it to an unordered list as a text node, with a length check for more than three characters.

Create a button that changes the page body background to a random rgb color using Math.random and Math.floor. Attach a click event with querySelector to update the body's background color.

Explore the event object and event target to handle click events on spans using querySelectorAll with a shared listener, then apply a random color to the clicked element.

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.

Build a dynamic list where you add items by pressing Enter, toggle a red strikethrough on click, and remove items with an X, including existing and new items.

Finish a dynamic grocery list app that adds items on enter, deletes items with the X, and applies a red strikethrough on click using DOM methods and event listeners.

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.

Select a random item from an array using math.random and math.floor, then output it to the document by appending a text node to the body.

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.

Use getBoundingClientRect to obtain an element's size and position (top, left, right, bottom, x, y, width, height) for selection and collision detection, practice updating a div and logging.

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 how encoding URL and encoding URI component differ in escaping characters, including spaces turning into %20.

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.

Master ajax concepts using XHR and fetch, track ready states, and handle status codes while parsing JSON and updating the page with server responses.

Use fetch to make promise-based requests, parse JSON, and update the DOM with dynamic data from an API on button clicks. Explore getting multiple results from the random user API.

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.

Learn to animate a blue rectangle moving across a 400-pixel canvas using a 2d context, with a reset button to restart and stop at the end.

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.

Learn to inspect and navigate document object model, select elements with JavaScript, and wire a number input, a calculate button, and an output area to compute and display a tip.

Select a single element with document.querySelector, access its innerText or innerHTML, and update the content, then output the button to the console to confirm the change.

Learn to use querySelector and querySelectorAll to select single or multiple elements with CSS selectors, access them via arrays or node lists, and update their inner HTML in JavaScript.

Learn to add an event listener to a button, handle click events with an anonymous function, and update the output element's text using document.querySelector.

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

Finish the tip calculator by adding a template variable and formatting currency with two decimal places using fixed, updating innerHTML to display the tip and total cost.

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].

Select the input value and display a customized welcome message when the button is clicked, updating the output area with innerHTML.

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.

Learn to display a dynamic time-based message using JavaScript and DOM manipulation, driven by conditional statements. Check the current hour with a date object and update an output element accordingly.

Simulate a coin toss game using math random to decide heads or tails; the player guesses, scores on a win, while the computer wins on a loss, with simple scoring.

Set up the coin toss game board with a message area and heads/tails buttons, then connect them with query selector and query selector all and prepare event listeners.

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.

Build a coin toss game from scratch using HTML and JavaScript, where players guess heads or tails, the computer makes a random toss, and scores update with win or loss.

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.

Set up the HTML core for a rock, paper, scissors game with score and message areas and three labeled buttons, then enable JavaScript interactivity and score updates.

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.

Implement the check winner function to compare player and computer selections in rock, paper, scissors, returning draw, player, or computer, with explicit win conditions and test scenarios.

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.

Learn to create a reusable messenger function that updates an on-screen message with player and computer selections and game results, including handling draws and score updates.