JavaScript For Absolute Beginners

Master JavaScript arithmetic by performing addition, subtraction, multiplication, division, and modulus on integers and decimals; apply the power operator, square roots, and order of operations.

Learn how variables store data in JavaScript, declare with let, assign values (numbers and strings), use the assignment operator, and log results to the console.

Create variables for physics, chemistry, and maths in JavaScript, perform arithmetic to sum and divide for an average, and store the result in an average variable.

Explore implementing JavaScript data types by defining numbers, strings, and booleans with variables; learn numeric and decimal values, string quotes, and string concatenation, including phone numbers as strings.

Explore undefined and null in JavaScript, mastering variable declarations and assignments, and distinguish between undefined and null while applying these concepts to basic data types.

Learn to use the math object in JavaScript to perform number operations, access constants like pi, and apply the absolute function, power function, square root, round, floor, and ceiling.

Explore using the math object random function to generate decimals from zero to one, convert to integers via multiply and round, and apply the maximum and minimum functions.

Explore string index methods in JavaScript, including substring, slice, and split, to extract parts of strings, specify start and end indices, and split data into arrays.

Learn how to create strings with template literals in JavaScript using backticks, embed variables with ${}, and evaluate expressions inside the string instead of single or double quotes.

Explore the difference between assignment and equality operators in JavaScript, using double equals for value comparison and triple equals for strict type and value checks.

Discover type conversion in JavaScript by using typeof to identify variable types and converting strings to numbers or booleans with parseFloat or parseInt, ensuring arithmetic works instead of string concatenation.

Learn to write JavaScript in a separate file and link it to an HTML page with a script tag; verify the connection using console logs.

Learn to write multiple lines of JavaScript in a file and log name and marks with console.log, then configure the code editor theme by applying monocoque in VS Code.

Learn how comments in JavaScript improve code readability by explaining lines and blocks; use // for single-line and /* ... */ for multi-line comments in team projects.

Follow along to solve coding challenge part 1: calculate a discounted price from a list price and discount percentage, then log the result on the console in JavaScript.

Explore computing the circle area in JavaScript by applying pi r squared, using a radius of 50, displaying a message with the result in square meters and removing decimals.

Implement the if conditional statement to decide license eligibility by age, using age 18 to print either you are an adult and can apply for license or please try later.

Learn to compare strings in a JavaScript if statement by checking username against 'admin' to grant or deny access. Use equality operators and else logic to display the proper message.

Learn how to implement nested if statements to verify multiple conditions, such as age over 18 and percentage over 70, using an inner if inside an outer one.

Apply the and operator in JavaScript to combine multiple conditions within a single if statement, using examples like age > 18 and percentage > 70 to determine eligibility.

Master the while loop in JavaScript to repeat code using a counter and a condition, so you can print Hello, world five times without duplicating code.

Learn the do while loop in JavaScript, see how it differs from a regular while loop, and understand that it runs the code once before checking the condition.

Explore how to use an if-else statement in JavaScript by checking height against 175 cm to determine if a candidate qualifies to apply for the team.

Explore a JavaScript nested if challenge that checks high school marks, aviation exam scores, and age to determine pilot license eligibility, printing specific rejection reasons.

Create an array of numbers, loop through it, detect odd numbers using the modulus operator, and log the odd values.

Learn how JavaScript arrays store multiple values in a single location, grow and shrink dynamically, hold mixed types, and use zero-based indices to access each element.

Learn how to create arrays in JavaScript using array literals, access elements by index, modify values, and explore length and mixed data types in a single array.

Learn how to use the spread operator to copy and insert elements from one array into another, illustrated with fruit arrays and the three-dot syntax.

Learn how to use the for...of loop to iterate over array elements without indices, using a fruits array and console.log to print each fruit in JavaScript.

Master array manipulation with push, pop, shift, and unshift. Add items to the end or start, remove from the end or start, and return the removed values.

Learn how to locate the index of elements and remove them from arrays using indexOf and splice in JavaScript. Practice practical fruit-based examples to solidify these array operations.

Learn how to concatenate arrays using the concat method to join multiple arrays, including arrays of different types, while preserving originals.

Explore objects as composite values that store multiple properties for entities like a student, using key-value pairs, dynamic properties, and ways to create, access, and modify them.

Learn to create objects with object literals in JavaScript, define properties like name, school, and contact, and access them via dot notation or square bracket notation, then log the object.

Learn to set and change properties on a JavaScript object by creating a student with name, school, and contact, then update values using dot and bracket notation.

Learn how to avoid property access errors by checking if a property exists on an object before accessing it, using if statements and conditional logging.

Learn about functions in JavaScript: a reusable block of code defined with a function declaration and executed via function calls.

Create a reusable area of a circle function in JavaScript that takes a radius and computes pi times radius squared. Log the result to the console for different radii.

Learn why functions should return a value and how to pass that total to a percentage calculator, enabling chaining of total marks and percentage computation in JavaScript for absolute beginners.

Learn how in JavaScript functions act as values that can be assigned to variables or stored in object properties, passed between functions, and invoked via object methods like add.

Explore lexical scope in JavaScript by showing how inner functions access outer variables. Observe how inner variables can shadow outer ones and how scope resolves values.

Explore callbacks in JavaScript by passing a function into another function and executing it inside. See a hello example where a twice function calls hello twice.

Implement a simple banking system with global variables and functions in JavaScript, including balance and account number, deposit and withdraw routines with fund checks and messages.

Access elements using the getElementById method in the document object model, assign IDs like heading and subheading, and update their content; changes are temporary and the first match is returned.

Learn how to access HTML elements using getElementsByTagName and getElementsByClassName, retrieve multiple elements with a tag name, and select the first element with index 0 to modify content.

Learn how to manipulate HTML content with innerText, textContent, and innerHTML, compare what each returns, and see how to add HTML versus plain text in a list using DOM methods.

Learn how to use the querySelector and querySelectorAll methods to access elements on the DOM using type, class, and ID selectors, and to handle single or multiple matches.

Explore the parent and child nodes, using a div as a container, and learn to access the parent from a child with querySelector and parentNode, plus firstElementChild, lastElementChild, and children.

Learn to identify and traverse siblings in the DOM by selecting the first list item and using nextElementSibling in a loop to access all siblings.

Learn how to clone DOM nodes using the cloneNode method, including cloning with and without child nodes, and appending the cloned node to the document body.

Explore how html attributes map to dom properties, with id and class becoming properties in the document object model. Practice accessing and manipulating these attributes via javascript.

Learn how to use the setAttribute method to change or add attributes like id and class on DOM elements, using querySelector to target elements.

Learn how the remove attribute method deletes a specified attribute from an element, such as removing the id and class attributes from an h1 heading.

Learn to manipulate an element's style attribute using JavaScript, applying inline styles and DOM methods to change color and background color of an H1 heading.

Learn to manipulate an h1 element's classes with JavaScript using the document object model and querySelector. Add, remove, replace, and check classes with classList to control styling and access classes.

Learn why inline events in HTML are discouraged and how to move event handling into a separate JavaScript file using DOM Level zero and event listeners for reliable, multiple handlers.

Learn how to use the addEventListener method to attach a click event to a page element, listen for events, and execute a callback that logs output.

Build a simple counter using DOM and DOM events by wiring two buttons to increment and decrement a displayed count, updating the value with event listeners and dynamic DOM updates.

Build a functional simple interest calculator by reading inputs with query selector, computing SI as P × years × rate ÷ 100, and displaying the result on button click.

Build a functional to-do app by turning a Bootstrap-enhanced HTML layout into interactive features, wiring the input and add button and rendering list items.

Access the unordered list with the list group class, then append items to the to-do list and test adding tasks. Plan to attach a done button to remove completed items.

Add a delete button to todo items using createElement and appendChild. Style with bootstrap classes to align tasks on a line and prep a click-to-remove feature for the next lesson.

Attach the delete button to each list item and append the item to the list after creation. Add a done button listener to remove items; save with local storage.

Explore object oriented programming in JavaScript, how classes create objects with properties and methods. Compare object oriented and functional programming using a student example to show data display.

Explore functional programming by saving student and teacher data and displaying it with a display function and console logs, then examine scope pitfalls and the shift toward object oriented programming.

Learn how to implement object oriented programming in JavaScript by creating student and teacher objects with properties and display methods, using this, and comparing it to functional programming.

Learn how to use JavaScript classes to create multiple objects from a class, using a constructor to initialize id, name, and marks, and the new keyword to instantiate student objects.

Explore inheritance by defining a parent class with properties and a method, then using extends to create a child class that inherits the last name and display method.

Explore how to implement inheritance in JavaScript by defining a shared member base class, extending student and teacher classes, and using super to initialize common properties and methods.

Discover how JavaScript originally creates objects with constructor functions, using this to set properties and methods, and instantiate with new, before examining its limitations.

Discover asynchronous JavaScript and learn how to wait for events using callbacks, promises, and async keywords.

Explore how callbacks enable asynchronous programming in JavaScript using setTimeout and setInterval to run functions after delays and at intervals, with clearInterval to stop timers.

Learn to build a countdown timer using setInterval and clearInterval, updating a time value every second, stopping at zero, and displaying the countdown on a web page.

Learn how promises in JavaScript represent the result of asynchronous computations, including pending, fulfilled, and rejected states, and how to chain callbacks to handle success or errors.

Create a promise with new Promise and an arrow function, handle resolve and reject, use status to determine fulfillment, and attach then and catch to log success or failure.

Learn how to replace callback hell with promises by converting a transact function into a promise with setTimeout delays, using resolve and reject, and chaining then calls.

Explore a banking transaction example using promises, splitting the flow into functions: validate the user and deduct that amount, with the first returning a promise that resolves with the balance.

Learn how to implement a JavaScript range slider with min, max, and initial values, capture input via an event listener, and log updates for a simple interest calculator.

Build a slider-based simple interest calculator in JavaScript for absolute beginners, part 2, using a bootstrap CDN, with sliders for principal, years, and rate, and a live principal display.

Build a slider-based simple interest calculator by adding fields for principal, years, and interest rate, wiring event listeners, and calculating simple interest and monthly EMI.

Complete the slider based simple interest calculator by calculating interest, total amount, and EMI, updating HTML fields, wiring event listeners, and ensuring correct numeric calculations.

Learn how to use local storage in the browser to save and retrieve key-value data, persist across refreshes and tabs, using setItem, getItem, removeItem, and clear.

Build a mini shopping cart by storing products in local storage, using an input and add button to create item objects and persist the cart with JSON.stringify.

Display cart items from local storage on the homepage by parsing the stored string into an array and rendering each product name in a list.

Handle duplicate cart entries in a mini shopping cart by updating existing product quantities in local storage, using a for loop and integer casting to persist changes.