Modern JavaScript Projects Course 60 plus Apps Games DOM

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.