JavaScript and TypeScript: The Complete Guide (Vite & Node)

Explore infinity in JavaScript as a global number value, including negative infinity, arithmetic with huge numbers, and division by zero producing infinity.

Master if statements and else if chains, including nested conditionals, and use the modulus operator to determine even or odd numbers with clear console output.

Explore how JavaScript treats truthy and falsy values, including common pitfalls with inputs and the use of strict equality comparators and the not operator to validate values.

Solve two logical-operator challenges: use modulo with an if statement to check divisibility by three and five, and test strings for yes, no, maybe, or perhaps, printing pass or fail.

Practice switch statements to evaluate a grade and a day of the week, using fall-through for concise messages, handling invalid inputs, and learning when to apply switches.

master fizzbuzz with JavaScript and TypeScript by implementing 1–100 output using for loops, if-else, switch on true, and nested ternaries, highlighting proper control flow and best-practice cautions.

Demonstrate scope in JavaScript, including global, block, and function scopes, and how const and let stay within their blocks. Explain hoisting, showing how var differs and why to avoid it.

Explore guard clauses to bail out of functions early, replacing nested ifs with single-line returns and clearer checks for invalid inputs.

Explore how parameters passed by value work in JavaScript, showing that functions receive copies of primitive arguments from the stack. Modifications affect only the function's local values, not the originals.

Practice building an arrow function named Main that returns an anonymous function using two numbers, apply type aliases, invoke the main function, and log the sum.

Dissect callback functions, showing how to pass and invoke a function as an argument; define a TypeScript callback type and use anonymous callbacks with numeric parameters.

Learn how to create read-only objects with Object.freeze and its limits on nested properties, including optional chaining caveats. Explore type-level read-only properties in TypeScript and runtime enforcement.

Explore how arrays store multiple items under a single variable and grow dynamically. Learn TypeScript typing for arrays, unions, empty arrays, and indexing from zero with the push method.

Define a cart item type with product name, quantity, and price. Implement add item to cart and clear cart methods using consistent TypeScript syntax.

Explore tuples as fixed-size arrays defined by TypeScript and enforce immutability with the read only modifier. Destructure tuples and arrays, and use type aliases to simplify code.

Explore the map method to transform a student array into a new array with is adult, while preserving the original, using destructuring and rest/spread to omit age.

Explore using the find method to locate the first element that satisfies a predicate, returning that element or undefined, with a practical adult example and a challenge.

Discover how the filter method creates a new array by keeping elements that pass a predicate, without mutating the original, using a callback with element, index, and array, filtering adults.

Explore object oriented programming, learning how classes act as blueprints with properties and methods, and how constructors and the new keyword instantiate objects.

Build a recursive trim strings function in TypeScript that trims all strings within objects and arrays, including nested levels, while preserving original data types.

Explore how to implement generics with a data storage class in TypeScript, using optional constructor arguments and a private array, and expose safe access via getters and setters.

Explore how to constrain generics with extends in TypeScript, using type bounds, type guards, and utilities like record to enforce keys and values.

Explore indexed access in TypeScript to extract types from objects and arrays, using bracket notation, number indexing, and the type of operator for auto-complete and safety.

Explore methods to query the DOM elements using getElementById and querySelector, differentiate by id, class, and CSS selectors, select a form's inputs and button, and avoid numeric ids.

Explore how to listen for input events, access event targets and values, and parse numbers, while comparing onchange and addEventListener for single versus multiple listeners.

Implement the form logic to validate four inputs as numbers by converting them, prevent the page from refreshing with event.preventDefault, and log max and min values using Math.max and Math.min.

Explore client side rendering (CSR) with JavaScript to dynamically render a form and inputs using document.createElement, array.from, and DOM manipulation, and compare with static HTML.

Scaffold the project with vanilla TypeScript, install dependencies, and set up the HTML structure; implement a get element utility to query DOM elements and wire the to-do form.