Complete JavaScript, XML, AJAX and React Bootcamp - Hands-On

Learn how JavaScript enables client-side interactivity on web pages with form validation, alerts, text area character counting, and simple games, and how it differs from Java.

Learn how to place JavaScript in the head tag and call it from the body, using a dog years calculator that multiplies age by seven on a click.

Create an external JavaScript file, call it with a script tag in the head using a src attribute, and save as dog-age.js to improve maintenance and page speed through caching.

Explore JavaScript output techniques by using document.write to display the sum of two values on the page, and compare it to window.alert for a pop-up message.

Learn how the innerHTML function outputs data into an HTML element, using getElementById to target a paragraph and display the result of a simple calculation.

Learn to annotate JavaScript code with single-line and multi-line comments to explain function purpose, prevent execution of code, and document inner HTML usage for collaborators using double-slash and slash-asterisk syntax.

Explore how JavaScript constants are fixed values that can be numbers or strings, by adding five and six to output 11 in the paragraph with the id math, using quotes.

Explore how JavaScript variables act as named containers for numbers and strings. See x, y, and z store values and compute x plus y, then output the result with getElementById.

Learn how the equal sign acts as the assignment operator in JavaScript, assigning the right-hand value to the left operand, and see how 30 attaches to the text.

Explore JavaScript arithmetic operations using constants and variables, performing addition, subtraction, and multiplication, and display live results in the browser.

Demonstrate division with DX as 100 divided by 50, display the result; show X incrementing from 5 to 6 into Z, and H decrementing from 5 to 4 into K.

Learn how JavaScript operator precedence determines the order of arithmetic operations, following brackets, exponents, division, multiplication, addition, and subtraction, with a browser-verified example that evaluates to 750.

Explore JavaScript data types by examining numbers, strings, arrays, and objects, with examples like age, last name, cars, and a person object with properties.

Explore JavaScript objects by modeling a car with properties like name, model, weight, and color, and output values with dot notation (car.type, car.model) via get element by ID output method.

Learn to output multiple properties from a person object in a single line using string concatenation and the getElementById method, producing sentences like 'John has blue eyes' in a browser.

Learn how JavaScript strings store characters, use single or double quotes, and output variables in a browser with line breaks via a br tag, while handling quotes inside strings.

Discover how to get a string’s length using the built-in length property, outputting text.length to innerHTML and previewing in the browser with a 26-letter alphabet example.

Discover how to handle special characters in JavaScript strings by escaping quotes with a backslash, ensuring correct display in the browser.

Generate random numbers in JavaScript with the Math.random function, which outputs a value between 0 and 1, then display results using getElementById and refresh to see different outputs.

Use Math.min and Math.max to find the lowest and highest values in a list, illustrated by a script that outputs -150 and 600.

Learn to round decimal numbers to the nearest integer in JavaScript using the Math.round function, with examples 15.4 to 15 and 15.6 to 16, plus Math.floor and Math.ceil.

JavaScript arrays store multiple values in a single variable, as shown with a fruits array. Access items by zero-based index and use the length property to show six items.

Output array values with the toString method to show comma-separated items, and use the join method to set a custom separator like an asterisk with surrounding spaces.

Demonstrate array manipulation with pop, shift, and push to remove the last and first elements and to add cherry at the end and the beginning of the array.

Demonstrate changing and deleting array elements by index numbers in a fruits array, updating the first item to kiwi, altering other indexes, and removing an element to create a gap.

Learn how JavaScript's splice method inserts multiple items into an array at a chosen index without removing existing elements, illustrated by adding lemon and banana after orange.

Sort an array alphabetically in JavaScript using the sort method, then reverse the result with the reverse method, demonstrated on a cars array containing Volvo, Acura, Honda, and Lexus.

Join two arrays using the concat method to create a combined array from girls and boys, then output the elements with getElementById and preview the results in a web browser.

Explore JavaScript conditional statements using if, else, and else if to assign letter grades F through A from a 0–100 score, including handling out-of-range errors with document.write.

Explore JavaScript comparison operators, including equal to and not equal, by running hands-on test that compares a variable to eight, ten, and six and outputs true or false via getElementById.

Use the boolean function to test values as true or false, where numbers and strings are true, but zero is false; example outputs seven variables in the browser with getElementById.

Learn how the for loop repeats code to output numbers, starting at zero and incrementing to ten, using a count variable and document.write to place values on separate lines.

Demonstrate how the JavaScript for-in loop traverses an object's properties, using a person object with first name, last name, and age, and outputs each value in a browser.

Explore how the while loop executes a block while a condition holds, demonstrated by printing a variable from 0 up to 19 and incrementing by one.

Demonstrate how a do while loop runs the code block once before checking the condition, then repeats while true, with a JavaScript AI counter starting at zero and incrementing.

Learn how to use JavaScript break and continue statements to exit a loop or skip an iteration, illustrated by a for loop that stops at three and skips three.

Learn how JavaScript functions create reusable code blocks, take parameters, and return results, with examples showing eight times two equals sixteen and six times five equals thirty.

Explore how to use JavaScript events in HTML, including click, mouseover, mouseout, keydown, and document load, with a sample button showing the date using innerHTML.

Set up a basic HTML page and a script that stores eight hex colors, then randomly apply one to the page background on each refresh with document.body.style.

Develop a JavaScript and CSS based photo gallery with thumbnails that change a main preview image on hover, and apply hover effects and CSS styling for borders, background, and text.

Apply the stylesheet to build centered page with a container, header, and preview image; add five thumbnails that swap the preview on mouse over, then save and preview in browser.

Explore how XML stores and transports data using user defined tags in a platform independent, extensible format, and how it differs from HTML in structure and data exchange.

Explore XML basics with declaration tags, elements, attributes, and comments. Learn how parsing navigates a root-to-child tree and retrieves movie data such as title, producer, year, and price.

Learn how XML schemas define the structure and content of documents, enable cross-document data exchange, and validate well-formedness and validity across industries, with features like namespaces and data types.

Parse an XML file with JavaScript by placing the XML and HTML in the web root; extract each movie's title, producer, and price to render in a table.

Learn how to use the XMLHttpRequest object to fetch and parse movies.xml with ajax, update a page without reloads, and render data into a table using document.write and getElementsByTagName.

Ajax stands for asynchronous JavaScript and XML, popularized by Google with Google Suggest. It updates parts of a web page without reloading, enabling small asynchronous data exchanges for dynamic content.

Create an ajax-powered search input that shows live suggestions as you type from a predefined list, without page reload, using HTML, JavaScript, PHP, and a suggestion array.

Use Ajax to populate a select menu from a database and show the selected student's details in a table, updating data without refreshing the page via PHP and JavaScript.

Develop JavaScript proficiency by mastering arrow functions and destructuring. Gain basic CSS and HTML skills, including classes and selectors, and cultivate a strong desire to learn about React.

React is a lightweight JavaScript library for building user interfaces, maintained by Facebook, using a virtual dom and letting you pick state, routing, and authentication libraries.

Build a basic calculator in a single-file React app with simple CSS for the buttons. Use simple functions for basic calculations, like two times three plus five equals eleven.

kick off a beginner friendly React course by building a minimal hello world page using index.html, React and ReactDOM, and rendering into a root div.

Identify essential tools for reactor development: Node.js and a cross-platform code editor such as Visual Studio Code or Sublime. Install using the download link for Windows, Mac, and Linux.

Use Code Pen to write React and build a calculator, using HTML, CSS, and JavaScript panes with a live render, and enable the Babel JavaScript preprocessor in settings.

Discover how JSX enables embedding HTML inside JavaScript, why Babel translates JSX for browsers, how to nest HTML and insert JavaScript expressions with curly braces to prevent injection attacks.

Turn a simple React expression into a functional component to build a basic calculator, mastering JSX, function and arrow function components, and correct rendering with uppercase component names.

Explore functional components in React, using an Amazon-like page to illustrate reusable building blocks such as product cards, trending and lightning deals, a search bar, and a calculator.

Explore how props pass information from a parent component to a child in React, access them through the props parameter, and render values such as name and age.

Explore component-based design in React by learning how a root app mounts, creates a reusable component tree, and uses props and callback props for parent-child communication.

Build a calculator user interface in React by creating calculator component and a calc button with props. Layout with className and css grid to create four columns and operator buttons.

Learn to implement React onClick events by capitalizing the second word, pass function callbacks via props, and wire button presses to handlers in a calculator UI.

Learn how to pass values from child to parent in React using props and callback functions, via onClick, with handle number and handle operator.

Explore implementing React state with the useState hook, initializing display, reading and updating it via a setter, and observing efficient re-render of only the updated UI.

Implement a calculator display in React using useState to manage a JSON object with current and total, concatenate inputs, and handle the initial zero for future operations.

Implement the calculator's operator logic by wiring the do calculation function to handle operators, update the total via parsing and arithmetic, and refresh the display as numbers are entered.

Learn to debug React apps by inspecting state with console logs and the browser debugger, fix a pre-op state overwrite, and streamline equals and operator handling in a calculator.

Learn how to build and design React components, manage state with useState, and connect parent and child components via props and callbacks, illustrated by a basic calculator app.

Design a connect four clone with an adjustable grid and click-to-place counters, where players aim to make four in a row, including two-player and player-versus-computer modes using React concepts.

Identify essential tools for development: install Node.js from nodejs.org and use a cross-platform code editor like Visual Studio Code.

Bootstrapping a React project with Create React App, installing dependencies, and starting the development server; then building a simple game board component and wiring it into the app.

Build a 4-by-4 game board by creating a reusable game circle component, importing it into the board, and wiring an on click event to display a message.

Learn how to pass props to child components, destructure props for clean access, and render React children to display dynamic IDs and colors in a game circle grid.

Learn how to pass parameters like id and value to React on click handlers using arrow functions, while optionally handling the event object for clicks.

Learn to apply inline styling in React by passing color props from a parent to a child, using camelCase CSS like backgroundColor for dynamic text and circles.

Build a four by four game board with CSS grid and React inline styles, turning squares into circles, adjusting size and spacing, and centering the board for a polished layout.

Create a global css file to centralize styles for the game board and circle, convert inline styles to css, and import the css into components.

Implement dynamic styling in React by computing background color from an ID's parity using a mod two check and a ternary expression.

Learn to replace inline styles with dynamic CSS classes for odd and even numbers, coloring game circles red or blue. Use template literals and a ternary to assign the class.

Learn to implement callbacks in React by passing a circle clicked handler from the game board to circles, raising events on click, and bubbling the id to the parent.

Track a 16-circle game board with React useState using a zero-filled array; update with 1 or 2 on clicks and show idle, in-progress, and finished states in red and blue.

Refine the game board by rendering circles with a helper, manage current player state, and toggle between players using dynamic class names. Avoid mutating arrays; clone with spread for updates.

Update array state in React without mutating by using map and the previous state, handle deep arrays beyond shallow spread, and initialize a 16-circle game board with a render loop.

Learn to fix a React list warning by adding a unique key prop to each rendered circle in a loop or map. This enables React to uniquely identify items.

Style the game board with a bisque background, burley wood border, rounded corners, and a drop shadow, and add header and footer panels for turn and a new game button.

Learn to dynamically show the current player's turn and determine a win on a four by four grid by using a winner helper and immutable board updates.

Explore how to display the winner using a winner function with win lines, copy the game board to prevent state mutation, and update the header via render label for wins.

Add an isDraw function that uses the game board and current move to detect a draw by counting remaining zeros with reduce; display 'game is a draw' when none remain.

Explore react lifecycle events and how useEffect runs on first load with an empty dependency array, and how component did update fires on every render when state or props change.

Initialize a React game by creating an initGame function to set the board and current player, and run it on mount with useEffect and a new game button.

Introduce a suggest button that triggers a computer move via a random valid move, using getComputerMove, enabling play against the computer.

Build a smarter computer player by evaluating horizontal, vertical, and diagonal win threats and blocking the opponent. Compute blocking moves with getPosition and move checks; otherwise a random move.

Learn to define CSS variables at the top of your stylesheet and apply them with var(--name) to quickly swap board, panel, and player colors.

Use conditional rendering to display the new game or suggest button in the game footer based on the game state (playing, win, or draw), demonstrating inline and render-function approaches.

Deploy your React app for free with Netlify by building a production folder and dropping its contents into the deploy box. Test locally with a static server and publish.

Deploy your application to Surge using npm install -g surge and the surge command, pointing to your build folder, with a free default domain for a quick, shareable portfolio.

Master a functional connect four game in React, using hooks like useEffect and useState, props, and dynamic styling, and explore enhancements such as history and timer.

Build a bare-bones e-commerce site within the complete javascript, xml, ajax and react bootcamp, with a product list, view product details, add to basket, dynamic cart updates, and checkout.

Scaffold a mini ecommerce app in React, bootstrap with Create React App, and use a JSON server to simulate a rest API for learning CRUD operations.

Bootstrap a React project and set up a json-server as a mock rest api with a db.json for categories and products, running on port 3001, testing endpoints.

Pull JSON data with the fetch API, store it in React state using useState and useEffect, and render categories from a local JSON server. Use a unique key prop.

Apply custom styles to create an easter-store layout with a left category list, header, footer, and main area, while wiring category clicks to fetch products from a JSON server.

Create a dedicated category component and render categories from a JSON server using map. Destructure props, assign keys, and prepare for a future on-click fetch of products in that category.

Make categories clickable and handle category clicks to fetch products from a JSON server by category ID, passing the handler to the category component and displaying product titles.

Refactor fetch calls into a reusable fetcher with a base URL, using async/await in React useEffect to fetch categories and products more cleanly.

Learn to handle fetch errors by wrapping calls in try-catch, returning a structured response with error messages and data, update UI to display failures for categories and products.

Enhance fetch error handling by checking response status and throwing an error for not ok, such as 404, to distinguish URL mistakes from server issues.

Style a three-column product list with CSS grid, featuring image, features, and price, and integrate assets, JSON data, and a reusable category product component for an ecommerce page.

Install and configure react router v6, wrap the app in a browser router, and define routes for the main page, basket, checkout, and product details for seamless client side navigation.

Add unique keys to all mapped elements in product and category renders using product IDs, and use the map index for feature lists to remove warnings.

Build dynamic product routes with React Router, link product titles, read ids via the use params hook, and navigate to detail pages using the use navigate hook.

Read the product ID from the URL with the useParams hook, fetch the product by ID from a JSON server, and display its title.

Enhance the product detail page from a basic output to a richer three-column layout with image, title, specs, price, stock, and description using product data and styled components.

Learn how styled components encapsulate CSS inside React components, replacing global styles with reusable, prop-driven styles like product title and image container. The video covers installation and usage.

Learn to use styled components to split CSS from markup and apply a description style that spans three columns, improving layout while refactoring product list and detail views.

Learn how to render HTML inside a React component using the dangerously set in HTML attribute, define a markup function, and understand the security risks of HTML injection.

Refactor the categories by turning category items into links that fetch and display products for each category using React Router and category id.

Refactor the site layout by introducing a layout component with an outlet to render routed content, convert category list to React Router links, and wrap routes for clean data flow.

Refactor the website by moving routing from the index file to an app component, wiring layout with categories, and adding a home route and footer links to basket and home.

Learn to share cart state across components with React context by creating a cart context and provider, initializing a cart items array, and wrapping the app to access it.

Master adding items to a cart in React by using use context and use reducer to power a cart context provider, dispatch actions with payloads (id, title, price).

Learn to implement a functional shopping basket with a cart reducer, including add, remove, increase/decrease quantity, clear basket, and a basket layout with items, quantities, prices, and checkout.

Retrieve cart items using context, render the basket with quantity and price, and enable navigation to products and checkout.

Implement basket icons by importing up, down, and trash icons, wiring clicks to increase, decrease, or remove items, clear basket, and navigate to checkout, with running total and header updates.

Implement a running basket total using JavaScript reduce to multiply item price by quantity, render the total, and update the basket without extra clicks, while polishing header icons and links.

Finish the checkout by validating user input on the details form and persisting the shopping basket across page refreshes and browser restarts.

Refactor the basket to use local state with useState and useEffect, pulling items from context to auto-refresh the cart, and update immutably with copy and filter.

Fix common react reducer mistakes by creating new arrays with filter for the basket, then implement a checkout flow with name, email, billing and shipping addresses, route to order confirmation.

Persist the shopping cart with local storage and session storage to survive refreshes and closures. Serialize cart data to strings and manage with getItem and setItem.

Implement a top search bar that updates the URL with a search term, renders results, and fetches by q from a JSON server, while persisting the basket with session storage.

Learn how to implement debouncing in a search feature to reduce API calls, using a 500ms delay with useEffect, timer cleanup, and no results messaging.

Convert checkout inputs into controlled components using a state hook and a change handler, and wrap them in a form with on submit and required attributes for basic validation.

Learn to validate forms in React by replacing the required attribute with a form invalid check, disabling the submit button until fields are filled, and adding visual feedback.

In this lecture, learn to validate forms in React by marking required fields with asterisks, and applying conditional red borders to invalid inputs using styled components and an errors collection.

Use on blur to mark fields as touched (name, email, shipping address) and display red error indicators, while compactly updating state with a handle blur and show error logic.

Advance your ecommerce project by building a React app with stylized components, context and useReducer for shared state, local storage, and a mock API via json-server and fetch.