This YouTube transcript presents a comprehensive JavaScript course designed for beginners. The course covers fundamental concepts such as variables, data types, operators, control flow, functions, objects, classes, and the Document Object Model (DOM). It emphasizes practical application through real-world projects like a notes app, quiz app, and e-commerce product page. The transcript also includes explanations of JavaScript scope, event handling, and advanced topics like constructor functions and prototypes. Finally, there are instructions for building applications like a digital clock and a form validation project.

JavaScript Fundamentals Study Guide

Quiz

Instructions: Answer the following questions in 2-3 sentences each.

What is JavaScript, and what are two common uses for it in web development?
Describe three different ways you can embed JavaScript code in an HTML file.
Explain the difference between the var, let, and const keywords when declaring variables in JavaScript.
Define “scope” in JavaScript, and name the three types of scope.
Name four of the seven primitive data types in JavaScript and give an example of each.
Explain the difference between the == and === operators in JavaScript.
Describe the purpose of control flow statements in JavaScript and give one example of a conditional statement.
Explain the difference between the break and continue statements within a JavaScript loop.
What is a JavaScript function, and how is it defined and called?
What is a JavaScript object, and how do you access properties and methods within it?

Quiz Answer Key

JavaScript is a scripting language used to create interactive and dynamic websites. It’s commonly used for front-end web development to add interactivity, such as button clicks and form validation, and also used in back-end web development with Node.js.
JavaScript code can be embedded in an HTML file in the <head> tag within <script> tags, within the <body> tag, or through an external JavaScript file linked using the src attribute in the <script> tag.
var is the oldest and most common way to declare variables, with function scope. let is a newer keyword that declares block-scoped variables, meaning they are only visible within the block in which they are declared. const is used to declare constants, which are variables that cannot be reassigned once they are declared.
Scope refers to the visibility of variables and functions within a program. There are three types of scope in JavaScript: global scope, function scope, and block scope.
Four primitive data types in JavaScript are: string (e.g., “Hello World”), number (e.g., 3.14), boolean (e.g., true), and undefined (a variable that has been declared but not assigned a value).
The == operator checks for equality of values after type coercion, meaning it may convert the types of the operands before comparison. The === operator checks for strict equality, meaning it compares both the value and the type of the operands without type coercion.
Control flow statements are used to control the order in which code is executed in a JavaScript program. An example of a conditional statement is the if statement, which executes a block of code only if a specified condition is true.
The break statement is used to terminate a loop immediately, while the continue statement skips the current iteration of the loop and proceeds to the next iteration.
A JavaScript function is a reusable block of code that performs a specific task. It’s defined using the function keyword followed by the function name, parameters (optional), and the code block enclosed in curly braces. It’s called by using the function name followed by parentheses.
A JavaScript object is a non-primitive data type that stores a collection of data in key-value pairs. You can access properties using dot notation (e.g., object.property) or bracket notation (e.g., object[“property”]). Methods are functions associated with the object and are accessed the same way as properties (e.g. object.method()).

Essay Questions

Discuss the importance of understanding variable scope in JavaScript and how different types of scope can affect the behavior of your code. Provide examples to illustrate your points.
Explain the concept of data types in JavaScript, differentiating between primitive and reference data types. How does an understanding of data types contribute to writing robust and error-free code?
Describe the various operators available in JavaScript, categorizing them by function (arithmetic, assignment, comparison, logical). Explain how operator precedence and associativity impact the evaluation of expressions.
Compare and contrast the different looping structures available in JavaScript (for, while, do…while). Provide scenarios where each type of loop would be most appropriate and justify your choices.
Explain the concept of DOM (Document Object Model). Discuss DOM manipulation techniques using JavaScript. What is the importance of DOM manipulation in web development?

Glossary of Key Terms

JavaScript: A scripting language primarily used to create interactive and dynamic websites.
DOM (Document Object Model): A programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
Variable: A storage location that holds a value.
Keyword: A reserved word that has a special meaning in the JavaScript language.
Scope: The visibility of variables and functions in a JavaScript program.
Global Scope: Variables declared outside any function or block, accessible from anywhere in the script.
Function Scope: Variables declared inside a function, only accessible within that function.
Block Scope: Variables declared inside a block (e.g., within an if statement or loop), only accessible within that block (introduced with let and const).
Data Type: The type of value that a variable can hold (e.g., string, number, boolean).
Primitive Data Type: Basic data types that represent a single value (string, number, boolean, null, undefined, symbol, bigInt).
String: A sequence of characters enclosed in single or double quotes.
Number: Represents numeric values, including integers and floating-point numbers.
Boolean: A data type with two possible values: true or false.
Undefined: A value assigned to a variable that has been declared but not yet assigned a value.
Operator: A symbol that performs an operation on one or more operands.
Arithmetic Operators: Operators used to perform mathematical calculations (e.g., +, -, *, /).
Assignment Operators: Operators used to assign values to variables (e.g., =, +=, -=).
Comparison Operators: Operators used to compare two values (e.g., ==, ===, >, <).
Logical Operators: Operators used to perform logical operations (e.g., &&, ||, !).
Operator Precedence: The order in which operators are evaluated in an expression.
Operator Associativity: The direction in which operators of the same precedence are evaluated (left-to-right or right-to-left).
Control Flow Statements: Statements that control the order in which code is executed (e.g., if, else, switch, for, while).
Conditional Statement: A statement that executes different code based on a condition (e.g., if, else if, else).
Loop: A control flow statement that repeats a block of code multiple times (e.g., for, while, do…while).
Function: A reusable block of code that performs a specific task.
Parameter: A variable declared in a function definition that receives a value when the function is called.
Argument: The actual value passed to a function when it is called.
Return Statement: A statement that ends the execution of a function and returns a value (optional).
Object: A collection of properties (key-value pairs).
Property: A key-value pair in an object, where the key is a string (or symbol) and the value can be any data type.
Method: A function that is a property of an object.
this Keyword: A keyword that refers to the current object in a method.
Constructor Function: A function used to create objects.
new Keyword: An operator used to create an instance of an object from a constructor function.
class Keyword: A keyword used to define a class, which is a blueprint for creating objects (introduced in ES6).
Getter: A special method in JavaScript that is called when a property is accessed, used to retrieve property values.
Setter: A special method in JavaScript that is called when a property is modified, used to set property values.
Event: An action that occurs in the web browser, such as a click, mouseover, or keypress.
Event Listener: A function that is executed when a specific event occurs.
Element: An individual component of an HTML document.
Node: A generic term for any type of object in the DOM tree (e.g., element, text, comment).
Parent Node: The node directly above another node in the DOM tree.
Child Node: A node directly below another node in the DOM tree.
Sibling Node: Nodes that share the same parent node in the DOM tree.
document.getElementById(): A DOM method to select a specific element.
document.querySelector(): A DOM method to select an element using CSS selectors.
document.querySelectorAll(): A DOM method to select a set of elements using CSS selectors.
element.parentNode: Returns parent element of specified node.
element.children: Returns HTMLCollection of an element’s child elements.
element.innerHTML: Sets or returns the content of an element.
element.textContent: Sets or returns the text content of an element.
element.setAttribute(): Sets the value of an attribute on the specified element.
element.classList: Returns the class names of an element.
Event Bubbling: Is an event flow model in which event flows from the most specific element to the least specific.
Event Capturing: Is an event flow model in which event flows from the least specific element to the most specific.

JavaScript Tutorial: A Beginner’s Guide

Okay, here’s a detailed briefing document summarizing the main themes and important ideas from the provided JavaScript tutorial excerpts.

Briefing Document: JavaScript Tutorial Overview

I. Main Themes

Introduction to JavaScript: The core of the excerpts focuses on introducing JavaScript as a scripting language essential for creating interactive and dynamic websites. It emphasizes its widespread use and relevance in modern web development.
Beginner-Friendly Approach: The tutorial is explicitly designed for individuals with no prior coding experience. It promises clear explanations, practical examples, and complete notes to facilitate learning.
Practical Application and Projects: A key element is the emphasis on learning by doing. The tutorial promises real-world projects (online notes app, quiz app, etc.) to solidify understanding.
Fundamental Concepts: The tutorial covers essential JavaScript concepts, including variables, data types, operators, control flow statements, functions, objects, and DOM manipulation.
Modern JavaScript Features: The excerpts touch on newer JavaScript features introduced in ES6, such as the let keyword and default parameters.
Emphasis on DOM (Document Object Model): A significant portion is dedicated to understanding and manipulating the DOM, enabling dynamic interaction with web page elements.
Event Handling: An introduction to JavaScript events, detailing how to make web pages interactive.
Project-Based Learning: Several mini-projects are outlined to provide hands-on experience in applying JavaScript concepts.

II. Important Ideas and Facts

What is JavaScript?“JavaScript is a scripting language that is used to create interactive and dynamic websites.”
Interactive websites: enable user actions like “button click, submit a form, write comments, and live chat.”
Dynamic websites: change content/layout like “sliding effect, e-commerce website and quiz website.”
Why Learn JavaScript?“JavaScript is the most popular programming language in the world.”
Used by major websites: “Google, Facebook, Twitter, Amazon, Netflix.”
Vast ecosystem: “tons of Frameworks and libraries to reduce your time to create websites and mobile apps some of the popular Frameworks are react angular and vuejs.”
Career opportunities: “if you learn JavaScript it opens a lot of job opportunities in the software development Industries.”
Uses of JavaScript:Beyond front-end: “not only limited to front-end web development it is also used in backend web development mobile app development desktop app development game development and API creation.”
Setting Up a Development Environment:Requires a web browser (e.g., Google Chrome) and a code editor (e.g., Visual Studio Code).
Adding JavaScript to HTML:Inline: Within <script> tags in the <head> or <body>.
External: Using <script src=”script.js”></script>, linking to an external .js file.
“There are multiple options to display the output of JavaScript on the web page or browser.”
alert(“message”): Displays an alert box.
document.write(“message”): Writes directly to the HTML document.
console.log(“message”): Logs messages to the browser’s console.
Variables:“Variables are used to store data.”
Declaration: var, let, const.
var: Oldest, most common way.
let: Block-scoped (ES6).
const: Declares constants (cannot be reassigned).
Naming: Must begin with “alphabet dollar sign or underscore”.
Case-sensitive: “JavaScript is case sensitive”.
Scope:Global: Accessible from anywhere.
“variables and functions declared in the global scope are visible from anywhere in the program”
Function: Only accessible within the function.
“variables and functions declared in a functions scope are only ual within that function”
Block: Only accessible within the block (e.g., within an if statement).
“variables and functions declared in a block scope are only visible within that block”
Data Types:Primitive: String, Number, Boolean, Null, Undefined, BigInt, Symbol.
String: “a string is a sequence of zero or more characters”
Number: represents integer and floating point numbers
Boolean: true or false values
Reference: Object, Array, Function.
Object: “a non-primitive data type that allows you to store multiple collections of data”
Array: “arrays are a type of object that stores a collection of values”
Function: “functions are a type of object that can be used to execute code”
Dynamic Typing: “JavaScript is a dynamically typed language so we can store different data type in the same variable.”
Operators:Arithmetic: +, -, *, /, % (modulus), ** (exponentiation).
Assignment: =, +=, -=, *=, /=, %=, **=.
Increment/Decrement: ++, — (prefix and postfix).
Comparison: <, >, <=, >=, == (equality), != (inequality), === (strict equality), !== (strict inequality).
Logical: && (AND), || (OR), ! (NOT).
String: + (concatenation).
Operator Precedence and Associativity:Precedence: Determines the order of operations.
Associativity: Determines the order when operators have the same precedence (left-to-right or right-to-left).
Control Flow Statements:Conditional: if, else if, else, switch, ternary operator (condition ? valueIfTrue : valueIfFalse).
Loops: for, while, do…while.
break: Terminates a loop.
continue: Skips the current iteration.
Functions:“a block of code that performs the specific task.”
Declaration: function functionName(parameters) { … }.
Parameters and Arguments: Parameters are variables in the function definition; arguments are the values passed when calling the function.
Default Parameters: function myFunction(param1 = defaultValue) { … }.
return: Returns a value from the function.
Recursive Functions: Functions that call themselves.
Anonymous Functions: Functions without a name.
Callback Functions: Functions passed as arguments to other functions.
Objects:“a non-primitive data type that allows you to store multiple collections of data”
Key-value pairs: const myObject = { key1: value1, key2: value2 };.
Accessing properties: objectName.propertyName or objectName[“propertyName”].
Methods: Functions within objects.
this keyword: Refers to the current object.
Getters and Setters: Special methods to control property access and modification.
Classes:A blueprint for creating objects.
constructor: A special method to initialize object properties.
Methods: Functions within classes.
Inheritance: Creating new classes based on existing ones (using extends).
Private methods: A method inside of the class that can not be accessed from outside the class.
Static methods: can be accessed without creating an object of the class
DOM (Document Object Model):Represents the structure of an HTML document as a tree.
Nodes: Elements, text, attributes, etc.
Traversing: Moving through the DOM tree (parent, children, siblings).
parentNode: Returns the parent element of a node.
firstChild, lastChild: First and last child nodes.
childNodes: All child nodes.
nextElementSibling, previousElementSibling: Next and previous sibling elements.
Selecting Elements:
document.getElementById(“id”): Selects an element by its ID.
document.getElementsByClassName(“class”): Selects elements by class name (returns an HTMLCollection).
document.getElementsByTagName(“tag”): Selects elements by tag name (returns an HTMLCollection).
document.querySelector(“selector”): Selects the first element matching a CSS selector.
document.querySelectorAll(“selector”): Selects all elements matching a CSS selector (returns a NodeList).
Manipulating Elements:
document.createElement(“tag”): Creates a new HTML element.
element.appendChild(newNode): Adds a node as a child to an element.
element.textContent = “text”: Sets the text content of an element.
element.innerHTML = “html”: Sets the HTML content of an element.
element.setAttribute(“attribute”, “value”): Sets the value of an attribute.
element.removeAttribute(“attribute”): Removes an attribute.
element.classList: For adding, removing, and toggling CSS classes.
Adding and Removing elements:
element.insertAdjacentHTML(): A method to add HTML adjacent to an element.
replaceChild(): replaces a child element with a new one.
cloneNode(): clones a node.
removeChild(): removes a child element of a node.
insertBefore(): insert a new node before an existing node.
Attributes:
“The ID is the attribute name username is the attribute value”
to get the attributes of any HTML element use javaScript.
hasAttribute(): used to check whether an element has a specified attribute or not.
getAttribute(): method use to get the value of specified attribute.
setAttribute(): set the attribute.
removeAttribute(): remove the attribute.
Events:Actions that occur in the browser (e.g., click, mouseover, load).
Event bubbling: Event flow from the most specific element to the least.
Event capturing: Starts from the least specific element.

III. Examples of Projects Mentioned

Online Notes App
Quiz App
Form Validation
Image Slider
Digital Clock
E-commerce Product Page
To-Do List App
Weather App
Calculator
Image Gallery

IV. Conclusion

The provided excerpts outline a comprehensive JavaScript tutorial suitable for beginners. It covers fundamental concepts, practical application through projects, and introduces modern JavaScript features. The emphasis on DOM manipulation and event handling highlights the tutorial’s focus on building interactive web experiences. By following this course, individuals with no prior programming experience can become proficient in JavaScript and be able to develop real-world applications.

JavaScript FAQs: A Quick Reference

Frequently Asked Questions about JavaScript

1. What is JavaScript and what are its primary uses?

JavaScript is a scripting language primarily used to create interactive and dynamic websites. It enables user actions like button clicks, form submissions, live chats, and website content or layout changes such as sliding effects, e-commerce functionalities, and quizzes. It can be used in front-end web development, back-end web development, mobile app development, desktop app development, game development, and API creation.

2. Why should I learn JavaScript?

JavaScript is the most popular programming language globally, used by almost all popular websites like Google, Facebook, Twitter, Amazon, and Netflix. It has numerous frameworks and libraries like React, Angular, and Vue.js, which help reduce development time. Learning JavaScript opens many job opportunities in the software development industry.

3. How can I get started with writing JavaScript code?

To start writing JavaScript, you need a web browser (like Google Chrome) and a code editor (like Visual Studio Code). You can add JavaScript code directly within the HTML file using the <script> tag in the <head> or <body>, or you can link an external JavaScript file using <script src=”script.js”></script>.

4. What are variables in JavaScript and how do I declare them?

Variables are used to store data. In JavaScript, you declare variables using the var, let, or const keywords. For example: var x = 30;, let x = 10;, or const a = 4;. var is the oldest and most common way, let is a newer keyword introduced in ES6 for block-scoped variables, and const is used for variables that should not be reassigned. Variable names must begin with an alphabet, dollar sign ($), or underscore (_).

5. What is scope in JavaScript and what are the different types?

Scope refers to the visibility of variables and functions within a program. There are three types of scope in JavaScript:

Global scope: Variables and functions declared in the global scope are visible from anywhere in the program.
Function scope: Variables and functions declared within a function are only visible within that function.
Block scope: Variables and functions declared within a block of code (enclosed in curly braces) are only visible within that block (using let or const).

6. What are the different data types in JavaScript?

JavaScript has two main categories of data types:

Primitive data types: These include string, number, boolean, null, undefined, bigint, and symbol.
Reference data types: These include object, array, and function.

JavaScript is a dynamically typed language, allowing you to store different data types in the same variable during its lifecycle.

7. What are operators in JavaScript and what are some common types?

Operators are symbols used to perform operations on operands (values and variables). Common types include:

Arithmetic operators: Used for mathematical operations (e.g., +, -, *, /, %).
Assignment operators: Used to assign values to variables (e.g., =, +=, -=).
Comparison operators: Used to compare two values (e.g., ==, ===, !=, >, <). They return Boolean values.
Logical operators: Used to perform logical operations (e.g., && (AND), || (OR), ! (NOT)).
String operators: Used to concatenate strings (e.g., +).

8. What are control flow statements in JavaScript and how are they used?

Control flow statements are used to control the flow of execution in a JavaScript program. There are three main types:

Conditional statements: (e.g., if, else if, else, switch) used to execute different code based on different conditions.
Loops: (e.g., for, while, do…while) used to repeat a block of code.
try…catch statements: Used to handle errors.

9. What are functions in JavaScript and how are they used?

Functions are reusable blocks of code that perform specific tasks. You can define a function using the function keyword, followed by the function name, parameters (optional), and the function body. Functions can return values using the return statement. Parameters act as placeholders that receive argument values passed during the function call.

10. How do parameters and arguments work in Javascript functions?

Parameters are declared in the function definition, while arguments are the actual values passed to the function when it’s called. You can also use default parameters, which provide a default value if an argument is not provided when calling the function. JavaScript functions can be declared without names, also known as anonymous functions and can call upon themselves, known as recursion.

11. What are objects in JavaScript and how do I work with them?

Objects are non-primitive data types that store collections of data in key-value pairs. You can create objects using curly braces {}. Access properties using dot notation (e.g., object.property) or bracket notation (e.g., object[‘property’]). You can add, modify, and delete properties of an object. Objects can contain other objects, which are called nested objects, and methods.

12. How do I define and use methods within JavaScript objects?

Methods are functions that are properties of an object. You can define methods within an object using function expressions or by directly assigning a function to a property. You can call object methods using dot notation followed by parentheses (e.g., object.method()). To access other properties of the object within a method, you can use the this keyword.

13. What is the DOM (Document Object Model) and how do I use it to manipulate web pages?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. It allows JavaScript to dynamically access and update the content, structure, and style of web pages. You can select elements using methods like getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll. You can traverse the DOM to navigate between parent, child, and sibling elements. You can manipulate elements by creating new elements, appending or inserting them, modifying content and attributes, and removing elements.

14. How do I handle events in JavaScript?

Events are actions that occur in the web browser (e.g., clicks, mouse movements, page loads). You can handle events using event listeners, which are functions that are executed when a specific event occurs. The two event models are event bubbling (event flows from the most specific element to the least) and event capturing (event flows from the least specific element to the most).

15. What are classes in JavaScript and how do I use them?

Classes are a template for creating objects. They are a way to organize and structure your code using object-oriented programming principles. A constructor is a special method within a class that is called when a new object is created from the class. The new keyword is used to create an instance of a class. Getters and setters are special methods that allow you to control how properties are accessed and modified. Using the # prefix indicates that the method is private. Static methods and properties are associated with the class itself, rather than with individual instances of the class. This means that you can access them directly using the class name without having to create an object.

JavaScript Fundamentals: Variables, Data Types, and DOM Manipulation

JavaScript is a scripting language utilized to create dynamic and interactive websites. A dynamic website can alter its content and layout, while an interactive website enables user actions like button clicks or form submissions.

Key aspects of JavaScript covered in the sources include:

Variables and Scope Variables are used to store data and are declared using keywords like var, let, and const. The let keyword declares block-scoped variables, visible only within their defined block, while const declares variables that cannot be reassigned. JavaScript recognizes three types of scope: global, function, and block scope.
Data Types JavaScript divides data types into primitive and reference types. Primitive data types include string, number, boolean, null, undefined, bigint, and symbol. Reference data types include object, array, and function. JavaScript is a dynamically typed language, allowing variables to store different data types.
Operators Operators are symbols that perform operations on operands (values and variables). Types include arithmetic, assignment, comparison, logical, and string operators. Operator precedence determines the order in which operators are processed.
Control Flow Statements These statements manage the execution flow in a JavaScript program, enabling decisions, loops, and error handling. Common conditional statements are if, else if, and else. Loops include for, while, and do while loops. The break statement exits a loop, and the continue statement skips the current iteration.
Functions Functions are reusable code blocks that perform specific tasks. They are defined using the function keyword and can accept parameters and return values. Functions can be recursive, calling themselves within their own code. A callback is a function passed as an argument to another function.
Objects Objects store collections of data in key-value pairs. Objects can contain properties (data) and methods (functions). The this keyword refers to the object in which it is used. A constructor function is used to create objects.
Prototypes Every JavaScript object has a prototype property. Prototypes allow objects to inherit properties and methods.
Classes Introduced in ES6, classes are templates for creating objects. They contain a constructor method for initializing object properties and can have other methods.
DOM (Document Object Model) The DOM represents HTML documents, allowing JavaScript to manipulate webpage content and structure. Methods like getElementById, getElementsByName, getElementsByTagName, querySelector, and querySelectorAll are used to select HTML elements. JavaScript can modify element attributes, styles, and classes using DOM manipulation techniques.
Events Events are actions that occur in a web browser, like clicks or mouse movements. Event listeners are used to execute code in response to specific events. Common events include mousemove, mousedown, mouseup, mouseover, mouseout, keydown, keyup, and scroll.

JavaScript DOM Manipulation Essentials

DOM (Document Object Model) is an API for manipulating HTML documents. The DOM represents an HTML document as a tree of nodes, where each HTML tag, attribute, or text is a node.

Selecting Elements To access and manipulate elements within an HTML document, JavaScript provides several DOM methods:

getElementById(id): Retrieves the element with the specified id attribute.
getElementsByName(name): Returns a collection of elements with the given name attribute.
getElementsByTagName(tagname): Returns a collection of elements with the specified tag name.
getElementsByClassName(classname): Returns a collection of elements with the given class name.
querySelector(selector): Returns the first element that matches the specified CSS selector.
querySelectorAll(selector): Returns a collection of all elements that match the specified CSS selector.

Traversing Elements Once an element is selected, you can navigate the DOM tree to access its related nodes:

parentNode: Gets the parent node of the specified node.
firstChild: Gets the first child node of the specified element.
lastChild: Gets the last child node of the specified element.
childNodes: Gets all child nodes of the specified element.
firstElementChild: Gets the first element child of the specified element.
lastElementChild: Gets the last element child of the specified element.
nextElementSibling: Gets the next sibling element of the specified element.
previousElementSibling: Gets the previous sibling element of the specified element.

Modifying Elements JavaScript provides several ways to modify HTML elements:

createElement(tagname): Creates a new HTML element with the specified tag name.
appendChild(node): Adds a node to the end of the list of child nodes for a specified parent node.
textContent: Gets or sets the text content of a node and its descendants.
innerHTML: Gets or sets the HTML code within an element.
after(node or string): Inserts one or more nodes or strings after the element.
append(node or string): Appends new nodes or strings to the end of the children of an element.
prepend(node): Adds a new node as the first child of an element.
insertAdjacentHTML(position, text): Inserts HTML code at a specified position relative to the element.
replaceChild(newchild, oldchild): Replaces a child element with a new one.
cloneNode(deep): Clones an element, optionally including its descendants (deep is a boolean value).
removeChild(child): Removes a child element from a node.
insertBefore(newnode, existingnode): Inserts a new node before an existing node as a child of a parent node.

Attribute Manipulation HTML attributes can be accessed and modified using the following methods:

attributes: Returns a collection of all attributes of an element.
getAttribute(name): Gets the value of the attribute with the specified name.
setAttribute(name, value): Sets the value of an attribute.
hasAttribute(name): Returns a boolean value indicating whether the element has the specified attribute.
removeAttribute(name): Removes the attribute with the specified name.

Style Manipulation The style of an element can be manipulated using the style property:

element.style.property: Gets or sets the value of an inline style property.

Class Manipulation CSS classes of an element can be manipulated using the following properties:

className: Gets or sets the class name of an element as a string.
classList: Returns a collection of CSS classes of an element, providing methods to add, remove, toggle, and check classes.
add(classname): Adds a CSS class to the element.
remove(classname): Removes a CSS class from the element.
replace(oldclass, newclass): Replaces an existing class with a new one.
contains(classname): Checks if the element contains a specific class.
toggle(classname): Adds the class if it doesn’t exist or removes it if it does.

Events Events are actions that occur in a web browser. Event listeners are used to execute code in response to specific events. There are three ways to assign event handlers:

Using HTML attributes.
Assigning event handler names in JavaScript.
Using the addEventListener method.

The addEventListener method accepts three arguments: the event type, the function to be executed when the event fires, and an optional boolean value indicating whether to use capture. The removeEventListener method removes an event listener that was added using addEventListener.

JavaScript Events and Event Handlers

Events are actions that occur in a web browser, like clicks or mouse movements. An event handler, also known as an event listener, is a piece of code that will be executed when the event occurs.

There are three ways to assign event handlers:

Using HTML attributes: For each event, there is an event handler, and their names typically begin with on. For example, the event handler for a click event is onclick. The JavaScript code can be added within the quotes of the HTML attribute. The event handler attribute can also call a function. When the event occurs, the web browser passes an event object to the event handler. Inside the event handler, the this keyword refers to the target element on which the event occurs.
Assigning event handler names in JavaScript: The event handler can be added to the HTML element in the JavaScript code. For example, element.onclick = function(){}. In this method also, the this keyword refers to the target element. To remove the event handler, assign null to the event handler.
Using the addEventListener method: The addEventListener method registers an event handler, and the removeEventListener method removes an event handler that was added using addEventListener. The addEventListener accepts three arguments: the event type, the function to be executed when the event fires, and an optional boolean value indicating whether to use capture.

Some useful JavaScript events:

mousemove: Fires repeatedly when you move the mouse cursor around the element.
mousedown: Fires when you press the mouse button on the element.
mouseup: Fires when you release the mouse button on the element.
mouseover: Occurs when the mouse cursor moves from outside to inside the boundaries of the element.
mouseout: Occurs when the mouse cursor is over an element and then moves to another element.
keydown: Fires when you press a key on the keyboard and fires repeatedly while you are holding down the key.
keyup: Fires when you release a key on the keyboard.
keypress: Occurs when you press a character keyboard like ABC and fires repeatedly while you hold down the key on the keyboard.
scroll: Occurs when you scroll a document or an element.

When an event occurs, the event flows from the most specific element to the least specific element; this is event bubbling. When the event starts at the least specific element and flows towards the most specific element, this event model is known as event capturing.

JavaScript Prototypes: Inheritance, Properties, and Methods

In JavaScript, every function and object has its own property called prototype. A prototype itself is also an object, creating a prototype chain.

Key aspects of JavaScript prototypes include:

Prototype Inheritance You can use the prototype to add properties and methods to a Constructor function, and objects inherit the properties and methods from a prototype.
Adding Properties To add a new property to a constructor function, use function name.prototype.property name = value.
Adding Methods To add a method, use function name.prototype.method name = function(){}.
Accessing Properties and Methods Objects created with the constructor function can access the properties and methods defined in the prototype.
Changing Prototype Values If a prototype value is changed, all new objects will have the changed property value, while previously created objects will have the previous value.

For example, consider a constructor function Person:

function Person(first, last) {

this.firstName = first;

this.lastName = last;

}

To add a new property called gender to the Person constructor function, use the prototype:

Person.prototype.gender = “male”;

To add a method called getFullName, use the prototype as well:

Person.prototype.getFullName = function() {

return this.firstName + ” ” + this.lastName;

}

Now, create two objects using the Person constructor function:

const person1 = new Person(“Elon”, “Musk”);

const person2 = new Person(“Bill”, “Gates”);

The objects person1 and person2 can access the gender property and getFullName method:

console.log(person1.gender); // Output: male

console.log(person2.getFullName()); // Output: Bill Gates

JavaScript and the DOM: Manipulating HTML Elements

The sources provide information on manipulating HTML elements using JavaScript, primarily through the DOM (Document Object Model).

Selecting HTML Elements To begin manipulating HTML elements, they must first be selected. Several DOM methods are available for this purpose:

getElementById(id): Selects an element by its id attribute.
getElementsByName(name): Retrieves all elements with a specific name attribute.
getElementsByTagName(tagname): Selects all elements with a given tag name.
getElementsByClassName(classname): Selects all elements with a specified class name.
querySelector(selector): Selects the first element that matches a CSS selector.
querySelectorAll(selector): Selects all elements that match a CSS selector.

Traversing HTML Elements After selecting an element, it’s possible to navigate the DOM tree to reach related elements:

parentNode: Accesses the parent node of an element.
firstChild: Accesses the first child node of an element.
lastChild: Accesses the last child node of an element.
childNodes: Provides a collection of all child nodes of an element.
firstElementChild: Accesses the first element child of an element.
lastElementChild: Accesses the last element child of an element.
nextElementSibling: Accesses the next sibling element of an element.
previousElementSibling: Accesses the previous sibling element of an element.

Modifying HTML Elements JavaScript offers various methods for modifying HTML elements:

createElement(tagname): Creates a new HTML element with the specified tag name.
appendChild(node): Adds a node as the last child of a parent node.
textContent: Sets or retrieves the text content of an element, ignoring HTML tags.
innerHTML: Sets or retrieves the HTML content within an element, interpreting HTML tags.
after(node or string): Inserts a node or string after a specified element.
append(node or string): Appends a node or string to the end of an element’s children.
prepend(node): Adds a node as the first child of an element.
insertAdjacentHTML(position, text): Inserts HTML at a specified position relative to an element.
replaceChild(newchild, oldchild): Replaces one child element of a node with another.
cloneNode(deep): Clones an HTML element. The deep argument specifies whether to clone all descendant nodes as well.
removeChild(child): Removes a child element from a node.
insertBefore(newnode, existingnode): Inserts a new node before an existing node.

Working with HTML Attributes Attributes of HTML elements can be accessed and changed with these methods:

attributes: Returns a collection of all attributes of an element.
getAttribute(name): Retrieves the value of the attribute with the specified name.
setAttribute(name, value): Sets the value of an attribute.
hasAttribute(name): Checks if an element has a specific attribute.
removeAttribute(name): Removes an attribute from an element.

Manipulating Element Style The style property is used to manipulate the inline styles of an HTML element:

element.style.property: Retrieves or sets the value of a CSS property.
element.style.cssText: Sets multiple CSS properties at once. Using += with cssText allows appending new styles without overriding existing ones.
getComputedStyle(element): Returns an object containing the values of all CSS properties of an element, including those from external stylesheets.

Manipulating Classes CSS classes can be manipulated for styling purposes:

className: Gets or sets the class name of an element. Assigning a new value overwrites existing classes, but concatenation can be used to add classes without removing existing ones.
classList: Provides methods for adding, removing, and toggling CSS classes.
add(classname): Adds a class to an element.
remove(classname): Removes a class from an element.
replace(oldclass, newclass): Replaces one class with another.
contains(classname): Checks if an element has a specific class.
toggle(classname): Adds or removes a class, depending on its presence.

JavaScript Full Course For Beginners With JavaScript Projects Tutorial And Notes 2024

The Original Text

hi guys welcome back to another video of greatest tack if you think JavaScript is difficult to learn and tired of watching multiple tutorials of JavaScript and still not feeling confident well you have come to the right video by the way this is not just a simple video but it is an ultimate course to start your journey into the exciting world of JavaScript in this JavaScript course we will start from the absolute Basics and I will guide you through the fundamentals of JavaScript that will help you to build a solid foundation in this course we will cover the introduction of JavaScript then we will see the basics of JavaScript where we will learn about the variables scope operators keyword reserved keywords and expression then we will see the data types and after that we will see the difference between primitive and reference values then we will move to operate s where we will learn about the arithmetic operator assignment operator logical operator comparison and then we will move to control flow statements where we will learn about if if else statements for while and do while loop and break and continue statement after that we will see the functions functions are important Concepts in JavaScript so in the function we will learn about the function parameters arguments return keyword in the function then we will see the anonymous function recursive function and default parameters after that we will learn about the objects and prototype where we will learn about the key values and method in the object then we will see the Constructor function prototype object D structuring and object literal syntax extensions after completing the object we will learn about the classes classes are also very important in JavaScript so in the classes we will learn about about the class getter and Setter methods then we’ll see the class Expressions inheritance static methods and private methods after completing the classes we will move to the Dom which is document object model so in this Dom we will learn about the notes then we will learn about get elements and query selected methods then we will see the create and clone element then we will learn add nodes to document then we will see get elements details using the Dom then we will learn about the modifying element using Dom then we will see get and modify the element class using the Dom then we will learn about the events available in this Dom each concept is clearly made to be beginner friendly with clear explanation and practical examples along with this I will also provide you the complete notes of this course in the video description but here is the best part it’s not just Theory at at the end of this tutorial we will make some real world projects like online Notes app Quiz app form validation image slider digital clock and e-commerce product page don’t worry you will not need any prior coding experience before starting this course by the end of this course you will be writing JavaScript code with confidence so are you ready to master JavaScript hit that subscribe button and help me to get the 5,000 likes on this course now let’s dive into the world of JavaScript together welcome to JavaScript introduction tutorial in this tutorial we will learn what is Javascript why you should learn JavaScript what is the use of JavaScript and how to write your first JavaScript program so what is Javascript JavaScript is a scripting language that is used to create interactive and dynamic websites interactive website means user can perform some action on website for example button click submit a form write comments and live chat Dynamic website means the website that changes its content or layout like sliding effect e-commerce website and quiz website why you should learn JavaScript JavaScript is the most popular programming language in the world it is used in almost all popular websites like Google Facebook Twitter Amazon Netflix and many others great thing about JavaScript is that you will find tons of Frameworks and libraries to reduce your time to create websites and mobile apps some of the popular Frameworks are react angular and vuejs if you learn JavaScript it opens a lot of job opportunities in the software development Industries what what is the use of JavaScript uses of JavaScript is not only limited to front-end web development it is also used in backend web development mobile app development desktop app development game development and API creation using JavaScript you can easily create websites like Amazon and Netflix mobile apps like Instagram and WhatsApp games like Tic Tac to and snake game you can also create mini JavaScript projects like to-do list app Quiz app Notes app weather app calculator or image gallery I already have 30 mini JavaScript projects on my YouTube channel that you can check out from the link given in the video description and these projects are more than enough to learn and practice JavaScript how to write your first JavaScript program to start with JavaScript you need to have a web browser and a code editor I’m using Google Chrome web browser and visual studio code editor I already have a tutorial how to download and install Visual Studio code editor you can find the video link in the description so let me open my code editor here I have one HTML file with basic HTML structure in this HTML page you can see we have the head open tag and head closing tag and this is the body open p and closing tag so the first option is to add the JavaScript code within the head tag so before closing of this head tag we can add our JavaScript code so let me add one a script tag a script open and closing tag like this and within this script we can add our JavaScript code so let me add one line of JavaScript here alert welcome to greatest stack this JavaScript code will give instruction to browser to alert this message welcome to greatest stack so let’s open this web page you can see this message welcome to greatest tack click okay so this was the first option to add the JavaScript code in the SML file now the second option is to write the JavaScript code within the body tag let me remove this script from here we have to add the code within this body tag so I will add it here a script open and closing tag within this we have the JavaScript code to alert one message welcome to greatest tag now let’s open the web page again and again you can see this message welcome to greatest tag so this JavaScript code written within the body tag is also working now let me remove it from here also there is another option to add the JavaScript code in the HTML file that is external Javascript so to add the external Javascript we will use a script SRC and the new file name so here let’s create a new file name and write the file name script.js you can write your own file name but the file name extension should bejs I’m writing a script.js you can write main.js index.js anything so this is the new file script.js and next we have to add this file here a script SRC and the file path a script.js so we have added the file path here now let me open the folder in this intro folder you can see there was one HTML file and now we have one more file the script.js and we have connected the script.js with the HTML file with thist script tag and now we can add our JavaScript code within this external file so here we will add alert welcome to greatest tag after adding this let’s come back to the website and now you can see this alert message welcome to greatest tag so this JavaScript code is also working now let me come back to the HTML file and we can move this a script tag in the head also like this and it will also work you can see this alert is working let me place it here within this body tag there are multiple options to display the output of JavaScript on the web page or browser so here I have added alert welcome to greatest T so we can see the message in the alert box there’s another option we can add document dot write welcome to greatest stack we can write like this document. write so it will write this message in the web page let’s see our web page you can see this message welcome to greatest tack it is written on the website now we have one more option here if I write console do log this will give the output in the browser console tab so let me show you come to this browser right click and select inspect it will open this developer tool and here you have to click on Console let me Zoom it click on Console we can change the theme by clicking on this setting icon appearance and do so this is the console tab here you can see this message welcome to greatest tag because here I have added console.log welcome to greatest tack if I change the message JavaScript tutorial come back to the website you can see welcome to greatest Tech here because I have added document. write and here you can see JavaScript tutorial because I have added console.log so it will add this message in the console Tab and in this console also we can add our JavaScript code we can write and execute the JavaScript code within this console tab also so let me show you one example if I write 4 + 5 and we got the result 9 so it is executing the JavaScript code here let me add one more thing if I write console dolog hello and hit enter you can see we have added console.log Hello and it is printed here hello now if you want to display the output on the browser alert box we can write like this alert hello hit enter you can see this alert box with the message hello now you can display the output on the website also let me add document dot WR and here we will add the message hello click enter you can see the Hello message on the website so this is how you can display the JavaScript output on your website or browser console and now you know how to write your JavaScript code so this was all about JavaScript introduction and writing your first JavaScript program what is variable in JavaScript variables are used to a store data it is like a container where we use to store things at home to declare a variable in JavaScript we use the V let and const keyword we can write where X here where is the keyword to declare a variable and X is the identifier or name of the variable we can also declare variable like let X or const X the V keyword is the oldest and the most common way to declare variables theet keyword is a newer keyword that was introduced in es6 we will learn about es6 later in the advanced JavaScript the const keyword is used to declare constants which are variables that cannot be changed once you have declared a variable you can assign a value to it using using equal sign for example where xal to 30 the following code declares a variable called X and assign it the value 30 variables can be used to store any type of data including number a string objects and arrays for example if I write where x equal to double quote or single quote any message hello world so here we are storing the string data type in the X variable variables name must begin with alphabet dollar sign or underscore if I write 2x it is not a valid name for the variable if I write anything in the alphabet it is valid and we can also declare it with the dollar sign we can start like this dollar X it is valid and we can also use underscore here like this underscore X let me remove it so you can see it is valid format to write a variable name you can start with dollar and you can start with any alphabet in upper case or lower case it is valid but if you start from the number it is not a valid name for the variable if you add the valid character then later you can add number it is valid JavaScript is case sensitive so if you write where first name equal to greatest stack and if you write first name with the lowercase end so these two variables name are different it is not same because here we have the different case so JavaScript is case sensitive that’s why it is two different variables name now let’s understand about the let keyword let keyword in JavaScript is used to declare a block scoped variable this means that the variable is only visible within the Block in which it is dict cleared for example if I write let x equal to 10 and if x greater than 5 yes it is greater than 5 because the x value is 10 in this block we will add let y = to 20 and here if I try to display the value of y we will add console do log y so you can see this y value in the console tab here you can see 20 correct we have added this code within this curly bres so it’s a block and if I try to access this y outside of this block we will copy this and paste it here here outside of this block and now if I try to run it you can see one error reference error why is not defined so if you try to access the Y value outside of this if statement you will get a reference error this is because variable Y is not defined outside of this block now let’s understand about the const keyword so the const keyword in JavaScript is used to declare a con Conant variable this means that the variable cannot be reassigned to a new value for example if I write const a equal to 4 so we are assigning a value for in the a variable now if I print this console do log a we will get four in the console tab now in the next line if I try to write AAL to 5 we are trying to reassign a new value a equal to 5 and run this you can see we got an error assignment to constant variable so we cannot assign a new value in constant variable now let’s learn about the scope in Java JavaScript scope in JavaScript refers to the visibility of variables and functions within a program in JavaScript there are three type of a scope Global scope function scope and the third one is block scope so let’s learn about the global scope the global scope is the outermost scope in the JavaScript program variables and functions declared in the global scope are visible from anywhere in the program let’s understand it with one example if I write where x equal to hello greatest stack and here we create one function called example and in this one if if I try to print this message if I write console do log X and now we have to call this function example now you can see this message in the console tab hello greatest stack over here in this example we have declared a variable X outside of any function or block which makes it a global variable Global variables are accessible from anywhere in the script including inside a function and we have declared this outside of the function so we can access it within the function and outside of the function also if I simply add this here and it will also print this you can see Hello greatest stack two times the first one is printed using this console.log written inside the function and the second message is printed using this console.log x so this was the global scope now let’s understand what is the function scope so the function scope is created when a function is declared variables and functions declared in a functions scope are only ual within that function so let’s understand this function scope with one example here we will add function example here we will create one variable where FS function scope equal to hello greatest stch and if I try to display the output we will add console. log fs and now just call this function so now you can see this message hello greatest TCH because we are accessing this variable inside this function now if I try to access this FS outside of this function let’s copy this and paste it here outside of this function and try to run it we got an error FS is not defined why because we have defined this FS variable inside this function so it is a function scope variable and now we are trying to access this FS outside of this function it is not accessible so the variables and functions declared in a functions scope are only visible within that function now let’s understand the block scope so the block scope in JavaScript refers to the visibility of variables and functions within a block of code a block of code is a group of statement that are enclosed in a curly braces variables and functions declared in a block scope are only visible within that block let’s understand block scope with one example let’s create one function and in this one we will create one block true and here we are creating one block with this curly bres So within this if we will add one variable so let’s add the variable name block variable BV equal to create a stack and here if we try to display this console.log BV and just call this example now you can see this message greatest stack in the console tab here because we are accessing this variable inside this block now if I try to access this variable outside of this block it is declared inside this block and if I try to access here this block is closing here so let’s add this line here at line number n and now if I try to run you can see we got an error in line number nine BV is not defined because we are accessing this variable outside of this block let’s try to access this variable outside of this function only let’s remove it from here and add it here at the end and now you can see the error message at line number 12 BV is not defined because we are trying to access this variable outside of this block so the variable and functions declared in a block scope are only visible within that block so this was all about the variables and the scope in JavaScript data types in JavaScript data types is an important Concept in any programming language to perform any task with the data it is important to know its type data types in JavaScript are divided into two categories primitive data type and reference data type there are seven primitive data types in JavaScript which are a string number buo null undefined big int and symbol so let’s learn about the string data type in JavaScript a string is a sequence of zero or more characters a string starts and end with either a single quote or a double quote JavaScript strings are for storing and manipulating text for example if I write let first name equal to double code elone so here we are adding one name in double quote it is a string and the variable name is first name let me duplicate it here we will add last name and if I write the text in single quote musk it is also a string it is written in double quote and this is written in the single quote now let’s see another data type which is number number represents integer and floating Point numbers for example if I write let num equal to 100 in this statement we have declared one variable called num and initialized its value with the integer 100 let me change the value if I write 96.5 it is also a number type here we have stored the floating number if we write 96.0 then JavaScript will convert it into an integer number to use less memory so it will be saved only 96 let me show you that if I write console.log num so you can see 96 is printed here it is not printing 96.0 it is printing 96 only because the JavaScript is converting this floating number into an integer and if I type 96.5 it will be saved as 96.5 and if we change 96. it will be only 96 now let me tell take another example if I write let x equal to 10 so here I have stored one number in the X variable let me write console.log X here we will get 10 in this console tab we got 10 now if I add a single quote in this 10 now it will become string because we are adding single quote in this text now if I print this one you can see still it is displaying 10 but if you will check the data type it will be a string the value is 10 but the data type is a string to check the data type we have one operator called type of in front of this variable name if I write type of X you can see we got the data type string because this 10 is written inside the single quote if I change it and make double quote still it will be string you can see string here now if I remove this quote and if we only write 10 then it will be a number you can see it is number when we will add double quote or single quote it will be stored as a string now the next data type is Boolean the Boolean data type has two values true and false let’s understand it with one example if I write let learning equal to true and and let completed equal to false here we have stored Boolean data in the learning variable and completed variable now to check this one we will add console.log learning you can see true so it is display the value stored in this learning now to check the type of the data stored in this learning we will again use the type of operator type of learning so it is displaying the data type Boolean now let’s check the data type of this another variable which is completed just copy this one add it here here it will display the data type Boolean for the another variable called completed now if you want to display the value stored in this completed here I’m adding console.log completed and it is displaying false here which is the value stored in the completed variable and it is the type of the value which is Boolean so we have stored the true or false value directly but we can store the result of any expression for for example if I write let X = to 20 greater than 10 so the result of this is true 20 is greater than 10 it is true so now if you want to check the value stored in the X we will add console.log X and now you can see it is displaying true here we are writing 20 greater than 10 but the X has stored the result of this expression which is true now if I change if I write 20 less than 10 which is false so you can see the result in the console tab it is displaying false so we have stored the false in the X variable now let me show you the type of the data here we will add type of X and now it is displaying Boolean so this x has a store the Boolean data type next primitive data type is undefined if a variable is declared but the value is not assigned then the value of that variable will be undefined and the data type is also undefined let me show you this with one example let H we have declared a variable age but we have not assigned any value now we will check the value stored in this age let’s add console.log age here you can see the value is undefined now if you want to check the type of the data here we will add console.log type of age now you can see the value is also undefined and the type is also undefined if we add any value like this a is 30 now you can see the value is 30 and the type is number and when we remove it we have not assigned any value so the value is undefined and type is undefined so this was undefined data type next pleas primitive data type is null in the JavaScript null is a special data type that represents empty or unknown value let’s understand it with one example here if I write let number equal to null and now we will try to print the value here we will add console log number so you can see the result it is displaying null now we will try to display the type of the data so here in the next line we will add console.log type of number you can see the value is null but the type is object the type should be null but it says the type is object it is a known bug in JavaScript JavaScript defines that null is equal to undefined to check this one we will write console.log null comparison operator then undefined so we are comparing null with the undefined and here you can see we got the result true it means in JavaScript null is equal to undefined there are two other primitive data types which are symbol and B that we will study in our upcoming videos now let’s learn about the reference data type so the first reference data type is object in JavaScript an object is a collection of properties where each property is is defined as a key value pair so let me create one object here if I write let person equal to curlys that’s it so the following code defines an empty object this is the person object which is empty now let me display the data stored in this person object for that we will add console.log person that’s it now you can see we got the empty curly bles now to check the type of the data we will copy this one and here we will add type of person so you can see the result the data is empty in this curly Braes and the data type is object now let’s add some properties in this person object here we will add first [Applause] name last name and age let’s add 35 so you can see in the console tab the data type is object and this is the data stored in the person object first name Elon last name musk age 35 an object can store different data type in this person object the first name and the last name are string and this age is number so this person object can store different type of data it can also store another object our next reference data type is array arays are a type of object that stores a collection of values for example if I write let number we have have added five different number separated by comma in the square bracket so the following code creates an array of numbers now let’s print the value of this number we will add console.log number so in the console tab you can see this aray is printed 1 2 3 4 and 5 the same thing is printed here now if you want to check check the type so let’s add this line again and in this one we will add type of operator type of number now you can see in the console tab we got the type object so the array is also an object data type our next data types is function functions are a type of object that can be used to execute code for example here we will create one function to create a function we use the function keyword and the name of the function so let’s add the function name MSG that is for the message and in this one just add one console.log and here we will add one string hello greatest tag so we have declared one function with the function name MSG now if you want to check the type of the data here we will add console.log type of MSG that is function name and if I check this in the console tab you can see it is displaying function it says the type of data is function but it is also an object data type Javas script is a dynamically typed language so we can store different data type in the same variable for example if I write let X here we are not assigning any value so the data type will be undefined so let’s check this one type of X it is displaying undefined let’s check the value also if I write console.log X console.log type of X so it will display the value stored in the X and it will display the data type now you can see in the console tab it is displaying the value undefined and data type undefined now in the same variable we can store different data type here we have already declared the variable so we will just add X we are not declaring we are just assigning the value x equal to let’s say one string greatest tag so here we are adding one string in the X variable let’s try to to print this you can see in the console tab it is printing undefined and undefined from here now we have changed the data it is greatest tag which is string so you can see the value and the data type is a string now again we can change the type of the data we will simply store another data let’s add x equal to 100 so here we have stored the number let’s try to print this now you can see in the console tab we have the value 100 and we have the type number so earlier it was undefined then it is a string then it is number now let’s add one more example if I write X true and in the console tab you can see it is true and the data type is Boolean so the JavaScript is dynamically typed language so we can store different type of data in the same variable and in this one you can see the example also it is undefined it is string it is number it is Boolean so this was all about the data types in JavaScript operators in JavaScript operators in JavaScript are symbols that are used to perform operations on operants operant are the values and variables so let’s understand it with one example here if I write 10 + 20 here plus is an operator and 10 and 20 are operant here is the list of different operators that we will learn in this tutorial arithmetic operators assignment operator comparison operators logical operators and string operators now let’s learn arithmetic operators arithmetic operators are used to perform mathematical operations on operants there are multiple arithmetic operators so first one is addition here we will add let sum equal to 5 + 3 and console.log sum so in the console tab you can see we got the sum which is 8 5 + 3al 8 this is the addition operator now let’s learn the second one which is substraction here we will add substraction it will be x 5 – 3 three it will be X now you can see two in the console tab because 5 – 3 is 2 so this is the substraction now the next one is multiplication if I write five multiply 3 now you can see the result 15 now the next one is division operator for division views forward slash let’s add 15 ided 3 now you can see the result 5 15 / 3al to 5 now the next one is reminder or modulus here we will add modulus and to get the modulus we use percent symbol and and if I write 17 perc 4 now we will get the modulus 1 you can see when you divide 17 by 4 you will get the reminder 1 which is modulus now the next arithmetic operator is exponentiation when you write 2 to ^ 4 2 to the^ 5 that is exponential so to calculate the exponential here we will add X two double star and four so it means we will add 2 into 2 into 2 four times like this so what will be the result you can see in the console tab 16 so if you write dou star it will be exponentiation operator so these are arithmetic operators now let’s learn about the assignment operator assignment operators are used to assign values to variables we use equal sign to assign operator for example let X = to 5 here we are using equal sign which is the assignment operator and we write the value on the right side of the operator so this was the simple assignment M operator now we have other assignment operator also like addition assignment so let’s see that we have the x value 5 now we will add X Plus equal to 3 so if you simply add x = 3 it will replace the value in this x variable and the X will become three but here we are adding plus it means this three will be added in the existing value of this x so the current value of x is 5 and 5 + 3 will be 8 let’s check the output console. log X and in the console tab you can see the value8 so this was the addition assignment similarly we have the substraction assignment here we will add minus equal to 3 now we will get the output two you can see the output 2 now we have the multiplication here we will add multiply 3 so this three will be multiplied with the current value which is 5 5 into 3 and now you can see the output 15 next one is division assignment you can see this value here after that we have the modulus assignment you can see see the modulus 2 now the next one is exponentiation assignment dou star equal to 3 it means we are writing 5 to the^ 3 and it will be 5 * 5 * 5 so the result is 125 now let’s learn about increment and decrement operators the increment and decrement operators are used to increase or decrease the value of a variable by one suppose the variable value is five it will be incremented by 1 and it will become six or it will be decremented by one it will become four the increment operator is Plus+ and the decrement operator is minus minus increment and decrement operators can be used in two ways which is prefix and postfix so let’s learn prefix increment and decrement operator let me add one example here let a equal to 10 in the next line I’ll add console. log Plus+ a we are adding increment operator before the variable name which is a now you can see the output 11 because the value of a has been incremented by one now let me add one more line console.log a so in this line the value of a is incremented by 1 then it is printed 11 and in this line the current value of a is printed the current value is 11 in this example operator is placed before the variable and the value of the variable is increased before it is used now let’s see prefix decrement operator so for decrement we will add minus minus and in the console tab you can see the output 9 and 9 so it is decreasing the value of a by 1 then it is printed here and in the next line we are printing the current value of a which is 9 now let’s learn about the postfix increment and decrement operator in the postfix we add the operator after the variable so if I remove this and add Plus+ after a now you can see the output first it is printing 10 and after that 11 here we are adding A++ but still it is printing 10 because a is printed first and after that it is increasing the the a value by one now the next time I will print the a value it will display the updated value here it is displaying 11 in this example operator is placed after the variable and the value of the variable is used before it is incremented the same thing will happen with the decrement post fix operator if I run this one you can see current value of a is 10 and first it is printing the value 10 after that it is decreasing the value by one and if I print the new value of a it is N9 so this was the increment and decrement operator now let’s learn about comparison operator comparison operators compare two values and give back a Boolean value either true or false comparison operators are useful in decision- making and loop programming in JavaScript let’s see some example if I write like this it will be the less than operator it is greater than this will be less than or equal to this is greater or equal to this will be equal check it will check the equality of two values it will be inequality or not equal and it will give the flip value of the equal checks we will understand it with the example also and this one is the strict equality check it checks the data type also I will also explain it with example and it is the strict inequality or flipped value of the strict equality check now let’s understand these comparison operators with example here if I add let a = to 10 b equal to 20 and here we are adding less than operator you can see console. log a less than V so it will give the result true in this one it is checking a greater than b which is false a is 10 B is 20 so a greater than b is false so it will give the result false now it is a less equal to B so it will be true and this will be false a greater or equal to B it is false because a value is 10 now here we are checking a equal equal B it means a value is equal to B is not equal it is 10 and 20 so it will be false in this not equal we will get the flipped result of this equality check so the equality check was false so this will be true and this is the strict equality check and this is the strict unequality check so let’s print this one you can see the first one is true a less than b true a greater than b false a less than equal to B this true a greater equal to B it is false A = to B 10 = to 20 which is false a not equal to B so it will be true now in the next line we are adding a strict equal so A and B is 10 and 20 it is not equal so we will get false and it will be the opposite it result true now let’s understand it with other example if I remove this and here if I write like this 10 and it will be 10 so a is 10 as a string and B is 10 as a number now let me add one more thing here console.log a equal equal B now you can see the first one is true why a is 10 B is 10 then it is true now in the next line we are adding a triple equal to V it is giving false why first it will check the data type so in this one the data type is a string and the data type is number in the B variable then it is different so it is not equal so that’s why it is giving false and the last one is giving true because it will give the flipped value of this false our next topic is logical operators logical operators perform logical operations like and or not for logical and we use this symbol for logical or we use this symbol and for logical not we use this exclamation symbol so let’s learn about the logical and logical and evaluate op and return true only if all are true in this line you can see the first condition is true and the second is true and here we are adding logical and operator so both are true that’s why the result will be true now in this one the first one is true second one is false so both conditions are not true that’s why it is false here also one of the condition is false it is false here both conditions are false that’s why it is false only when both conditions are true then only the result will be true now let’s understand logical and operator with one example here I have added let X = to 5 and y equal to 10 and I’m adding X greater than 0 so this condition is true X is obviously greater than z y is also greater than zero then the first condition is true second is also true then the result will be true you can see the first result is true now in the second condition you can see X greater than 0 which is true y less than 0 which is false 10 less than 0 is false right then one of the condition is false that’s why the result is false now in The Third One X less than Z which is false then the result will be false and in the last one 5 less than 0 is false and Y isal to 10 which is 10 less than 0 which is false so both conditions are false that’s why the logic result is false so this was The Logical end now let’s learn about the logical or logical or returns true if one of the multiple operant is true if any one oper is true then it will return true so here you can see the first one is true true and second one is true so the output will be true first one is true second is false still the output is true first one is false second is true then the output is true in the last one first condition is false and second condition is also false then the result will be false so if all operant are false then the output will be false and if any one of the operant is true the result will be true now let’s understand this logical or with one example here we have the a value 5 b value 10 and a greater than Z true B greater than Z true so both conditions are true then result will be true now here the first one is true this is false then still it is true it is false it is true then still it is true now in the last one for first one is false second one is false so both operant are false so the result is false so this is the logical or operator now let’s learn about The Logical not logical not converts operator to Boolean and return flipped value let’s understand it with one example if I write let yes is equal to True let no equal to false we are adding two variable yes and no and yes is true no is false and if I try to print not yes not operator and yes then it will give the flipped result earlier it was true now it will display false you can see the first one is false here in the second one we are adding not no so the no value is false so the not no will be true you can see the not no is true so this is The Logical not operator our next topic is Javascript string operators in JavaScript you can also use plus operator to concatenate or join two or more strings let me explain this with one example if I write console.log and in this one in this one we will add two string let me add hello Plus World and let’s see the console tab you can see hello world is printed here if you need one space we will add it here now you can see it is printed with one space hello world we we can join the string using the addition assignment operator Also let’s see another example if I write let a equal to JavaScript and in the next line I will add a addition assignment operator plus equal to and here we will add another text so let’s add a space tutorial in the current value of a the current value is Javascript and in this JavaScript it will add this tutorial let’s print it in the console you can see this text JavaScript tutorial is printed in this console tab so this is how you can join or concatenate strings in JavaScript using the plus operator so this was the string operator in JavaScript there’s one more operator in JavaScript which is bitwise operator bitwise operators are rarely used in everyday programming that’s why we will skip this one our next topic is operator precedence operator precedence in JavaScript determines the order in which operators are passed concerning each other let me take one example let result equal to 2 + 3 * by 4 so what will be the output here if you add 2 + 3 it will be 5 and 5 * by 4 it will be 20 so this will be output or it will will be 4 * by 3 12 + 2 = 14 so which is the correct answer so the correct value is 14 let me show this result in console tab now in the console tab you can see the output 14 why because the 3 * by 4 is performing first and after that it is adding two so why multiplication is performed before addition it is because of the operator’s precedence value in this table you can see the Precedence of multiplication and precedence of addition so the higher precedence is performed first that’s why it is multiplying three and four after that it is adding two and the result is 14 so this was operator precedence now let’s learn about Operator associativity Operator associativity in JavaScript defines the order in which operators of the same precedence are evaluated there are two type of operator associativity left to right right to left in this table you can see the operator name and their associativity now let’s learn about the left to right associativity in left to right associativity operators are evaluated from left to right let’s take one example if I add let result equal to 4 – 2 – 1 in this example only substraction operator is used and its associativity is left to right as you can see in this table the expression 4 – 2 – 4 is evaluated from left to right first 4 minus 2 will be evaluated and it will give the result 2 then 2 – 1 will be evaluated and it will give the result one so let’s check the result in the console tab you can see the result one so this was left to right associativity now let’s learn about the right to left associativity in right to left associativity operators are evaluated from right to left for example let result equal to two exponentiation 3 exponentiation 2 in this example only exponentiation operator is used and its associativity is from right to left as you can see in this table first three exponentiation 2 is calculated resulting in N then 2 exponentiation 9 is evaluated and giving the result 500 12 so let’s see the result in the console tab here if I write log result you can see the result 512 so this was all about the JavaScript operators control flow statements in JavaScript control flow statements are used to control the flow of execution in JavaScript program they are used to make decisions execute loops and handle errors there are three type of control flow statements in JavaScript which is conditional statements loops and try catch statements so now let’s learn about conditional statements conditional statements are used to execute different code based on different condition the most common conditional statements in JavaScript are are if a statement else a statement and else if a statement if a statement in JavaScript is used to execute a block of code if a condition is true so let’s understand it with one example here we will add if and in this parenthesis we will add one condition condition will be true or false so we will add true in this block let’s add one line of code execute so in the console tab you can see this message execute in this example the condition is true that’s why it is executing this code and it is printing execute in this console tab now if I change it here we will add false and now in the console tab you can see nothing is printed why because if the condition is false then any code written within this block will be skipped it will not execute now let’s understand it with another example here we will add age greater than 18 and let’s add let age equal to 20 and and it will print one message you are an adult so here we have the age value 20 and the condition is age greater than 18 so you can see 20 is greater than 18 that’s why this block of code will be executed and we will see this message here now if we change the value of this age let’s add 16 now in the console tab you can see it is blank nothing is printed why because this condition is false 16 greater than 18 is false that’s why this code will not be executed let me comment this and we will take another example and here let’s understand with another example we will add let country equal to India and let age equal to 20 if age greater equal to 18 and operator country equal to India so this is the if statement where we are adding two conditions using the logical and operator here we are adding logical and that’s why if the first condition is true and second condition is true then only this complete line output will be true so you can see the age is 20 which is greater than 18 and country is India and here it is comparing with India so this condition is also true and this is also true then overall result is true so we can print any message console.log you can get a driver’s license now you can see it is printed here in this console tab you can get your driver license now if I change the age value to 17 now nothing is printed in this console tab it is empty so you can add this type of logical or logical and operator to get the true or false value and then if the value is true then only this code will be executed now let’s learn about the if Elsa statement if Elsa statement in JavaScript is a conditional statement that is used to execute a block of code if a condition is true and another block of code if the condition is false so let’s understand it with one example here we will add the same example here you can see if the condition is true then only this code will be executed now we have to add another statement that will be executed when the condition is false so here just add else in this else condition I will print another message console.log you a minor now you can see in in the console tab we got an message you are a minor why because the age is 18 so the if condition is false here we are adding 16 greater than 18 which is false so if it is false then else condition will be executed and if I change the value 19 you can see the message you are an adult the if condition is getting executed next conditional statement is else if so in this example we have one if condition and one else condition now we need another condition also so here we will add else if and in this one let’s add one condition check here we will add age greater equal to 16 it will be greater equal to 18 and in this else if let’s print one message console.log you are a teenager so what will happen in this program first it will check if it is 19 this if condition will be executed now if this condition is false suppose the value is 7 1 now it will jump to the next statement the first one is false it will come to the next statement which is else if and in this one it will check whether the condition is true or false if the condition is true then only this code will be executed else it will go to the another statement so here let’s check age is 17 and 17 is greater than 16 correct so that’s why this condition is true then this code will be ex uted now let’s check this one and you can see in the console tab we got the message you are a teenager it is printing from this console.log which is in the else if statement like this you can have multiple else if a statement suppose this is also false let’s add 15 age is 15 so this condition is false this condition is also false so it will execute the else condition condition else condition is ur minor you can see in the console tab the message Ur minor now you know the if statement else if statement and else statement now we will learn about this switch in JavaScript the switch statement in JavaScript is a conditional statement that is used to execute a block of code based on the value of an expression let’s understand the switch with one example here if we write let value is equal to 42 and then we will add the switch statement so this is the syntax to write this switcher statement in this one we will add type of value so it will get the type of this value variable and the type is number for now now in this case we will execute different message we can create multiple cases so in the first case let’s add number so if the type is number then we will print console.log number we can add multiple case so let’s duplicate it and here we will add string console.log string let’s add another one it will be Boolean console.log bullion in the default we will add console.log other now in this switch statement you can see the output is number why because we are adding value is equal to 42 which is is the number type and here it will check the case if it is number then it will print number now if we change the type if I add hello so the type of this variable is a string so it will check this case it is not correct then it will check this case so the type is a string correct that’s why it is printing this message now if I change it let’s add true so the type is Boolean so this case will be executed and it will print Boolean now if I add anything else let’s add one array now you can see other is printed here because this case is also false this is also false this is also false so it will print the default one so in this default we have added message other that’s why it is printing other in this console tab now let’s take another example of this switch case here we will add day name and the day name let’s add two suppose the day start with Sunday Monday Tuesday and the number is 1 2 3 for Sunday it is 1 Monday it is two so here we are adding let day name is equal to two now let’s add the switch statement went went in this one we have to pass the day name so let’s add switch day name as a key and here we will add different values so first value will be one and here day name is equal to Sunday now we will add second case case 2 so the day name will be Monday let’s add case three so we have added seven different Case Case 1 2 3 4 5 6 7 and name of the day wednessday Thursday Friday Saturday suppose we have entered Any number greater than 7 then we will display another message so here in this default we will add day name is equal to invalid day number now to print this we will add console.log let’s add the message the day is plus day name this is the string and this is the variable now in the console tab you can see the day is Monday why because we have added day name two now let’s change it here we will add five and we will check the console tab you can see the day is Thursday let’s add seven so it will check this case one then it will check two then it will check three so it is seven so it will come here case and the value is seven then day name will be Saturday and it will be printed using this console the day is Saturday so this is the switch case statement in the JavaScript now we will learn Turner operator it also works like if else a statement let me write the example of if else a stat M so here we have added let age equal to 20 if a greater than or equal to 18 so if this condition is true this code will be executed and if this condition is false then else statement will be executed now the same thing we can execute using the Turner operator for Turner operator we use this question mark now let’s see the Syntax for the Turner operator first we will add condition then question mark and after this question mark we will add the code that will be executed if the condition is true so here we will add value if true now we will add column and here we will add the code that will be executed if the condition is false value if false this is the syntax to use the Turner operator now let’s understand with example so here we will add the same thing let age is equal to 20 and now we will add the condition like this age greater equal to 18 question mark if it is greater then what we will print we will print Ur an adult this will be the message and if it is false this condition is false then we will print you are a minor we can directly write console.log and this message so it will be printed in the console tab so this will become so long that’s why here I’m adding let MSG is equal to this either this message or this message will be stored in this MSG now we will add console.log MSG let’s see the output in the console tab you are an adult now if I change the value it will be 16 now check this you are a minor so this is how the Turner operator is working same as the F statement so this was all about the conditional statements Loops in JavaScript in programming Loops are used to repeat a block of code for example if you want to display a message 100 times then you can use a loop first we will learn about the for Loop syntax of the for Loop is this one you have to add for then in this parenthesis we are adding the initial value of I after that we are checking the condition if this condition is true then only this code will be executed and after execution of this code written in this curly reses it will increase the value of I by 1 now let’s understand the for loop with one example suppose I want to print one message 10 times for that here let’s add console.log and in the message I will add greatest stag so I want to print this greatest stack 10 times let’s start it with one initial value of I is 1 and I want to print this for 10 times so here we will add less than equal to 10 this is simple now if I run this code you can see Greatest Tag is printed 10 times you can see 10 here we are printing the same message 10 time that’s why the browser will collapse it and display only one line and here it will display 10 it is printed 10 times now let’s take the another example of for loop I want to print number from 1 to 10 for that this for condition will be same here we will just add I so first what will happen the I value will be one and it will be printed using this console. log I after that it will increase the value so the I value will be 2 and it is less than 10 right then it will print two again it will increase the value that will be I3 and IAL to 3 is less than 10 so 3 will be printed so like this it will be printed up to 10 now run this code and you can see 1 2 3 up to 10 is printed in this console tab we can use Loops for printing the data of an array let’s take another example let me comment it and here I will add let coding equal to one array and in this array I will add JavaScript python C++ now I want to print the JavaScript Python and CPP using for Loop to get the element we use the index so index I start with zero JavaScript is at zero index python have index one CPP have index two so let’s write the for Loop here we will add for let’s add let I is equal to 0 because index starts with zero now I will be less than the length of array so this is the array dot length so AR length is three maximum index value is two that’s why I’m adding I less than coding do length that is 3 I Less Than 3 after that we will add i++ and in this C adds we will add the code that has to be executed every time so here we will add console.log coding and I first it will execute coding zero then coding one and coding two so coding zero will display JavaScript coding 1 will display Python and coding two will display CPP so you can see the output in this console tab JavaScript Python and CPP so you can use the loop on ADD also we can create another loop inside a loop let’s see another example here we already have this code this is the first Loop and let me make it small I’ll add one to five and it will print the number from 1 to 5 and after that we will add another loop inside this Loop here we will add for and here we will add another variable name let’s add let Jal to 1 so initial value is 1 next we will run this Loop for three times so here we will add J less than equal to 3 then increase the value of J and in this we will print another message let’s add console.log and here we will add one message inner loop plus J now you can see the output in the console tab first it will execute this code and after that it will come to this for Loop now this for Loop will be executed for three times and in three times it will print inner loop one inner loop two inner loop three here we will add a space so you can see inner loop 1 2 3 now again it will increase the value of I so I will be two and this will be printed console. log I so 2 will be printed in the console tab you can see two is printed here and after this again this for Loop will be executed and it will again print from the 1 to 3 you can see 1 2 three now again the I value will be increased by one it will be three and three is printed here and again it will execute this inner loop now you can see the message inner loop 1 2 3 again the outer loop will be executed console. log I I will be 4 so this is how you can use another loop inside a loop now we will learn while loop syntax of while loop let’s add V and in this parenthesis we will add condition then in this curly Braes we will add the code that has to be repeated so this is the syntax of while loop which is very simple so in this one we have to add one condition and this code will be executed until the condition is true when the condition is false it will stop the loop now let’s understand the Y loop with one example we will print number from 0 to 10 so here let’s add console.log let’s add I and we have to declare this I so here we will add let I equal to 0 because we have to print the number from 0 to 10 now in this condition we will add I less than equal to 10 so first it will check the I value I value is zero so if the value is less than 10 then it will print the value of I now it will print the same value again and again so we have to increase the value so in the next line we will add i++ so first it will print the value then it will increase the value now you can see the output 0 1 2 up to 10 so this while loop is repeating this code until the I value is less than or equal to 10 suppose the I value is 10 so 10 less than equal to 10 is true it will print this value that is printed here now it will increase the value by 1 so I will become 11 now it will again go to this condition and 11 is less than equal to 10 that is false once it is false then it will stop this Loop next we will learn do while loop do while loop is also very simple so this is the Syntax for do while loop first it will execute the code written in this do statement and after that it will check the condition if the condition is true then it will again execute this code and when the condition is false it will stop this Loop now let’s understand it with one example let’s write one code to print a number from 1 to five using do while loop so here we will add let IAL to 1 and it will print using console tab console.log I and here it will check the condition we will add I less than equal to 5 here we have to increase the value of I so let’s add i++ now you can see the output in the console tab 1 2 3 4 5 so first the I value is 1 then it will come to this statement and it will print the value of I 1 then it will increase the value by 1 so it will become two so 2 is less than equal to 5 that is true so again it will print the value so it will be printed here then it will become three and 3 is less than equal to 5 that is also true again three will be printed here like this it will print one to five series now let’s change the value of I to 10 if I add IAL to 10 you can see the output 10 is printed here why it is printed because do Loop will execute the code first time then only it will check the condition so first it will print the value of I I isal to 10 so console. log I will be printed here 10 then it will increase the value 11 then the value of I will be checked here I less than equal to 5 which is false so it will not execute the code again but the first time it will be printed so this was for Loop while loop and do while loop apart from this there are some other Loops also like for off for in that we will study in advanced JavaScript now we will learn about break and continue statement in JavaScript the break statement is used to terminate the loop immediately let’s understand this with one example let’s take one example of for Loop for printing 1 to five number this for Loop is printing number from 1 to 5 you can see in the console tab now if I add one if condition here before printing this number here we will add if I comparison operator three when the I value is three then we will add break so you can see what will happen when it will get the break statement it will terminate the loop it will stop the loop you can see in the output only one and two is printed first time the I value will be printed then second time the I value will be printed that will be two then third time I will be three and here it will be checked if I is equal to 3 it will get this break statement and after that it will terminate the loop only IAL to 1 and two is printed here so this is how we use the break to terminate the loop or exit the loop now we will learn about the continue the continue statement is used to skip the current iteration of the loop and the control flow of the program goes to the next iteration let’s see the example here if I write continue then what will happen first the I value will be one so it will not be executed then I will be two it will not be executed then I value will be three once the I value is three it will get this continuous statement when it will get the continuous statement it will skip the remaining code of this for Loop it will directly come to the next iteration it will increase the value of I by 1 so I will be for so the four will be printed now you can see the output 1 2 4 5 3 is not printed because when the I value is three it will skip this part and the I will become four then again four will be printed so this is how break and continue statement works so this was all about the for Loop while loop do while loop break and continue in this tutorial we will learn about function in JavaScript a function is a block of code that performs the specific task functions in JavaScript are reusable block of code that can be called from anywhere in your program here is the syntax to declare a function a function can be defined using the function keyword followed by the function name the body of a function is written within this curly process now let’s create a function to print a text we will use the function keyword and the function name is GRE to print any text we will add console.log and message in the double code now we need to call this function to execute the code written in this function for calling this function we will use the function name and parenthesis so simply we will add great and this parenthesis so this estate will evoke the function or call this function after that you can see the output in the console tab hello Greatest Tag is printed here so this is the function declaration using the function keyword and the function name this is the body of function where we will add the code that will be executed within the function and this code is for calling this function or evoke the function now we will learn about parameters and arguments parameters are the variable that are declared in the function definition while the arguments are the value that are passed to the function when it is called let’s see one example of function with parameters we will create one function with the function keyword and the function name is gr and in this one we will add two parameters first name comma last name so this first name and last name are variable that are declared while declaring this function this is known as parameter now we will add the code in the body of this function here we will add console.log and we will add the text hello plus there will be first name then we will add plus and one space within double quote then again we will add plus and last name so it will print hello first name and last name in the console tab so right now we have declared the function with two parameters now we have to call this function while calling this function we have to pass two values that will be arguments so to call this function we will add the function name GRE and with this function name we have to add two values so let’s add first value Elon comma musk so we are passing two values when calling this gr function now you can see the output in the console tab here it is printing hello Elon Musk let’s add a space here now it looks good hello Elon Musk is printed in this console tab we can pass any data type as argument so let’s add another data type I will add 200 that will be number here also we will add 100 now see the output you can see it is printing hello to 200 and 100 so we can pass any data type as argument while calling the function we can pass less or more arguments while calling a function if we pass less arguments then the rest of the parameters will be undefined if you pass more arguments then additional arguments will be ignored let’s see one example if I just pass GRE alone and comment this first call here you can see the output it is saying hello Elon and undefined because we are passing only one argument and here we have two parameters first name and last name so this alone will be stored in this first name so it will print hello and the first name is Elon and in the second parameter which is last name we are not passing any argument so it will be un defined that’s why it is printing hello Elon undefined the last name is undefined so we can pass less argument now let’s see another example if you pass more arguments here if I add Alon comma musk comma Mr now see the output here it is printing hello Elon Musk so the first argument will be stored in the first parameter which is first name second argument will be stored in the second parameter which is last name and this third parameter will be ignored because we have only two parameters here so it will only print this hello and the first name Elon and last name musk the third argument will be ignored now let’s learn about default parameters default parameters in JavaScript are parameters that have a default value this means that if the argument is not passed to the function the default value will be used let’s see one example of default parameters here we will create one function write the function name sum and in this sum function we will add two parameters which is X and Y now in this body of function we will add console.log and it will log the X + Y it will add the X and Y value and it will display in the console tab now to call this function we will add function name and parenthesis but here you can see we have two parameters X and Y so when calling this function we have to pass two arguments also so let’s add two values 10A 15 15 so this 10 will be stored in x 15 will be stored in y and this console. log will display 10 + 15 that will be 25 you can see in the console tab it is printing 25 10 + 15 now you can see if I remove 15 from here and we are just passing 10 10 will be stored in X and Y will be undefined and here we are printing x + y so let’s see what will be output here it is printing n n why it is because here we are adding 10 plus undefined x + y will be 10 plus undefined that’s why it is printing NN that means not a number we cannot add the undefined n number so it is printing an N here we are passing only one parameter and you want this function to work for that we can add Y is equal to 0 suppose we have added y value zero then you can see the output in the console tab it is printing 10 let’s see if I add 50 we are passing 50 in X and Y default value is zero so x + y that means 50 + 0 that will be 50 you can see the output 50 is printed so 0 is the default value of this y parameter and here if we pass two numbers 50 + 30 then it will use 30 in this y you can see the output 50 + 30 80 is printed here because we are passing two arguments 50 50 will be stored in x 30 will be stored in y so this was the default parameters in Javas script now we will learn about function return the return statement can be used to return the value when the function is called the return statement donates that the function has ended any code after return is not executed let’s see one example if I create one function and function name is ADD and in this one we will add two parameters A and B now we can add return A+ B so this function will return the addition of A and B now to call this function we will add the function name add and in this one we have to add two values as argument so we will add 10 and 20 so this will call this function and this function will return the addition of 10 + 20 so we can store this result so here let’s add one variable with the let keyword let result equal to add function so the return of this add function will be assigned in this result variable now we can print this result we will add console do log the sum is result now you can see the output in the console tab it is displaying the sum is 30 if we add 10 and 40 you can see the output in console tab the sum is 50 so this return statement will return the value if we add any code after this return a statement like a multip by B this code will not be executed return statement denotes that the function has ended any code after this return statement will not be executed in JavaScript a function can return another function Also let’s see one example here if we create one function with the function name fn1 so this is the first function here I’m adding one parameter X in this function one we will create another function let’s create function fn2 and this will accept one parameter y now in this second function we will add return X multiply y so so the function two will return the multiplication of X and Y next after this function two we will add return FN 2 so when we will call this function one it will execute this function two also and then it will return this function two so function one is returning another function that is function two to call this function we will add fn1 parenthesis and we will pass one argument so let’s add three so here we are calling function one and passing one argument let’s store its value in one variable we will add let result is equal to function one and try to print this result console DOT log result so you can see the output in the console tab here it is displaying one function so you can see when I am calling this function one it is returning the function two and that function two is stored in this result now the function two is stored in this result so we can simply call this result like this result for the second function also we need one argument so we will add two and let’s print this one we will add console.log and print this result two you can see the output it is displaying six because in function one I passing three that will be X and function two I’m passing two that will be y and x * by y will be 3 * 2 is = to 6 let’s understand this example again again here we have the function one this function one has return a statement and this return a statement is actually returning the function fn2 which is declared here so the function is returning another function now we can store the return value in any variable so here we have called and stored the return of the function one in result with this console log we can see what is stored in this result so in this result function two is a stored so to call this function two we will add result and we will pass one argument so this was another example of return a statement in JavaScript function so this was all about function in this video we will learn callbacks in JavaScript a callback is a function passed as an argument to another function a callback function can run after another function has finished let’s understand the callbacks with one example I’m creating one function and the function name is display and this display function will display the message in the console tab so here we will add console.log and let’s add result and this result is parameter so here we have declared One display function that will only display the result in the console tab we are not performing any calculation in this function now we will create another function let’s add the function keyword and the function name is add this add function will have three parameter let’s add num one then num two and the third one will be one function let’s add my call back in this add function we will add let sum is equal to num one plus num two so this sum variable will store the value of num 1 + num 2 next we will add this call back and and in this call back we will add Su now we will call this add function so just add the function name which is ADD and parenthesis and this function has three parameters so we will pass three argument so first one will be one number that we want to add again we will add another number 1020 and in the next parameter we will pass one function so we have already created this display function so we will pass this display function in this add function when you pass a function as an argument remember do not use the parenthesis we will simply add the function name there is no parenthesis required so let’s understand this code here we have declared one function that will just display one message in the console then we have another function that have three parameters s it will add the two number and store the value in some variable now to print this sum in console we need to call this display function so when calling this add function we are passing the two numbers 10 and 20 that will be added and we are passing this display function as argument and this function will be here in my callback this display function also accept one argument so here I adding my callback and the value which is sum so this my callback will call this display function so let’s see the output in the console tab you can see it is printing 30 we are calling add function and in this add function we have not added console.log the console.log is added in the another function called display and we are passing this display function as argument in the add function function let’s change the value if I write 20 + 30 and now again check the output you can see it is displaying 50 that is 20 + 30 so when we are passing one function as an argument to another function that is known as callback function in JavaScript now let’s learn about Anonymous functions Anonymous function in JavaScript are functions that are not declared with a name here is the Syntax for anonymous function just write the function keyword and parenthesis and add your code within the curly Braes we can add parameters also in Anonymous function so this is the syntax to create Anonymous function we are not adding any function name we are just adding function keyword and parenthesis and curly Braes now let’s see one example of anonymous function here we will create one function with the function keyword this function will have two parameters X and Y now this function will return the value of x + y here I’m creating one function without any name so it will not be stored on our memory so to access this function we can store this function in any variable so let’s add let keyword to create one variable and the variable name is sum sum is equal to function here we have declared one function and assigned this function in a variable called sum this is known as function expression to call this function we can use the sum variable here we will add sum and this function accept two argument so we will add the two two value in this parenthesis 10 and 15 now to print this value in the console tab we will add console.log and write this sum and two parameters now you can see the output in the console tab it is printing 25 let’s change the value here we will add 10 and 30 now again you can see the output 40 so let’s understand this example again here I’m creating one function without any name and assigning this function in variable called sum to access this function or call this function we can use this sum variable and this function accept two argument so with this sum we are passing two argument 10 and 30 this 10 will be stored in X and 30 will be stored in y so it will return the X x + y value that will be 40 that will be printed in our console tab now let’s see another example of anonymous functions here we will create one function with the function keyword and write the parenthesis and within the curly braces we will add console.log and one message welcome to greatest de here we have declared one function without any name but how to execute the code written in this function as you know to call any function we write the function name and parenthesis so this will call or execute the function we will add the same thing with this Anonymous function also we will trap this Anonymous function in a parenthesis like this we have wrapped it in this bracket and now we will add this parenthesis that will execute this function now you can see in the console tab it is printing welcome to greatest stack the function is executed immediately when the script runs and it logs the message welcome to greatest T to the console now let’s see another example of anonymous function here we will add set timeout function and time set time out is built-in method in JavaScript that accept one function and time in milliseconds so here let’s add 2,000 milliseconds and here we will create one function so here we can add one Anonymous function let’s add function keyword then parenthesis and curly Braes and in this curly Braes we can add the code that will be be executed within this function so let’s add console.log hello creest stag here I’m adding an anonymous function that display the message hello greatest tack in console and here I’m adding 2,000 milliseconds so it will execute this function after 2,000 milliseconds that is 2 seconds let’s see the output in the console tab you can see it is blank but after 2 second it display the message hello greater stack now increase the time if I add 5,000 milliseconds that will be 5 seconds and run the code again you can see the console is blank and after 5 Seconds it will print hello greatest stag you can see it is printing hello great stack in the console we can write like this so it will be clear now you can see we have declared one function without any name so this is another example of anonymous functions now we will learn about recursive functions in JavaScript a recursive function in JavaScript is a function that calls itself let’s create one function and the function name is my function and within this function we can write the code and after that we will call the same function here we will add my function and parenthesis so in this one you can see we have declared one function with the name my function and within this function we are calling the same function my function parenthesis now to evoke this function we will add it here outside of this function here my function is recursive function because it is calling itself inside the function a de cursive function must have a condition to stop calling itself otherwise the function will be calling itself infinitely to prevent infinite recursion we can use if else statement or any condition statement so here if I add if if condition and within this condition we will call this recursive function and else stop calling recursion so this is just one example how we can create one recursive function and call the recursive function and how to prevent the recursive function for infinite recursion we can add the if Els condition or any other conditional statements of JavaScript now let’s see one example I want to print numbers in descending order so here we will create one function and let’s add the function name countdown so this countown function will accept one number so here we will add num to call this function we will add the function name countdown and we will pass any number let’s add 10 so this will call this countdown function and pass the number 10 in this num now to print this number we will add console.log num so this will will be printed in the console tab now I want to print 10 9 8 7 like this so we have to decrease the number so after printing the number in console we will decrease its value by one so simply we can add num minus minus so it will decrease the value by 1 if the number is 10 it will become 9 so after decreasing the number again we have to print it so to print the number again we can call this function again let’s add countdown num so this countdown num will again a start from here and it will again print this but this countdown will be running infinitely so to prevent the infinite recursion here we will add if num is greater or equal to Z so when the number is greater or equal to Z then only it will call the function again now you can see the output it is printing 10 987 65 4 3 2 1 0 it is printing the number from 10 to 0 Let’s understand this code again here we have declared one function and in this function it is printing the number and it will decrease the number by one and after that it will check if the number is greater or equal to zero then it will call this function again so this countdown function is calling itself this is known as recursive function so this is all about recursive function callback function and Anonymous functions in JavaScript object in JavaScript JavaScript object is a non-primitive data type that allows you to store multiple collections of data let’s see the syntax to declared an object we will use const keyword then object name so this is an object in this we can add the data in key value paired we will add key 1 value one we will add the comma to separate the data we will add another key key2 and value two we can use the let keyword also to declare one object but it is good practice to use the const keyword let’s see one example if I write the object name person and in this person object we will add the name of the person so first we will add first name and in the first name we will add Elon add one comma then we will add the last name the value is musk and we will add one more information age so here we have created one object with the object name person in this object we have three properties now let’s check the type of this person we will add console.log type of person now you can see in the console tab it is printing object so the type of the person is an object now if we want to print the complete object we will add console.log person in this console you can see it is printing the object that we have created it is printing age 35 first name and last name any object can store two things which is properties and methods in this person object data is stored in key value pairs first name is the key Elon is the value age is key 35 is value these key value pairs are called properties key is always stored as a string here if I write this name in double quote still it will be correct you can see there is no error in the output you can see it is displaying simply first name so by default it will store it as a string in the value we can add any data type we can add a string number arrays Boolean function and we can store an object also when we declare a function as has a value in key value pair then it is known as methods now let’s learn how to access the properties of an object we can access the values of a property by using its key name so the first way of accessing the property is using dot notation we can write object name dot key so it will give the value stored in the key value pair of the object let’s access the value stored in this person object here we have the console.log person and if you want to access the name stored in the first name so we will add person. first name and we will check the console you can see it is printing Elon so we can access the property using dot notation let’s add the age here if you want to access the age object name and key so it is displaying the value in the console you can see it is printing 35 the second way of accessing the properties of an object is using bracket notation so in this example here we will remove this Dot and add a square bracket and we will add this text in double quote as a string now you can see the console tab it is printing 35 so we we can access the property by using braet notation and in this braet we have to add the key name with double quote or single quote let’s add the first name so you can see the first name in the console Alon keys in object are stored as a string so we can add this key in double code like this and we can add a space Also here we are adding first space name like this now if you want to access the value stored in the first name we will add console.log and object name and if you use dot here DOT first name it will give an error we cannot access this property by using do notation in this case we have to use the bracket notation only and in this bracket notation will add the string in double code or single code then you can see it will display the name it is displaying the name alone in the console tab so the bracket notation is also useful to access the properties of an object now let’s see how to update the properties of an object so we have this object person and in this one if I want to update the first name so the first name is Elon and I want to change it so we can add the object name that is person and write the key that will be first name and we can assign a new value or a new data so here we will add Mr Elon Mr Elon so this line will update the first name in the object called person now you can see the output it is displaying Mr Elon because here we are printing person. first name here we have declared one object with the person and here the first name is Elon and in this line we are updating the first name with the new name which is Mr Elon and Mr Elon is printed using this console.log next we will learn how to add a new properties in the object so here we have the object with three properties and now I want to add one more property so for that we will add the object name so the object name is person then we will add the key so key is company so this line will add a new property in the person object now if you want to display the object just add console.log and object name now you can see the console tab it is displaying the object with four properties age company first name last name so we have added one new property company and it is displaying in this object next we will learn how to delete one property from the object so let’s use the same example and here we will add the delete keyword delete then write the object name and key so let’s delete the age that’s it we are adding delete keyword then object name and key now if you want to check let’s see the console tab here you can see it is displaying only three property which is company first name and last name age property is missing because we have deleted age property from this object this is how you can access the properties of an object you can update the property you can delete the property and you can add a new property as I have already discussed in value we can store any type of data so we can store one object also that is nested object so let’s take the same example in this one we will add one more property here we will add address and this address will contain another object that’s it we will add the data in key value pair in this example you can see we have an object called person and in this object we have three properties then we have added one more properties and this property is having one another object that is known as nested object and in this object also we have added the data in key value pairs you can see Street city state country and zip code now to access the data stored in the nested object we can use the same dot notation let’s add console.log write the first object name person and in this object we have the address we will add address and from the address we can access CT now you can see the console tab it is printing Austin now if you want to access ZIP code right person address ZIP code now you can see it is displaying zip code in this console so so this is how you can access the properties of the nested object now we will learn how to check if a property exist in an object to check if a property exist in an object you can use the in operator we can write property name in object name here we have the person object so let’s see one example to check if the property exist in this person we will add age in person it returns true if the property exist in the object so let’s print this in console tab we will add console.log we have to add this age in quotes now you can see in the console it is printing true because age exist in this person now if you want to check first name is exist or not so here we will add first name in person so it will display true because we have the first name in the person object now if you will add country country in person now you can see it is displaying false because in this person object we don’t have any property with the key name country now if you want to display all properties and values of an object without knowing the property name then you can use foreign Loop foreign Loop allows you to access each property and value of an object without knowing the specific name of the property for example we will add for and in this one we will add one variable so let’s declare one variable with the let keyw word and we’ll add the variable name prop that is properties and prop in object name person now we can print this prop so let’s add console.log prop in the console you can see it is printing first name last name and age because in this person object we have three keys first name last name and age so using the for in Loop you can access all properties of an object now if you want to access the values stored in this key we can use the bracket notation as we have already discussed to access the value we use the object name like person and bracket notation and in this one we will add the key so let’s add H so it will display the value so here we will add the same thing let’s add person Square bracket and prop so you can see the output in console tab it is displaying the values only the values are Elon Musk and 35 now if you want to display both key and value so let’s add prop plus and here we will add colum now you can see the output in the console tab it is displaying both key and values stored in this person first name Elon last name musk is 35 so using the for in Loop you can access all the properties of an object there are multiple ways to create an object in JavaScript this was the example to create an object with object literal let’s see another example where we will create an object with the new keyword for that we will add const [Music] person new object so this is the another way to create an object if you want to add some data in this object we can add the object name and key and assign one value so it will add this data in this person object let’s duplicate it and we will add another data last name age now if you want to display this person object just add console.log person you can see in the console tab it is displaying one object with the data Age first name last name so you can see we have created one object with the new keyword and then we have added these data in this person object we can add these data while creating an object Also let’s see I will remove these things remove it from here and in this object just add curly Braes and within this curly Braes write the data in key value pair and here it will be comma now it will create the same thing you can see the output it is same still it is displaying the object with three properties first name last name and AG so this was all about JavaScript object and their properties in this video we will learn about JavaScript object methods JavaScript method is an object property that contains a function definition let’s create one object with the const keyword here we will add the object name person and in this object we will add two properties first name and last name let me create one more property here and I will add the property name GD you can call it property name or key in this gr property we will declare one function to declare a function we use function keyword then name of the function so let me write the function name g and in this function we will print one message using the console log hello world so in this one you can see we have the third property with the function definition this is called as object methods so this is the method of the person object now to call this method we will add the object name that is person and then write the method name GRE and write the parenthesis also now you can see the console tab it will display the output hello world so in the person object we have created one property with the function definition that is known as method and we are calling this method using the object name do method method name parenthesis here we have declared one regular function we can add the anonymous function Also let’s remove this name and we can write like this here we have used function expression to define a function and assign it to the GD property of the person object and still it will display the same message in the console tab hello world we can declare a function outside of the object and assign it to an object as a method here is one example let me remove this function from here and here we have one object with two properties now we will declare one function function name is grd and console.log hello world next we will assign this function inside this person object so here we will add person dot any key name so we will add the key name greeting is equal to greet let me add T it will be correct so in this line I’m assigning this greet in this person greeting now to display the output we will add the person dot greeting parenthesis now you can see the output it is displaying hello world so let’s understand this example again here we have created one object and the object name is person where we have only two properties now we have declared one function and assigning this greet function in this person object the property name or key name is greeting we are calling this method using person. greeting parenthesis now if you want to display this person object simply we will add console.log person now in the console tab you can see it will display the object and in this object you can see we have the first name then this greeting property which is the method in this greeting we have the function definition so this is how you can assign one function inside an object as a method es6 provides us one more way to declare a method for an object let me remove it and in this object we can simply add gr and curly Braes and write the code so this is one more way to declare one function in inside the object as a method we can access this method using the person dot GRE now you can see it will display the message hello world in the console tab now we will learn about JavaScript this keyword to access the other properties of an object within a method of the same object we can use this ke key word let’s see the same example one object with the name person and we have two properties first name and last name now to access the first name we use to write object name do the key name or first name so this is how you can access the property of an object but when we need to access the first name within the method so in this one let’s create one method here we will add one method G one Anonymous function and message console.log hello now in this method if I want to display the first name so here we will add plus this DOT first name so when we need to access the property of an object outside of the object we use the object name and key so we are adding person do first name but here we are accessing the first name inside this method and this method is in this person object so this keyword refers to the same object which is person so we don’t need to write the object name we can simply write this keyword do first name so this will print hello and the first name now to call this method we will add the object name Person dot gr let’s see the output in the console tab it is printing hello Elon let me add a space here now you can see it is printing hello Elon in the console tab so we can use this keyword to access the properties of the same object within the method so when we use this keyword within a method it refers to the same object now let’s define a method that Returns the full name of the person object by containing its first name and last name so remove it and let’s remove this method also and here we will add another method get full name one function and in this function we will add return this function will return the first name and last name to access the property we will add this DOT first name then we will add space so let’s add double quote then Plus this do last name it will access the last name so in this method you can see it is returning this do first name so it will return this value Elon and here this do last name it will return this value musk now to call this method we will add person dot get full name this method is returning some value so we can print it using console.log let’s add console.log person. get full name now you can see the output in the console tab it is printing Elon Musk so it is returning the full name by containing first name and last name let’s understand this example again here we have an object with the name Person where we have two properties first name and last name and one method this method Returns the first name and last name of the person now we are calling this method so it will display the full name which is Elon Musk we can use this keyword outside of the method also but it will refer to the other object let’s remove all these things and here simply add console.log this so here you can see the output it is display Ling window object so if we use this keyword alone or inside a function then it will refer to the global object that is window object or when we use this keyword in the event then it will refer to the element that receive the event this keyword is not a variable so we cannot change the value of this so this is all about JavaScript method and this keyword in this tutorial you will learn about JavaScript Constructor function and and how to use the new keyword to create an object in JavaScript Constructor function is used to create objects let me create an object we will add the const keyword then object name person and in this object we will add properties so the first property is first name and the second property last name this example create a person object with two properties first name and last name but this syntax is used when you have to create single object in programming you often need to create many similar objects like person to do that you can use a Constructor function let me create one Constructor function for that we will add function keyword and then the name of the function person then parenthesis and in this curly braces we will add properties so let’s add this DOT first name and value Elon again this Dot last name and value Constructor function is similar as a regular function but it is good practice to capitalize the first letter of the Constructor function so you can see here I have added capital P in this person a Constructor function should be called only with the new operator we can use the new operator to create an object from a Constructor function till now we have not created any object we have just created one Constructor function to create a new object we use the new operator so let’s see how to create an object using this Constructor function let’s add the con keyword then we can write any name of the object so let’s add the person one this is the object name here let’s add new operator and write the function name person so this line will create one new object that is person one using the Constructor function we can create multiple objects so let’s add one more line here we will add person two so here we are creating another object with the name Person two with this person Constructor function now if you want to see what is stored in the person one console.log person one and see the output in the console tab so you can see the person one is one object with the two properties first name and last name now let’s see the second object also so we will add console.log person two so we are printing both person one and person two in the console so let’s see the output here you can see both output is same when a new object is created using the Constructor function this keyword will refer to the newly created object so in this example here we are creating one new object person one with the new operator and this Constructor function so this keyword will refer to the newly created object which is person one and this first name and last name will be added in this person one as a property so in this example person one and person two object have same property value but we can create multiple object of the same type with different property value also using Constructor function parameters so as you know the parameters in the function here we will add parameters in this Constructor function also so in this function let’s add first last in this Constructor function we are adding two parameters first and last and this first will be stored in this first name this last will be stored in this last name now when calling this Constructor function we have to pass two arguments here we are creating object by calling this Constructor function so to call this Constructor function we have to pass two arguments so let’s pass two value Alon musk for creating this person to object we will pass another argument let’s add another name billgates so in this example here we have one Constructor function with two parameters so to call this Constructor function we have to pass two arguments so this Elon will be here in this first and this first will be stored as a value in this first name property this mask will go here in the last and this last will be stored as the value in this last name property so when we are creating person one it will create one object with the property first name and last name and the value is Elon Musk and when we’ll create the person two object it will also create the object but the value will be different that will be buil gets now let’s see the person one and person two object in the console tab so you can see the output here in this console so in the first object you can see first name Elon last name musk and in the second object we have first name will last name gets so using the Constructor function we can create multiple object of the same type now let’s see how to add properties and methods in an objects so first let’s add one property in person one object so removing this console and here I will add person one to add a new property in this person one just add Dot and the property name age and write the value let’s add 52 now we can print this in the console let’s add console.log person one you can see in the console tab here we have three properties in this person one object which is first name last name and age and the age value is 52 that we have added here person 1. AG is equal to 52 now if I simply want to print the age here we will add console.log person one do age so you can see the console tab it is only printing the value stored in this age property that is 52 now if I try to access the age from the person two let’s see what will happen here I’m adding person to. age and see the output in the console tab it is displaying undefined because we have added this age property only in the person one object we have not added in the person two object that’s why person 2.as will display undefined now let’s see how to add one method in the person two so let’s scroll and here we will add person two dot method name we will add gr and declare one function as we have already studied method is a function decaration inside the object property so here in this person two object we are adding one method with the name gr and declaring one function and let’s say this function will log one message hello great stack we have to write it in codes so we have added one method in the person two object now let’s access this method here we will add person 2 dot GD from person 2 we are calling this GRE method now let’s see the output in the console tab it is printing hello great stack in the console tab so this is the example to add a method in the object now let me remove this and you can see in this Constructor function I have added added only two properties now let’s see how to add one method in the Constructor function so here let’s add one comma and here we will add this dot name of the method get full name and here we will declare one function so this method will return some value so return this DOT first name then we will return the last name Also let’s add one space plus and this do last name so here I’m adding get full name and this method will return first name plus last name that will return the full name name so we have just created The Constructor function now we have to create object also so let me add the same example again I will add person one and person two so we have created person one and person two object using the new operator and Constructor function now let’s see how to access the get full name method so to access the full name just we will add person 1 dot get full name the method name now this method is returning some value so we can print it using log console.log person 1.g full name now you can see the output in the console tab it is printing Elon Musk now let’s access the person two full name and you can see the output billgates the problem with this Constructor function is is that when we create new object using this Constructor function the same method will be created in all the objects created using this Constructor function which is not memory efficient to resolve this we can use the Prototype of the object so that all objects created from this person Constructor function will share this same method so this is all about JavaScript Constructor function in this tutorial you will learn about JavaScript object prototype in JavaScript every function and object has its own property called prototype let’s create one object const person and this person will have name Elon so this is one simple object with only one property that is name but this person object has one more property called prototype let’s see this person object in the console we will add console.log person and you can see in the console tab here it is displaying one object name Elon right but if I expand it you can see the property name Elon but here we have one more property called prototype and the Prototype is also an object a prototype itself is also another object so the Prototype has its own prototype let’s expand this prototype again and expand any of this you can see here again we have the Prototype let’s expand another one here also we have prototype so the Prototype has its own prototype this create a prototype chain now let’s learn prototype inheritance we can use the prototype to add properties and methods to a Constructor function and objects inherit the properties and methods from a prototype let’s see the previous example of Constructor function so this is one Constructor function with two parameters and the two properties first name and last name now previously we were adding like person one that is one object and in this object we can add new property like this person. AG so it will add a new property in the person one object but here we want to add one property in the Constructor function like we have the person Constructor function so we cannot add one property like this in the Constructor function and we cannot add a method in the Constructor function like this after Declaration of the Constructor function we cannot add the extra Properties or method like this to add the another property or method in the Constructor function after declaring we can use the Prototype here we have only two property in this Constructor function so let’s add one more property so to add one property in this Constructor function we will add the function name person then prototype like this and in this prototype we will add one new property name so let’s add the property name gender and the value is male so using this we can add one new property in the person Constructor function now let me create object also so I will use the const keyword and object name so the object name is person one and create an object using new operator and the function name and pass two values and we will create one more object so duplicate this it will be person two and different value so we have two object person one and person two now let’s see whether the newly added property is available in the person one and person two or not so let’s add console.log person one object and and see the output in the console tab here it is displaying first name Elon last name musk here we have only two properties but we have added the another one gender which is not available here but if I expand it and come to the Prototype here we have the Prototype and open this prototype here you can see our newly added property gender male in this prototype so you can see how you can add a new property in the protot prototype and this prototype property will be inherited by all the object now let’s see the output for the person one. GN Zender and see the output it is displaying male because the object is inheriting the properties of the Prototype now let’s see the output when we access the person two for the second person object let’s access the Ender and you can see it is displaying name male again here we have added gender property in the person Constructor function using prototype and this person one and person two objects inherit the gender property from The Constructor function prototype gender property is not available in the person one and person two object you can see in the console but still we can access it because it is added in the Prototype which is here now let’s see how to add one method in the Constructor function so here we have added one gender property so instead of this we will add one method let’s add method with the name get full name and this method will be a function definition so in this function we will return the full name so write return this DOT first name and space this dot last name so in this person Constructor function we are adding one method using the Prototype and this method name is get full name this method will return the first name and last name of the person so let’s see the output of the person one in the console tab you can see it is displaying first name and last name in this console but if I expand it here you can see we have the Prototype and if I expand this prototype you can see in the person one prototype it is displaying get full name method you can see the get full name method is here so this get full name method is not added in this person one or person two this person one and person two object is inheriting this method from the Prototype of the Constructor function so we can access it like this get full name person 1.g full name let’s see the output it is printing Elon Musk now we can access this get full name from the person two also and see the output it is displaying billgates let’s understand this example again here we have created one Constructor function with only two properties after Declaration of the Constructor function we cannot directly add new property or method in this function but to add the new property or method we will use the Prototype so we are adding person. prototype and the method name method is a function declaration so we are adding function and this function will return the first name and last name now here we are creating two objects with the Constructor function person one and person two now this person one and person two does not have the get full name but still we can access the get full name method from person one and person two because it is inheriting the Prototype of the Constructor function so we can access person 2.get full name and we can also access person 1.g full name now let’s see what will happen if I change the Prototype value so let’s create one Constructor function here we will add one property Elon mask and in this one we will add one new property using prototype so we will add person do prototype and the new property name age is equal to 25 so we have added one new property in the Prototype that is age is equal to 25 now we will create one object so to create an object we will use the const keyword and the object name it is person one and new then Constructor function so this will create one new object that is person one so here we have created one new object called person one after creating this object let’s change the value of this property so in the next line we will add person do prototype is equal to age 52 like this earlier we have added age 25 and here we are changing the Prototype property age 52 so after changing again we are creating one new object const person two new and Constructor function so before changing the property we have created one person one object and after changing the Prototype we have created person two object now let’s see the output in the console tab so we will add log person one and person two and you can see it in the console tab it is displaying name Elon Musk in both object but if I try to access age and age in the second object so you can see the output for the person one it is displaying is 25 and for person two it is displaying is 52 because if a prototype value is changed then all the new objects will have the change property value and all the previously created objects will have the previous value so in this example you can see here we have the property value 25 and created one object person one in this person one object A’s value will be 25 and before creating person two we have changed the property so this person two will have the updated property value that will be 52 that’s why it is printing 25 for the person one age and 52 for the person 2 Age so this this was all about JavaScript prototype in this tutorial you will learn about object destructuring object D structuring in JavaScript is a feature that allows you to extract the properties of an object into variables this can be useful for assigning the properties of an object to variables in single statement let’s understand it with one example we will add one object with the name person here we have created one person object with two properties first name and last name to aore these properties value in a variable we used to write person DOT first name this is for accessing the first name of this person and to it in variable we used to write let and one variable name like f name is equal to person. first name like this if I want to store the last name we will add another variable name L name Person dot last name so this is the previous syntax to store the object properties value in a variable but es6 introduces the object D structuring syntax that provides an alternative way to assign properties to an object variables here is the Syntax for object D structuring we will add L and in this curly Braes we will add property name and value another property name and value and here we will add the object name that’s it so let’s assign the properties of this person object in variables using the object D structuring here we will add person and here we will add the property name so the property name is first name and this first name will be stored in the variable called f name now add one comma and write the another property name and for this property name again we need one variable so the variable name is last name so this is the simple syntax of DS structuring we can write the property name and value to store the object properties value in variables now if I check the value stored in this F name variable or L name variable we will just add log F name you can see it is displaying alone if I I add L name here will be capital n and you can see the output musk we can further simplify this syntax suppose you want to add the variable name same as the object’s property name like object property name is first name and last name and our variable name is also first name and last name then here we don’t have to write the variable name just write first name and last name and then object now to print this we will add console.log first name it is printed here in this console now let’s add last name you can see the last name in this console so this is the simple syntax of object destructuring here in this object we have only two properties but what will happen if I add one more property in this object destructuring syntax let’s add one age that is not available in this person object then what will happen let’s see the output if I add console.log age it is printing undefined because this age property is not available in this person so when you assign a property that does not exist in an object to a variable using the object D structuring the variable is set to undefined now in this object D structuring we can add the default values also suppose here we don’t have the age value so we can add like this age is equal to 18 so this is the default value of the age variable if the property is available in this object it will display the actual value and if it is not available it will display this default value 18 so you can see the output it is displaying 18 because the default value for the age is 18 now suppose this age is available here in this object we are adding age 52 now what will be the output you can see the output it is displaying 52 because it will ignore the default value here we already have age declared in the person object so this age variable will store the actual value of the property which is 52 so this is all about object D structuring now let’s learn about object literal syntax extensions in es6 to create one object we used to write like this const person and first name and last name so this is the object literal syntax to create an object with the key value pairs but here if I typ one variable let first name equal to Elon and last name m here we have two variables first name last name so we can simply add first name comma last name we don’t have to write the key values in this object we will simply add the variable name and this person will store this information as key value pair now if you try to print this person let’s add console.log person you can see it is displaying first name Elon last name musk so we are just adding the variable name in this person object and this person will store the variable name and value also as a key value pair so this is all about objects in JavaScript in this video we will learn about JavaScript class classes are one of the feature introduced in es6 version of JavaScript JavaScript class is a template for creating objects to create a class we use class keyword then we write the name of the class within the class we create one Constructor method you should always add a method with the name Constructor within the class the first letter of the class name should be in capital letter JavaScript class is similar to the JavaScript Constructor function to create a Constructor function in JavaScript we use to write function and name of the function I’m adding person in this function we will add here we will add the code to initialize the property value of an object after creating the Constructor function we create object we can write any object name person one new keyword and Constructor function and pass two values here so this is for creating one new object to display the object created using this Constructor function we used to write console.log person one you can see the output in this console tab it is displaying one object with the property name and age now we can create the object using class also so now let’s create the class to create a class we use to write class keyword then class name I’m adding the class name person and in this class name we have to add one Constructor method and this Constructor method is used to initialize the value of the object so let me add this here here we will add two parameters so this is one class with the name person and this line will create one object with this class now let’s duplicate it we’ll create another object with the name Person two and we will pass another value so we have two objects person one and person two now if you want to display the object in console tab you can write console.log and you can see the output it is displaying here one object with two properties name and age and the name is Elon Musk and age is 52 now let’s print second object which is person two you can see the output in the console tab it is displaying another object object with the name billgates and age 67 this Constructor method initialize the property of the object JavaScript automatically calls the Constructor method when you create an object using the class now let’s learn about JavaScript class methods we can add any number of methods in JavaScript class so let me remove this second person and in this class after this Constructor we can add any method so let’s add one method with the name greet and this greet method will return text hello this do name it will return hello and name of the person now I want to display this person one object so here I will add console.log person one and in the console tab you can see one object with two properties name Elon mask is 52 now let’s expand it and here you can see prototype and in this prototype you can see this GRE method in this prototype of the object so we can call this GRE method from this person one object so in this console.log I will add G and you can see the output it is displaying hello Elon Musk because we are calling the Greet method from the object and this greet method is returning the text hello and the name so that’s why it is displaying hello Elon Musk we can add any number of methods so let’s add another method here here I will add a new method change name this change name method will update the name of the person in the object so here we will add new name and then this do name is equal to new name so in this method we are adding one parameter so when we will call this method we have to pass one argument let me remove this console.log and here I will call the change name method on person one object so just add person one dot change name and we have to pass one argument so let’s add a new name I will add my name here AAS now we can print the object let’s add console.log person one you can see one object name aenas age 52 now if you want to print the name only here we will add person 1. name it is printing the name in the console tab so in the JavaScript class you can add any number of method now let’s learn about gets and Setters in JavaScript Getters and Setters are a special methods in JavaScript that allow you to control how properties are accessed and modified they are defined using G and set keyword now let’s understand the getter method a getter is a method that is called when a property is accessed it can be used to do things like validate the value of property or convert it into different format so let’s see this example here we have one class with only one method great and this method is returning hello and the name here we have created one object using this class this code will call the Greet method from the person one object and display the return value in the console so while calling this great method we used to write this parenthesis but when we clear it as a geted method so here we will add get space and the method name that’s it just add the get keyword and after that here you don’t need to write the parenthesis simply add gr person one. greet and save the changes you can see the output it is still displaying the message hello Elon Musk so we have just added this get keyword in front of this method name and we can call it directly without adding parenthesis now let’s understand the seter method with one example here we will change the method I will add change name new name this do name is equal to new name to call this method we need to write person one dot change name and pass one argument like this but here we will add set keyword in front of this method just add set then we don’t need to write this parenthesis and pass the argument simply we will add person one do Setter method name and assign one value using assignment operator like this and see the output here I’m displaying the person one object it is displaying one object and name is AAS age 52 like this so we add this set keyword to Define one Setter method we can call this method on object and assign one value with assignment operator a Setter is a method that is called when a property is modified it can be used to do things like update the value of the property or perform some other action we can use the same method as getter and Setter let’s see one example let me change the method name it will be person name name and here I’m adding set now we will add get this will be getter method and I’m adding the method name same as the setter method here also person name and this will return return this dot name so you can see here we have declared one class in this class we have one Setter method and one getter method and both method name is same person name and person name now to call this getter method we’ll simply add console.log person one do person name so it will return the name of the person you can see the output it is displaying the name now we can update the name using this Setter method so let’s add person one dot person name and just assign one value after that again we will call this get method that will displ play the name so you can see the output first it is displaying the name Elon and after that it is displaying the name ainash so we have the same method name as getter and Setter to call the getter method we are simply adding the object name and Method name and to call this Setter method we are adding object name and Method name and assigning one value that’s it when we assign any value it will call the setter method and update the properties value let’s learn about JavaScript class expression a class expression provides you an alternative way to define a new class it is similar to a function expression but it uses the class keyword instead of the function keyword class expression can be named or unnamed if they are named the name can be used to refer the class later if they are unnamed they can only be referred by the variable that they are assigned to so let’s define one class expression we will add the class keyword in this class we will declare one Constructor method this Constructor method will initialize the object property property name is name here we will add name and in this class we will add one method method name is get name it will return the name now we will assign this class in a variable let’s add let keyword person is equal to class A Class expression does not require an identifier after the class keyword you can use a class expression in a variable declaration now we can create an object so let’s add cost person one new person we can refer this class with this variable and here we will add one [Applause] argument now we can display our object in the console tab so let’s add console.log person one you can see the output in this console here we have one object with the name Elon Musk so this was the class expression in JavaScript in this video we will learn about JavaScript class inheritance JavaScript class inheritance allows you to create a new class on the basis of already existing class using class inheritance a class can inherit all the methods and properties of another class inheritance is a useful feature that allows the code reusability to create a class inheritance we use the extend keyword so let’s create one class write the class name Person add one Constructor method and add one method GRE console.log hello and name here I have created one class now I will create another class that will inherit all the methods of the person class so here we will create another class and the class name is a student then write the extends it will extend person so we are creating another class with the name a student this a student class will inherit all the method and properties from this person class in this new class we have not added anything but let’s create one object here we will add con student one this is the object name is equal to new student and we have to pass one value Peter so we have created one object with the name a student one and we are passing one value in this student but this student don’t have the Constructor and here we have added extends keyword so it will inherit all the method of this person class and it will pass this page Peter here in this Constructor and the name will become Peter and we can also call this greet method so let’s try to call this greet method we’ll add a student one do greet you can see the output it is displaying hello Peter so this property name is available in this person class this method is also available in this person class but we are creating the object object with the a student class and calling this method from the object of a student class so we can call the method and properties of the parent class it means a student class is inheriting all the method and properties of the person class now let’s learn about JavaScript super method the super method used inside a child class donates its pent class in this student class let me create one Constructor add one parameter and in this Constructor we will call Super here this super method inside the student class refers to the person class when we create one object using the student class it will call this Constructor method automatically then it will call this super and then the super will call this Constructor from the parent class which is person class and pass this name here in this Constructor then the argument will be stored in the person’s name still it will display the same output you can see in the console hello Peter let’s understand this example again here we have created one person class and we have another class with the name student and this student class class inherits the property of the person class so this is the parent class this is child class in this child class I’m adding super so this super refers to the parent class which is person class and it will pass this argument in the pent class so this was the Super method in JavaScript now let’s understand what is Method or property overwriting or ping method suppose the parent class and child class has the same method or property name in this case when we call the method or property of an object of the child class it will override the method or property of the parent class this is known as method overriding or cying method let’s understand the method overriding with one example here we have the parent class and this is the child class in this one let’s create the same method greet and in this greet method we will add console.log hello student plus this dot name and in this one we will add hello person this do name so you can see in this parent class and child class we have the same method name which is GRE in the parent GRE it prints hello person and name and in child class this greet method prints hello student and name now if we call the Greet method from the object created using child class then it will call the method of the child class you you can see the output in the console tab it is displaying hello student Peter it means it is calling this greet method from the child class so the method of the child class override the method of the parent class this is known as method overriding now let’s learn about JavaScript static methods static methods are bound to a class not to the instance of the class you cannot call the static method on an object it can be called only on the class so let’s declare one class class name is person and in this one let’s declare one method this method will display only text hello on the console now in front of this method if I add static it will become the static method now we cannot call this greet method on the object created using the person class we can call this greet method only on the person class let me make it capital P here the name of the class should just start with capital letter now let’s create one object here we will add const person one is equal to new person Peter and if I try to access the GRE method from the object object name is person one dot GRE it will display one error you can see the console tab it is giving an error now if I add person. greet I’m adding the class name and greet you can see the output here it is displaying hello now if you want to use these object properties inside this static method then you can pass the object as a parameter so let’s take another example here we have the person class then we have the St method in this a static method we will add one parameter X and in this console.log I will add hello space X do name so it will display the name from the object now we can call this greet method from the person class and we have to pass the object let’s pass this person one object here and now you can see the output it is displaying hello Peter because here I’m adding hello then object then property name so from this person object it will get the property name name is equal to name so the name will be Peter and here I’m adding text hello so hello Peter is printed in this console so this is the static method in the JavaScript now we will learn about JavaScript private methods private methods are accessible only within the class it means we cannot call the private methods outside of the Class by default methods of a class are public to make a method private we need to start the method name with the hash tag so let’s take one example I will add class person Constructor first name and last name we have two parameters this DOT first name will be first name then this do last name it will be last name now let’s create one method in this class method name is full name and it will return this DOT first name then a space this do last name so it will return the full name now let’s create one object using this person class I will add const person one is equal to new person and here we have to pass two argument Peter and let’s add anything B so we have created one object with the name person one now let’s see if I add person one dot full name we can call this method right and it is returning one value so we can add console.log person. full name you can see the console tab it is displaying Peter V it is returning the full name now if I add hashtag here so this method will become private method now we cannot access this private method outside of this class you can see the output it is giving an error now let’s see how to access this private method inside the class so in this class only we will create another method let’s create one method called display here we have display method and within this display method I will add console.log and here we can call this method but to call this method we have to add this this dot full name this will refer to the object and this is the private method with the hashtag now we can call this display method outside of the class so simply add person one 1. display and it will display the output here in this console tab it is displaying Peter B so let’s understand this example again here we have declared one class with the name person in this one we have this Constructor that will initialize the object properties then we have this private method and this method name I have added has tag that’s why it becomes private method now we cannot call this private method outside of the class we can call this method inside of this class so within this class we are calling this method here and to call this method within the class we need to add this keyword this dot method name with the hashtag so like this we can call the private method within the class now let’s learn about private static method this is the private method now we can can add the static keyword like this so it will become private static method and we cannot call the static method on the object we can call the static method only on the class so here we have to pass one object while calling this method so here we are calling this method so in this one we will pass the object so we will refer the object with this keyword we will pass the object and here we will add one parameter and from this parameter it will get the first name and last name it means it will get the first name and last name from the object that we are passing through this keyword while calling this private static method now you know we cannot call this a static method on the object we can call it on the class so instead of this keyword we will add class name person person dot has full name now you can see the output it is displaying Peter B let’s understand this example again here we have declared one class in this class we have one static private method now to call this a static private method we will use the class name dot method name with the hashtag and to get the object’s properties we are passing the object as argument here we are calling display method from the object this display method will call this class and this static method that is a static and private method so we can access the estatic private method using the class name person now we have completed class in JavaScript now we will learn about document object model the document object model is an API for manipulating HTML documents the Dom provide functions that allow you to add remove and modify part of the document effectively the Dom represents an HTML document as a tree of nodes in this HTML code you can see this is the node this HTML tag is a node this head tag is also one node this title tag is a node this text Greatest Tag is also one node this body tag is a node this comment is a node and this P tag is also a node now let’s understand about the node type so this one is the document type node these HTML head title body these are the element type node and these text are the text node and this is the comment node now let’s learn about node relationship any node has relationship to another nodes in the Dom tree and it is same as described in the traditional family tree for example this body is the child node of this HTML node and this HTML node is the parent node of this body node this body node is the sibling of this head node because they share the same immediate pent which is HTML element now let’s add some other content within this body here we will add one div and add this P tag within this div let’s duplicate this so we have four P tag in this div so this div element is the pent node of these P tag and the P tag is the child node of this div this one is the first child and this one is the last child the second p is the next sibling of the first one this third p is the next sibling of the second one and the fourth one is the next sibling of the third one in same way you can say the first one is the previous sibling of this second P the second p is the previous sibling of third p and the third p is the previous sibling of fourth p now let’s learn about selecting elements using Dom to get elements in JavaScript there are various method in Dom so the first one is get element by ID method get element by ID method returns an element object that represents an HTML element the get element by ID is only available on the document object let’s understand this with one example here I will remove this comment and I will add only one text in P tag and for this P let’s add one ID so I am adding the ID message and in this P we have the text JavaScript Dom now let’s add the JavaScript in this HTML page using the script tag within this script tag we can add our JavaScript code here we will add one variable with the name MSG which is message and we can write document dot get elementy ID and here we have to add the ID of this element which is message so this document. get element by ID will select this element and it will be stored in this message variable now we can print it let’s add console.log MSG here you can see the output in console tab P ID message JavaScript Dom so this element is printed in this console because I’m adding console.log MSG so in this MSG variable we have stored this element which is in the P tag if the document has no element with the specified ID then it will return null Suppose there is no element with this ID on the web page then it will return null you can see null and if there is multiple element with the same ID it will return only first element let’s duplicate it and in this one we will only write JavaScript now you can see the output in console it is still printing ID message JavaScript Dom so it will select the first element with this message ID because the ID of element is unique with the HML document the document. getet element by ID is a quick way to access an element now we will learn about get Elements by name method every element on HTML document may have a name attribute multiple HTML elements can share the same value of the name attribute let’s take one example here we will create one input field and in this input field I will add the type radio and we will add one name attribute name will be language and value will be JavaScript we can add another input field with the same name attribute and value will be something else python in this HTML code you can see we have two elements with the name attribute and we can select this element using this name so in this sub script we will add let BTN is equal to document do get Elements by name and in this one we will add language because the the name value is language now we can print this let’s add console.log BTN and you can see the output in the console tab here we have the node list that contains two input field you can see input and input so get Elements by name returns one list of nodes now we will learn about get Elements by tag name the get Elements by tag name method accepts a tag name and return a live HTML collection of elements so let’s understand it with one example in this HTML we will add one title in H1 so the text is first heading let’s duplicate it this is second this is third this is fourth we have four text here in the heading tag now we can select the element using the tag name which is H1 so here in this sub script we will add one variable with the name heading is equal to document dot get Elements by tag name and here we will add the tag name which is H1 now we will print it using console log heading so you can see the output on the console tab it is returning the collection of four HTML elements you can see H1 H1 H1 four times so this get Elements by tag name return the collection of HTML elements now we will learn about get Elements by class name the get Elements by class name method returns an aray like of object of the child elements with a specified class name the get Elements by class name method is available on the document element or any other element also so let’s understand it with one example here we will add one class name in the first title so the class name is message in the second one we will add the class name message and in the third one also we will add the same class name message let’s delete the fourth one now we can select these elements with the class name in this script let’s add let MSG is equal to document dot get elements by class name and here we will add that class name which is message now we will check the output in console MSG and you can see the output here it is returning the collection of three HTML element with the class name message you can see H1 do message H1 do message H1 do message so it is returning all the HTML elements with the same class name now let’s come back to the code and here we have added document. get Elements by class name we can add this get Elements by class name on any element also so let’s see the example here I will add one div and insert these two title in this div and for this div we will add one ID let’s add the ID container so total we have three headings with class name message but these two headings are included in this div with the ID container now we will add the get Elements by class name over this container so we have to store this container in one variable so let’s add let cont is equal to document do get element by ID and the ID is container now we can write cont here in sh of document we will add cont which is container and get Elements by class name now it will only give the elements within this container you can see the output here we have only two elements HTML collection 2 we have two HTML elements in this collection H1 do message H1 do message so this get Elements by class name will return the collection of HTML elements with the same class name on the document or within the element now let’s learn about query selector and query selector all method the query selector method allow you to select the first element that matches one or more CSS selector the query selector is a method of element interface we can apply this on element also here we will add one variable let MSG is equal to document dot query selector and in this query selector we have to add the CSS selector so in CSS to select this title we used to write Dot message because it’s a class name so we used to write do message to select this element in the CSS file so we have to add the same thing here we have to add the CSS selector in this quy selector that’s it so here we will print console.log MSG so first let’s see the HTML code here we have one title with this message another title with this message and third title with this message so total we we have three title with this message class name now let’s see the output in console tab here it is displaying only first element H1 class name message first heading so let’s come back here you can see we have added query selected only so it will return only first element now we will add query selected all after adding query selected all you can see it will display all the elements we have node list of three element which is H1 message H1 message and H1 message so it is returning all three headings and if I remove this all and write query selector only it will only return the first element here we have added quy selector all on document we can use the quy selector all on any element also so let’s add cont for container is equal to document do get element by ID here we will add this ID container now we will add this query selector over this container so just add container do query selector so it will give only two elements which is here second heading and third heading now you can see the output in console tab here it is displaying node list 2 it is displaying Two element so it is selecting only two elements which is in the container with the class name message now let’s come back to the previous example document do query selector all now let’s see what we can add in this query selector so we can add the class name using Dot so we can add the ID also we will add the ID and we can write this container we will add hashtag and this container because we used to write like this for CSS selector hashtag container because here we have the ID container so we can add the hashtag to select the element with the ID now we can add like this directly div so it will select this div element if we just write H1 so so it will select all the heading element with H1 tag we can write like this also div and H1 so it will select the heading within this div you can see the output here we have 2 H1 only now come back and we can select the multiple element like this div also and H1 also so it will select all the div element and all the H1 element by adding one comma you can see here we have four element node list four one is div with the container ID and three H1 tag with the class name message so basically we can add all the CSS selected in this query selector and query selector all method now we will learn about traversing elements to understand how to get the pent element how to get child elements and how to get the siblings of an element to get the parent node of the ESP specified node in the Dom tree we can use the parent node property in this body let’s create some HTML elements We’ll add one div with the ID title and within this div We’ll add one text NP tag welcome to greatest tag and for this P let’s add one class name text so we have one parent element and one child element now we will try to get the parent element using this child element so here in this script we will add let txt is equal to document dot query selector and we will add dot T text so it will select this P element now we have to get the parent so we will add console.log then txt which is the child element dot parent node this one just add this parent node and it will display the parent element of this child element so now let’s see the output in the console tab here you can see it is displaying div class title which is the pent element now let’s learn how to get the child elements we will learn about how to get the first child Element last child element and all children of the a specified element so here we will add another example just remove it and within this let’s create multiple P tag we have four text here Greatest Tag one two three and four so we have four title welcome to greatest tag 1 2 3 4 so now we’ll get the child element using this parent element now Within in this script first we will select this parent element so let parent is equal to document do query selector and write the query selector title so it will select the div now we have to get the first child last child and all the children of this div so here we add console.log and this parent then we will add first child now you can see the output in console tab here it is displaying # text because here we have some space so so this space is also one empty text node if we remove this and write it in the same line now you can see the output in console tab it is displaying the first title which is welcome to greatest tag one and if I add a space here it will display one text node now I want my text like this and I want to display the first element so here we will just just add first element child like this parent. first element child now you can see the output it will display the first element welcome to greatest tag one the first title in P tag similarly we can add last element child like this and see the output it is displaying well welcome to greatest tack 4 right so it is giving the last element which is welcome to greatest tack four now if you want to get all the child elements just add child nodes that’s it after adding this come back to the web page and here you can see we have node list text again P again one text again P so we have the empty text node then P tag let’s come back and here if I remove this a space and write everything in the same line like this now you can see it will only display four element which is 4 P element so we got the child nodes of this div now we will learn about how to select the next sibling and previous siblings of an element so in this example in this second P tag we will add one class name let’s add class name second like this so it’s easy to select this element and according to this element we will find the previous siblings and next siblings so here we will add second here also second so it will select this welcome to Greatest Tag 2 now to get the previous sibling here we will add this element then Dot and write previous element sibling that’s it you can see the output it is displaying welcome to greatest tack 1 so we are finding the previous sibling of Welcome to greatest tack 2 now just come back and here we will add next so it should give this welcome to greatest tag three because we are selecting this second one and we are adding next siblings so it will display third now let’s see the output H is dis playing Welcome to greatest Attack 3 so this is how you can select the previous siblings and next siblings now let’s learn how to manipulate the HTML elements so the first one we will learn is create element to create an HTML element we use the create element method the document. create element accept an HTML tag name and return a new node with the element type so let’s understand it with one example here we can add document dot create element and in this one we have to add one HTML tag so let’s add the div tag so it will create one div element we can store it in any variable so we’ll add let div is equal to document. create element div so it will create one div element now we can print it let’s add console.log div you can see the output on the web page it is displaying this div this div is empty right now so let’s come back here in the next line we will add div div dot inner HTML we will learn inner HTML also so here we can write any HTML code we will add one P tag and in this P we will add welcome to greatest tag and close this P now we’ll see the output here you can see one div and here we have one text in this we have one div tag and within this div we have P tag and the text is welcome to greatest tag so you can see using this document. create element we can create One D element or any HTML element and we can add any HTML code within this element and we can print it and we can also add this element on our web page so to add this element on our web page here let’s add document dot body we will add this element on the body so here we will add body dot app and child we will learn the app and child later so to insert this newly created div in this body we are adding appen child div so after adding this come back to the web page you can see we have text here welcome to greatest tack right so this is added us using this appen child div that we have newly created within this body you can see we have not added any text in div or P tag we are creating this element using this document. create element if I change it welcome to greatest tag two you can see it will be deflected here welcome to Greatest Tag 2 now we can add the ID or class name anything in this newly created element so here let’s add div. ID is equal to title let’s see here we have this div with the ID title now we can add the class name also just write div. class name title and you can see the output here D class title so we can create a new element using document. Create element and we can add the content here we can add the ID we can add the class name or any other attribute next we will learn append child method we use app and child method to add a node to the end of the list of child nodes of a a specific parent node the append child can be used to move an existing child node to a new position within the document so let’s create some HTML elements here here we will add one UL tag with the ID menu so we can easily select it here we will add some content in lii home second one is about third one is blog right you can see these elements on the web page home about blog let’s come back let me add one more here we will add project now within this script we will add let menu is equal to document do get element y ID and the ID is menu so it will select the UL element now we have to create one element and we will add that element in this UL so here let’s add let list is equal to document dot create element and the element tag name is is lii so it will create one lii element and its name is list so in this list we will add inner stml and through this inner HTML we will add one text contact like this now we can use menu do appen child list so this is the element which is here ul and this epen child will add this list at the end of this list in this list we have home about blog project so it will add the newly created list item after this project so here we have created one list item and the text is contact so this contact will be added after this project you can see on the web page here we have home about blog project and after this project we have contact that we have created using this create element and added using appen child in this UL so this newly created list will be added at the end of this list next we will learn about text content to get the text content of a node and its descendants you can use use the text content property so let’s see one example here we have the same HTML elements and this a script we have added this line that will select this UL element and after that remove this and here we will just add console. log menu so it will display the complete menu in the console tab now we just want these text so here we will add menu dot text content that’s it menu do text content and see the output in the console tab here it is displaying home about blog and project so it will ignore the HTML tag and display only text now let’s see one more thing here if I write inner text we are adding inner text and see the output still it is displaying home about blog and project but there is one difference this inner text is following the CSS also in this last one if I add a style display none so it will be hidden from the web page you can see that is not visible so this inner text will return only visible text you can see here we have home about blog and these home about blog is here on the web page but we have one more element here project which is invisible but if I write text content it will display all the HTML text content you can see on the web page we have home about blog only but here it is displaying home about blog and project so this text content is displaying all the text inside that element and inner text is displaying visual text only now we can use the text content to insert the text also let’s add menu dot text content is equal to hello so in this menu right now we have these list so it will remove this list and it will add hello let’s see the output here you can see we have only Hello in this web page so we can read and add the text using this text content on the web page next we will learn about iner HTML so inner HTML is used to add the HTML code on the web page so here we have added textt content so instead of this we will add inner HTML and see the output on the web page you can see we have hello so it is in the normal text so here if I write H1 it will add this hello text in heading so so it is in heading style hello so this inner HTML accept the HTML tags and add the text on the web page but instead of this inner HTML we will add text content now you can see what will happen it will add this as a plain text H1 is also displaying here and if I add in our HTML it will add this text and this hello text will be in the heading Style you can see this hello text on the web page next one is after method we can use after method to insert one or more nodes after the element so this is the Syntax for after method we have to add the element name then after method and we have to pass a new node that we want to add after that particular element suppose we have this menu element so we can write this menu then after method in this one we can pass a new element and we can create a new element using the create element method this after method can accept multiple nodes so we can add multiple element after this menu it can also add a string after the element so we can add multiple string s str1 s Str 2 like that we can add multiple string after this menu element so so this is the use of this after method now let’s learn about append method so this append method is also similar as append child but in the append method we can add multiple elements this is the Syntax for append methods we have to add the parent element then append then we have to pass a new element that we want to add in that parent element so this new node or new element will be added in the parent element at the end of the list of childs so what’s the difference between append and append child so this appen will accept multiple nodes and it can add string also the next one is prend Method so this is the Syntax for prepend method parent node. prepend and new nodes so it will add the new node as a first child in this parent node so this is the prepend method the the next one is insert adjacent HTML so this is the Syntax for insert adjacent HTML here we have to add one element then insert adjacent HTML method and here we have to give position and text so suppose we will add this element menu and we want to add one text at the end of this list so here we have to give the position so the position can be before begin after begin before end and after end so suppose we add before begin so this element is starting from here so this before begin position means it will add the new node before this ul and if we add after begin it will add it here at this position and if we add position before end so this is the end so it will add before end here it will be added in this line and if we add after end so it will be added after closing of this UL so let’s test it here we will add any one position I will add before end let’s add before end and here let’s add lii contact like this so here I’m adding one html text and this is the position and this is the element where we want to add this so you can see the output on the web page the contact is added here now let’s come back and if I add after begin so it will be added here at this line because this is a starting of this element and it will be added here you can see the first one is contact and after that home so this is how this insert adjacent HTML works now the next one is replace child here is the Syntax for the replace child method replace child method is used to replace the child element with the new one so we can use this syntax we will add the parent node then replace child method here we have to add the old child that we want to replace and here we have to add a new child that will be replaced on the place of old child next one is clone node method we can use clone node method to clone an element here is the Syntax for clone node method we will add the original node then clone node so this new node will have the another copy of this existing node if I add menu so this new node will have one copy of this menu element let’s print this one here we will add console.log new node you can see the output it is displaying ulli menu now let’s come back and here we can pass the argument so if I WR true it will clone this descendants also this UL element and these Li elements Also let’s come back you can see we have ul and all these Li and if I remove it or write false by default it is false we don’t need to write but if I write false you can see here we only have UL element and if I remove move it still it will be only ul and if I write true it will clone the element and all the child element also you can see ul and all three lii so this is the Clone node method next one is remove child method to remove the child element of a node we can use remove child method here is the Syntax for remove child method here we have to add the pent element and then write the element that we want to remove from the pent element so here let’s add menu and from this menu suppose I want to remove this last one so here we will add menu dot last child element so it will remove this blog you can see on the web page here we have home about blog is missing if I write menu DOT first element child so it will remove the first element which is home you can see on the web page here we have about and blog so this is the remove child method next one is insert before method we can use insert before method to insert a new node before an existing node as a child node of a parent node here is the Syntax for insert before method we have to add one pent element then this insert before method and it will accept two arguments in this one we have to add the new element that we want to add and we have to add the existing element before that existing element this new element will be added we have the pent element menu so we will add menu here and we want to add the new element before this lii that home link so here we’ll add menu DOT first element child so this new node will be added before this home so this is the insert before method so these are the methods to manipulate the HTML elements now we will learn about attribute methods so let’s understand what is attributes here I will add one HTML element input type is text we will add one ID so let’s add the ID username and we can add the placeholder also username so in this HTML tag we have added three attributes which is this one this one and and this one this is the attribute name and this is the attribute value the ID is the attribute name username is the attribute value this placeholder is the attribute name and username is the attribute value now how we can get the attributes of any HTML element using JavaScript so let’s add one script tag here where we will add our JavaScript code first we have to select this element so we can use any method to select the element let input box is equal to document. get element y ID I’m using get element by ID method and we will add this ID username after selecting the element we can find the attributes available in this HTML element so to get the attribut we will just add the element which is input box and after that just add attributes that’s it it will give all the attributes available in this HTML element so to print this in console we will add console. log and add this code inputbox do attributes after writing this let’s come back to the web page and uh you can see the console tab it is displaying type then ID then placeholder so we have three attributes in this HTML element now we have some attribute methods to get the attribute value and to set the attribute of any HTML we can check for some attribute whether it is available or not and we can also remove the attribute using the attribute methods so let’s see the first method which is get attribute so instead of this we will add the element which is input box and here we will add get attribute and in this get attribute we have to add one argument so we will add the attribute name so here we have the attribute name type so just add type like this and after that let’s come back to the web page you can see here is displaying TT so we can read the value of the attribute using the get attribute method let’s take another example here I will add this placeholder write this placeholder here now it will display the value written in this placeholder attribute so come back to the web page here you can see it is displaying username this username text is available in the placeholder attribute so this was the first method get attribute to read the attribute value now we will learn about second method which is set attribute so let’s remove this one here we will add the element which is input box on this input box we will apply set attribute and the set attribute will accept two argument so the first argument will be attribute name and the second argument will be attribute value like this here we will add the name comma value like this so let’s remove this here and here we will add any attribute name so let me add the class so the attribute name is class and here we will add one value let’s add the class name user like this so it will add one attribute which is class and the value is user now to see the updated input let’s add console.log and here we’ll add input box so it will display this complete element on the console so let’s come back to the web page here in this console you can see we have the input element with the type text ID username placeholder username and there’s one more attribute which is class user that we have added using this input. attribute class user so this was the set attribute method now we will learn about next one which is has attribute so it will tell us whether this attribute is available on the element or not it will result in true or false so here we will add another example we will add the element input box then has attribute and this will accept only one argument so in this one let’s let add class and it will return one true or false value so we can directly print this one so just add console.log input box has attribute class so you can see in this input field we have the type ID and placeholder we don’t have class here so it should return false let’s see the output you can see it is displaying false now let’s come back and instead of this class we will add ID so it will return true let’s come back to the web page you can see it is displaying true in this console so this has attribute will return true or false value if the attribute name is available in the input field it will return true if this attribute name is is not available in the input field then it will return false so using this has attribute we can check the availability of that particular attribute on the element next we will learn about another method which is remove attribute that will remove the attribute from the element so in this one we will add element then remove attribute and in this remove attribute we will add one attribute name that we want to remove so here we have type ID and placeholder so let’s try to remove this placeholder just copy this one paste it here so this remove attribute will remove this placeholder from this input element now we will just print this input element in the console we will add console.log input box and now we will see the output in console here we we have the input element and in this input element we have type text ID username but here we don’t have the placeholder because in this code we have added remove attribute placeholder so it will remove this placeholder attribute from this element so these are all four attribute methods now we will learn about manipulating elements a style to manipulate the style of the element we have the property called Style and we can use this a style property to get or set the inline style of an element so here we have the HTML element which is input and in this one we don’t have any inline style so let’s add one style here and here we will add the background color value is red and let’s add one more CSS property here that will be for font size 20 pixel so in this HTML element we have added the inline CSS in this one we have added the background color and font size now to get these inline CSS we can use the style property on this element so here let’s add the element which is input box do style so it will return the CSS properties available in this input field in the inline CSS it is returning some value so we can add console.log and this code now you can see the output in the console tab in this console you can see it is displaying background color and font size because here we have only two inline CSS properties which is background color and font size so this element do style will return the inline CSS available in the element now if if you want to return the background color value or the font size value then we can write input box style dot background color like this after adding this come back to the web page here you can see it is displaying red background color value is red now if you want to see the value of this font size here we will add font size and you can see the output here in the console tab it is displaying 20 pixel so we can get the property name also and value also now we can use this style property to set the style of the element so let’s add input box and on this input box we will add a style and in this a style let’s add one new CSS property let’s add padding padding is equal to 10 pixel after adding this we will display this input in the console so we will add console.log input box so it will display this input field in the console tab where it will add the padding also so let’s come back here you can see we have this input element in this one we have the style background color then font size and after that you can see this padding let’s select this one here you can see padding and the padding value is 10 pixel so using this style property we can get the inline CSS and we can also set the inline CSS now we have one more option to add the inline style in the HTML element that is using CSS Tex text so here we will add the element then style then CSS text and in this CSS text we can add the CSS so let’s add width 200 pixel after adding this let’s print this element in the console you can see the output here on the web page it is displaying this element with the style width 200 pixel here we have only one CSS property which is width 200 pixel let’s come back to the web page we have added CSS text with 200 pixel so it will override the existing inline CSS you can see we already have background color font size but it is not available on the web page why because we are adding width 200 pixel using this CSS text so it will override completely it will remove this and add this one but if you want to keep the existing CSS also and add this one also then you can use the concatenate to perform the concatenate we will just add plus before this assignment operator like this after adding this again come back to the web page now you can see in this input field we have the multiple CSS properties which is background color then we have font size and width also so after adding this concatenate we can use the existing inline CSS also and we can add a new inline CSS using this CSS text we can add multiple CSS properties at the same time you can see we have added width so we’ll add more CSS properties just add semicolon and add another CSS property let’s add height height will be 100 pixel now we will come back to the web page you can see height is also applied in this input field you can see it in the console also here we have height 100 pixel so using this CSS text we can add multiple CSS properties in the HTML element as a inline CSS so this was the use of CSS text for modifying the inline CSS of the HTML element now we will learn about get computed style method currently we have learned how to modify and get the inline CSS properties of the HTML element using JavaScript now how to get the CSS properties written in the external CSS so let’s remove the CSS from here remove this inline CSS and we will add the CSS properties in this head here we will add style tag within this style we will add the CSS selector input and for this input we will add the background let’s add the background color red and font size 12 pixel so we have added two CSS properties for this input element now how to get these CSS properties to get the CSS properties of this input element we will use get computed style method so let’s see the syntax first this computed style method is a window object so we will add window do get computor style and in this one we will add the element we can add one more argument that will be C element so this is the Syntax for get computed style in this one we will add the element if you want to get the CSS property of the element and if you want to get the CSS properties of the seudo element then you have to add the element and it C2 element and now let’s see the example for this input field so here we will add window do get computered style and in this one we will just pass to the element which is input box now it will return the CSS properties available on this input field so we can print it using console console. log and add this one now let’s come back to the web page to see the console tab here it is displaying all the CSS properties that are applied by default on the element in this one we will find the background color also you can see the background color here and there will be font size also it is here font size so now we can get the value of the particular CSS property so from this input box we will add font size now it will display the value of this font size you can see it is displaying 12 pixel that we have added here in external CSS now let’s add the background color we are adding this window. get computed style then passing this element and from this element we’ll get the value of this background color let’s come back to the web page here is displaying the color now let’s come back in this one we will add one more property let’s add the width of 300 pixel and here we will add dot width then we will see the output it is displaying 300 pixel so using the git computer style method we can read all the CSS properties applied on any HTML element now we will learn about class name property class name property return a list of classes separated by space so let’s take one example here we will add one title in H1 tag so let’s add the text greatest T and and with this H1 we will add one ID to select this element we will add the ID title and let’s add some class name also so let’s add the class main the first class name let’s add one more class name which is message so in this one we have added two classes which is Main and message now to get the class name of this element we will use the class name property of JavaScript so let’s add the JavaScript here in this script tag first we have to select the element so let’s add the variable with the name title and select the element using document. get element by ID and write the ID title after that we will add title dot class name that’s it it will return the list of classes available on this element so it is returning some value then we can print this one in console let’s add console.log title dot class name that’s it now we will come back to the web page now it is displaying the classes available on this element which is Main and message so we have two classes we can use this class name property to add a new class also so let’s come back here and here we will add title dot class name is equal to new so this will add one class name which is new in this element let’s remove this class name here we will display the complete element in the console using this console.log title let’s see the element here you can see it is displaying this HTML element with ID title and class new we have only one class which is new but in this HTML you can see we have already added Main and message so this will override these classes here we have two classes that will be removed and this new will be added in this class but if you want to keep the existing class also and new one also then you can use the concatenate using this plus and this assignment operator after adding this here we will add a space and let’s come back to the web page now you can see the same element H1 here and in this element we have class main message and new so we have total three class here so using this class name we can read the class name of the HTML element and we can add a new class also now we will learn about class list property class list return the collection of CSS classes so let’s see if we add class list and it is returning some value so we will print this one title. classlist like this we are just adding title. class list and you can see we already have Main and message class in this element now we will come back to the web page in this one you can see we have a list where we have Main and message class so we have two classes so this class list is returning the collection of classes available in any HTML element so this was the first use of this class list to display or get the class list of any HTML element now we can use this class list to add the class to remove the class so let’s understand how we can add a new class using this class list so in this title element we will add classlist do add like this we are adding class list do add and in this one we can add a new class just add new like this that’s it after adding this we will display this complete element in console tab we are displaying this title let’s come back to the web page here you can see we have this element with three classes main then message then new let’s change the size so you can see we have total three classes main message and new now let’s come back if I add multiple classes we’ll just add a comma and add a new class name like new two so we are adding another class name like this we can add multiple classes using this class list you can see we have more class name here main message new and new to so using this class list. add we can add a new class name in the stml element now we can use this class list to remove any class so instead of this add just type remove class list. remove and what we will remove we already have Main and message so let’s remove this message write it here in a quote and come back to the web page here you can see in this element we only have one class which is main now just come back and we can remove both classes so let’s add comma and write main so it will remove the another class also we can type multiple class name here and it will remove all that classes from that element you can see this element in this element we don’t have any class we have the class attribute name here but we don’t have any value in this class next we can use this class list to replace any class so instead of this remove we will add replace and to replace this one we have to add the existing class name and new class name so in this HTML element we have message so write message here and we are adding a new class name instead of this message so we’ll add MSG so instead of this message we will replace it with MSG now just come back to the web page you can see the output in console here we have class name Main and MSG so we are replacing this message class with MSG class using this class list. replace place now we have one more option to check whether the class is available or not for that here we will add class list do contains and in this one we will add any class name so this message is here we are adding message so this will return the value either true or false if this message is available in this element then it will return true if it is not available it will return false so we’ll just print this one remove it from here add it in console and come back to the web page you can see it is printing true because this message class is available in this element so we are adding class list do contains and class name this class name is available in the element that’s why it is returning true suppose we add MSG and this MSG is not available in this element then it should return false you can see the output it is false now we have one more thing which is toggle let’s see this example here we will remove this one we will just print this complete element in console and here let’s add title dot class list. toggle and in this toggle we can add any class name suppose we add message what will happen if this message class is available in the element it will remove it this toggle means if the class name is available it will remove it and if it is not available then it will add that class name in the element so what will be the output this message is already there and we are adding toggle message so it will remove this message let’s see the output in console here you can see class main here we have only one class which is main so this toggle removed this message class now instead of this message we will add new so what will happen this new is not available here so it will add this new in this element let’s come back to the web page again and now you can see we have total three class in this element which is main message and new so using this class list. toggle we can add and remove the class from the element if the class name is already there it will remove it and if it is not there it will add the class so this was all about class list property in JavaScript now we will learn about JavaScript events an event is an action that occurs in the web browser when we click on the web page that is a click event when we move cursor over the web page that is mouse move event and when the web page loads that is a load event like that we have multiple type of events in JavaScript let’s create some HTML elements here I will create one div with the ID container and within this container we will create one button with the button tag and button type will be button and here we will add the text click here now we will come back to the web page here you can see this button click here if I click here nothing is happening because we have not added anything so let’s come back you can see we have added the button and clicked on this button but when we click on this button we are actually clicking on the button this div this body and this HTML and this document also so when we click on any element actually we are clicking on the all the patent elements also that means this di with the ID container then body then HTML and this document and in modern browser this click goes up to window object there are two event models that is event bubbling and event capturing so when we click on the button click a start from the button then goes to div then goes to body then goes to HTML and then goes to document so the event flows from the most specific element to the least specific element that is event bubbling but when the event start from the least a specific element it means it starts from the document then event flow to HTML then it flows to body then it flows to div with the ID container then it comes to the Target element which is button so this event model is known as event capturing when the event starts at the least specific element and flows towards the most specific element we may respond to these events by creating event handlers an event handler is a piece of code that will be executed when the event occurs so when we click on this button we will add some code that will be executed after clicking on this button so that code is known as event handler and event handler is also known as event listener so there are three ways to assign event handlers so first one is using HTML attribute for each event there is event handler and their name typically begins with on so let’s see the example we have click event and for this click event we have the event handler on click like this so let’s assign this on click in this HTML element as an attribute so in this HTML element we will add on click so this is the event handler of the click event and within this quote we can write the JavaScript so let’s add a simple JavaScript line console.log so it will log one message in the console of the browser in this one let’s add some text here we cannot add double code because we have already used so I’ll add single quote button clicked so this button clicked message will be printed in the console when we click on this button so let’s see this on the web page this console is Ed right now and if I click on this button that is here in top left corner you can see this message button clicked this event handler attribute can call one function also so let me remove this HTML code we have added event handler which is on click and this on click will call one function so here let’s create one function in a script tag in this script We’ll add one function with the name display MSG that will display message here we will add console.log button clicked let’s add some more text button clicked from FN which means button clicked from function now we will call this function when we click on the button so in this attribute we will call this function write this function here so this is a function call now let’s come back and you can see this console is empty and if I click on this button again you can see the message here it is saying button clicked from FN it means button clicked from function now just come back when the event occurs the web browser passes an event object to the event handler so to understand this one let’s remove this function here and we will add JavaScript code in this attribute so here let’s add console.log and when we click on the button the JavaScript will pass the event object so we can write that event object here event now we can see what is there in this event object let’s see the output so you can see here we have one object now this event object has some properties that we can access so from this event we can find the type event. type let’s see it is displaying the event type event type is Click let’s come back we can add the target so we will get the target element on which the event occurs when we clicked on the button it is displaying the entire button element with all the attributes so it is giving the target element we can also use this keyword inside the event handler and this keyword inside the event handler refers to the Target element let’s see the example example here in this event handler we will try to print this this keyword will refer to the Target element let’s see the output when we click on the button you can see again we got the target element which is button so this keyword inside the event handler refers to the Target element from this keyword we can find the properties of this element so let’s add one ID here I will add the ID is equal to BTN and here we will add this do ID so when we will click on the button it should display the ID value let’s see if I click on the button it is displaying BTN now just come back and instead of this do ID we can simply add ID from the event handler we can directly access the elements property so we are adding console.log ID so it should display this ID value let’s see if I click on the button we got the ID value which is BTN if I write type which is here we will get button it’s here so this was the first method to add the event handler in HTML as HTML attributes now the second method is adding event handler name in the JavaScript so let’s remove this on click from here we have one button let’s remove this type also it will be simple so we we have one button with the ID BTN now we will add the script where we will add the JavaScript So within this script first we have to select this button so let’s add let BTN is equal to document. get element y ID and we will add the ID BTN so we have selected this button element now on this BTN we can add the event handler just add on click and now we can add the code that will be executed when we click on the button so here we’ll create one function and within this function We’ll add console do log and this will print message button clicked after that let’s come back to the web page click on the button and you can see the output in the console button clicked let’s come back you can see here we have the HTML element and in this one we have added the JavaScript in this JavaScript we have added on click event handler name and added one function that will dis play one message here also we can write this keyword that will refer to the Target element and from this we can find the ID this do ID let’s see it is BTN now to remove the event handler we will simply add element which is BTN do onclick and assign null that’s it it when we assign null in this event handler it will remove the event handler so this was the second method to assign the event handler now we will learn the Third Way of assigning event handler so in JavaScript we have two methods with the name add event listener and remove event listener these are two methods that handles the event ad event listener will register an event handler and remove event EV listener will remove an event handler so let’s see the example of add event listener the add event listener accept three arguments the first one will be event and the second one will be one function this function will be executed when the event fires and the third argument is use capture so the third option is optional because by default it is false this use capture is a Boolean value it can be true or false so by default it will be false and we can remove it it is related to the event bubbling and event capturing so let’s ignore that third parameter we will pass to argument event and one function so let’s see one example so let’s try to add this add event list on this button remove it here we will add BTN do add event listener and we will pass first argument which is event so the event will be click we are adding The Click event then a comma here let’s define one function here I’m adding function like this so this is the function defition within this curly Braes we can add the code that will be executed so here let’s add console.log and message button clicked so we have selected the button using get element by ID then on this button we are adding add event listener method that will assign the event handler so in this event listener we are adding first parameter and second parameter first parameter is event so the event is click and the second parameter is a function so we have declared one function here this function will print one message in the console tab when we will click on the button let’s see this output on web page click on this button and you can see the message button clicked as I already said when the event occurs the JavaScript passes the event object to the event handler so in this one we can pass the event object and we can find the type from this event event. type let’s see the output if I click on the button we got event type which is Click now instead of adding this Anonymous function we can add the external named function also so let’s remove it here we can add our second parameter before adding that second parameter let’s create one function with the name display message and this display message will log one message message button clicked now we can refer this display message function here like this after adding this let’s come back and if I click on the button again you can see the message button clicked so we can add the event name and one function it can be a Anonymous function or it can be a named external function we can refer to that external named function with the function name without the parenthesis so this was add event listener method now we will learn the remove event listener method the remove event listener removes an event listener that was added using add event listener so here we have added the event listener using add event listener method now we can remove it using BTN dot remove event listener again we have to pass the same arguments just copy and paste it here so this remove event listener will remove the event listener that was added using this add event listener you can see here I have added the external named function if I add one Anonymous function here then we cannot remove move that event listener using this method so we have to use the external named function when we want to add the event listener and remove the event listener now let’s know about some of the useful JavaScript events so the first one is mouse move event Mouse move event fires repeatedly when you move the mouse cursor around the element and second one is mouse down event when you press the mouse button on the element this event will fire next one is mouse up when you release the mouse button on the element then this event will fire next event is mouse over event when the mouse cursor move from outside to inside the boundaries of the element then Mouse over event occurs next one is mouse out when the mouse cursor is over an element then moves to another element then Mouse out event occurs next one is key down event key down event fires when you press the key on the keyboard and it fires repeatedly while you are holding down the key next one is key up event this key up event files when you release a key on keyboard next one is key press so the key press event occurs with when you press a character keyboard like ABC it files repeatedly while you hold down the key on the keyboard next one is scroll so a scroll event occurs when you scroll a document or an element the scroll event fires we will see more examples of events when we will create the JavaScript projects now we have completed the basic of JavaScript next we will create some JavaScript projects in this video we are going to learn how to create a Notes app using HTML CSS and JavaScript here on my computer screen you can see one button create nodes if I click here it will open one input box and here we can type our text note this is note one so you can add your text note in this white box and if I click on this button again it will again open a new input box where we can add another note and if I click on this delete icon it will delete this note we can delete all the nodes and let’s add the text again two so we have added two notes here this is Note One Note Two And if I close this browser and open the browser again let’s see you can see this note is still displaying here because we have added the local storage that will store the notes in the browser so we will create this note app that will store the text note in the browser using HTML CSS and JavaScript so let’s start this video here I have this folder called Notes app in this one I have one HML file one CSS file and another folder called images in this images folder I have some icons that I will be using on this web page you can find these images download link in the video description let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added this title that is the title for the web page then we have added the link tag with the file name style. CSS so it will connect the HTML and CSS file next we have to add the HTML codes in the body tag that will be displayed on our web page so within this body let’s create one div with the class name container now in this container we will add one title in H1 so here we are adding one title notes and after this title there will be one button so let’s add one button and in this button we will add the button text create notes after adding this let’s come back to the folder and open this HTML file with any web browser so you can see this text here notes and create notes button now I will close this browser and I will open it with the visual studio code extension called live server so it will refresh the web page automatically whenever we will add any changes in the code file you can see the same web page but the order has been changed now we have to add some CSS so just come back and copy this class name container and come back to the CSS file within this CSS file let’s add do container and here we have to add the width then we will add minimum um height and in the background we will add the linear gradient color so let’s add the background linear gradient and two color codes then we will add color that will be white and let’s add some space from the top padding top and padding left that will be spaced from the left side after writing this you can see the changes in this web page the text color is white and the background color is linear gradient now let’s come back and uh with this text we have to add one icon also so just in front of this notes we will add one IMG tag so here we will add IMG and SRC and file name images SL the file name is noes. PNG and in this button also we will add one icon so here also let’s add this IMG tag and replace the file path so it is edit.png so we have added two icons with the tag in the nodes and create nodes button you can see this icon and this edit icon in the button now we have to add the CSS for these icons and font size so let’s come back after this container again add container and H1 for the title here we will add display Flex align items Center then font size will be 35 pixel and font weight 600 now within this H1 we have added one icon with the IMG tag so we are adding IMG here and for this image we will set the width it will be 60 pixel so this size for the note icon looks good next we will Design the button so let’s come back and here we will add container then button and in this button we have image so for this image again we will add the width 25 pixel and margin from the right side this will be H pixel let’s copy container and button now we will Design this button using CSS so let’s add display then align items background will be linear gradient two color code button text color will be white and uh font size outline zero and Border zero border radius will be 40 pixel let’s add some padding that will be space inside the button 15 pixel from top and bottom and 25 pixel from left and right side then margin that will be space outside of the button 30 pixel 0 and 20 pixel cursor will be pointer so after adding this you can see this create notes button looks good next we have to add one input box where we can type the text note so let’s come back and uh after this button we will add one tip with a class name nodes container and in this one let’s add one P tag in this P we will add content editable true and we will add one class name also so the class name is input box so it is not visible here because we have not added any text in this P tag so let’s come back and we have we have the input box just copy this one and come to the CSS file write this input box with the dot and here we will add position relative width will be 100% And the maximum width will be 500 pixel then mean height background will be white so we have added width and height in this P then we will add the color padding of 20 pixel margin 20 pixel and zero then let’s add outline none border radius 5 pixel so that the corners will be round after adding this the input box looks good and in this input box we can type anything now we need uh delete icon also so let’s come back and uh before closing of this P tag here we will add a space and before closing of this P tag we will add one IMG tag write the file path images SL delete.png it is delete icon and you can see this icon here next we have to set the size and position for this delete icon let’s come back here we will add this input box then IMG for this image width will be very small 25 pixel Position will be absolute then it will be at bottom 15 pixel space from the bottom and 15 pixel space from the right side cursor will be pointer after adding this you can see perfect position for this delete icon now this input box is displaying by default so we have to to hide this input box and it will be displayed whenever we will click on the create note button and every time you will click on the create noes button it will run a JavaScript and that JavaScript will display the input box so let’s come back and here we have the P you can delete this P tag or command it let me commment this one so it will be disabled and right now you can see we have the text and button we don’t have any input box now we will display the input box with the help of JavaScript so let’s come back and here we’ll click on this icon to create a new file and write the file name script.js so this is our new file script.js next we have to connect this script file with the HTML file so let me come back to the HTML file and just above this closing body tag we will add script SRC and the file name which is script.js now the HTML file and JavaScript file are connected let me open the folder again and here you can see one new file which is a script.js in the same place where we have added HTML and CSS file now let’s come back to the JavaScript and here we will add some variables so let’s add const nodes container con nodes container equal to document. quy selector do nodes container now we will duplicate this line it will be create BTN and here we will add the class name BTN and uh in this button we will add one class name class BTN after that we will add one more variable let nodes equal to document dot query selector all dot input box so here we have added three variables notes container which is for this notes container class name then create button which is for this create button and then we have added another one notes that is for this one input box this input box is not there but we will add it using JavaScript so we will add the multiple P tag with the class name input box so here I’m adding query selected all that will select all the nodes after that let’s add one function then I will explain you each line here we have added create button add event listener it means whenever we will click on the button that is here BTN so it will execute these codes and first it will create one variable called input box and it will store one element document do create element by P so it will create one p element and it will store it as input box then it will create another element with the IMG tag and it will be stored as IMG now in the P element which is input box it will add one class name called input box then in this P element we will add one more thing which is content editable true so we are adding input box set attribute content editable true so it will add one P tag then in the P tag it will add one class name input box then it will add one attribute content editable true and after that we have added img.src we have created one more element IMG and in this Source we will add one file path that is for the delete icon images /d delete.png so it will add this image IMG srz images /d delete.png now we have to display it so we have to display this in the notes container so you can see we have added noes container do appendchild input box it means this input box will be displayed inside this noes container and after that we have added the and child IMG it means this image will be displayed inside this P tag which is input box so after adding this let’s come back to the web page and click on this button you can see it is adding one new input box with the delete icon and we can type anything in this input field it is working now click again it will display the another input field now if I click on this delete button nothing is happening so we have to add one more thing this delete functionality so let’s come back and here we will add this one notes container add event listener again we will add the click event then function if e do Target dot tag name if the target is IMG then e do Target dot so we have added nodes container event listener click so when we will click within this notes container and if the target element is IMG then it will remove that parent element so let’s come back click on this button it will display one input box and here we have the delete button let’s click on this delete icon and it will remove that pent element let’s click again and click on this delete you can see it is deleting the parent element so it will hide that input field this delete is working fine and we can also write something here hello this is new video right now we have added two notes and if I refresh the website you can see it will be disappeared because we have not stored these things in the browser so we have to add the local storage that will store the notes in our browser every time we will open the browser it will be stored and displayed as it is so let’s come back after these variables let’s add some space and here we will add one function update a storage data storage and after that we will add local storage do set item and write the name noes and what we have to store here we will store noes container do inner HTML so whatever is written in the noes container inner HTML that will be stored in the browser with the name notes so whenever we will call this update a storage it will update the data in our browser so let’s copy this one and add it here after deleting it it should be updated so in the next line we will add update a storage next we need one more thing if we write anything in the P then also it should update the data in the browser so here we will add the another condition which is L if here we will add nodes equal to document do query selected all input box now for all the nodes it should update the data in browser so here we will add noes dot for each n sort for the nodes ENT do on key up equal to function and here we will update a storage so it will update the storage when we will start typing edit anything in the P tag next we need one more thing when we close the browser and open the browser it should check the local storage and if there is any data in the local storage then it should display that particular data as a note so let’s come back here at the top after this variables let’s add function so notes notes container do iner HTML equal to local storage dot get item and the item name is notes so if this notes is there in the browser then it will be displayed on our web page just we have to call this function so notes just copy this one paste it here so notes will call this function and it will display this local storage in the container HTML so let’s see how it works if I refresh the web page you can see it is still displaying the note one and Note 2 let’s delete the note one here we have this is Note 2 let’s refresh the website you can see still it is displaying Note 2 so this local storage is working next we will add the one more last thing here will add here we are adding document do add event listener key down event and if the event key is enter Then document. exe command is insert line break and event prevent default it means when we will click entered in our keyboard then it will add one line break in the P tag and it will prevent the default feature of the enter key now let’s see here we will create a new note note one enter line 2 Enter line three refresh the web page you can see it is displaying as it is so finally we have completed this online note app using HTML CSS and JavaScript with the local storage in this video we will create a very useful JavaScript project which is simple quiz app you can create this squiz app or website with the help of HTML CSS and JavaScript let’s see how this squiz app works you can see this question here then we have four options if I select the wrong answer you can see it will become red and the correct answer will become green and now we cannot change our selection now we will click on the next button and if I select the another option let’s select this one and if it is correct then it will be highlighted with the green color and now we cannot click another option we have to click next and here if we will click on this one if it is correct it will become green and let’s click on the next one and now we will select any wrong answer so you can see it is displaying the red color and the correct answer is highlighted with the green color I have added only four questions here if I click on the next button you can see it will display our score you scored two out of four because we have given only two correct answers let’s click on this button play again and if I select the correct answer and again this one this and this one and click on the next you can see it is giving the correct score which is four out of four we will create the squee app using HTML CSS and JavaScript and I will explain you step by step now let’s start this tutorial to create the JavaScript quiz app here in this folder I have one HTML file one CSS file and let me open these files with my code editor which which is Visual Studio code you can use any code editor if you don’t know how to create the HTML and CSS file I will add the video link in the description this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added the margin padding font family and box sizing these CSS properties are applicable for all the HTML element in this HTML file I have added this link tag with the file name style. CSS so it will connect the HTML and CSS file and here we have the the title quiz app easy tutorials next in this body tag we will add one D with the class name app next we will add the CSS so come to the CSS file and here first we will add the dark color on the complete web page so we will add body tag and for this body let’s add one background here we will add one color code and next we will add the CSS for the app so just copy this one add it here in this CSS file with the dot because it is a class name here we will add background so the background will be white after that we will add the width 90% and maximum width will be 600 pixel then we will add the margin 100 pixel from top left right Auto and zero from the bottom then border radius so the Border radius will be 10 pixel so the coordinates will be round by 10 pixel after that we will add the padding of 30 pixel that will be a space inside the box after adding this let’s come back to the folder and open this HTML file with any web browser so you can see this color on the complete web page and here we have the box in the white color I will close this browser and I will open this browser with the visual Studio code extension called live server so that it will refresh the web page automatically whenever we will add any changes in the code file so you can see the same web page again but the URL has been changed after that let’s come back and uh within this app we have to add one title so here we will add one title in H1 simple quiz and after that we will add one another div with the class name quiz and within this we will add one question in H2 so let’s add the H2 and here we will add one ID so the ID is question and let’s add any text here so we will add question goes here like this and now you can see this text simple question and question goes here after that we will add some options for the particular question so here we will add one div with the ID answer buttons and within this answer buttons we will add four buttons so let’s create the first one and in this one we will add the class name BTN and here we will add the answers so let’s add the text answer one now we will duplicate this button and we will change the text 2 3 and four and the class name is same after adding this you can see four buttons here after this question answer 1 2 3 4 next we have to design this using CSS so let’s come back and uh here we have the class name quiz so just copy this one and come to the CSS file before the squeeze we have the text in H1 so we will add the CSS for that text so let’s add do app and H1 where we have added the text so for this one we will increase the font size then we will change the color font weight and border bottom then we will add the padding at the bottom now you can see this line here after this text after that we will add that class name quiz and for this quiz we will add the padding it will be 20 pixel and zero after that in this squeeze also we have text which is the question in H2 so here we will add do quiz and H2 so for this question we will add font size so the font size will be 18 pixel then we will change the color and font weight and uh here we have added font weight it will be font size font size 25 pixel now it is good next we will Design these buttons which is answer button so for this button we have added the class name BTN so come to the CSS file here we will add the CSS for BTN so for this button we will add the background so the background will be white after that we will add the color that will be the text color and font weight font weight will be 500 then width will be 100% so it will be full width and border of one pixel solid and this color then we will add the padding that will be a space inside the button and margin 10 pixel from top and bottom and zero from left and right after this padding and margin we will add text align left and uh border radius will be 4 pixel and cursor pointer you can see these buttons looks good next we have to add the hover effect on these buttons so let’s come back here we will add this one and hover we will add the background this will be the background color code and after that we will add the color that will be the text color white and in this one we will add the transition all 0.3 seconds now if I take cursor you can see the background becomes black and the text becomes White next we have to add one more thing which is the next button at the bottom of these answers so let’s come back and uh here after this button and this tib here we will add another button and with this button we will add the ID next BTN and the button text is next after adding this you can see next button at the bottom so we will add the CSS for this next button so let me come back and copy this ID add it here in the CSS file with the has tag because it is an ID here we will add the background then color font weight and width width will be small 150 pixel then we will add the border border will be zero and padding of 10 pixel then margin 20 pixel Auto and zero border radius will be same which is 4 pixel and cursor pointer after adding this you can see this next button here but we have to move it in this Center so here we will add display block and now you can see it is horizontally centered right now this button is displaying so we have to hide this button and this button will be displayed once we will select any option from these answers so let’s come back and here we will add none so the button will be hidden you can see that button is hidden next we have to add the JavaScript to display the correct questions and we can select the answers so let’s come back back and here we will create a new file click on this icon and write the file name script.js this is the script file here we will add our JavaScript next we have to connect this script file with the HML so let’s come back and above this closing body tag here we will add a script tag script SRC equal to script. JS now our HTML file and JavaScript file are connected here we can add our JavaScript so in this Javascript file first we have to set the questions so here we will add const in this Con we will add the name of the variable so it is questions equal to here we have to add the questions so let’s add the first one like this question and write the question text then we have to add the options for this question so here we will add answers here I have added the first answer and correct is equal to false because it is a incorrect answer let’s duplicate it and we will add the other answers here and the second answer is correct so here we will add true so this is the first question and the list of answers now we’ll add the other questions in the same format so here let’s add one comma and we can add this second question here so you can just copy this one and paste here and update the text so I have updated all these questions and answers you can see in front of the correct answers I have added true and other are false here also I have added true and these three answers are false after that we will add another variables in this HTML file I have added this ID question and answer button and next button so we will add the variables for all these three elements so come to the script file here we will add const question element equal to document. get element by ID question which is this one next we will add the variable for this one duplicate this line add this ID here and here we will add the answer button now duplicate this and it will be next button and the ID which is next BTN now whenever we will start the quiz and give the answers the question number and the score will be changing so we will create variables to store the question index and score so here we will add let current question index so the index will start from the zero then we will add let score equal to zero next we will add one function and let me write the code then I will explain you here I have added one function start quiz so when we will start the quiz it should reset the current question index zero and score zero when we will start the quiz here we are adding inner HTML next because at the end we will change the text to the restart or replay so when we will start the quiz again the button should be next and after that we are calling this function so questions so it will set the index zero score0 and set the text next for the next button then only it will call the another function so question that will display the questions now we’ll create this function here in this so function I have added let current question equal to questions. current index so if you will see this list list of questions here we have the first set of question and answer then second then third and fourth so we will get the first question if we’ll add the index zero we will get the second question when we will add the index one so that is written here questions and index number so that will be the current question and we need the question number also so if the index is zero question number will be one if the index is one question number will be two so here I have added + one that will be the question number then in the question element which is this one this is the question element so here we will update the text with the inner HTML so we are adding question element inner HTML equal to question number then one dot and after that the current question and current question dot question so the current question will be this one and here we have the question this one so we will get this text so after adding this we have to display the answer from the current question set so here we will add the code to display the answers so let’s add current question dot answers dot for each here I have added current question do answers so it will come here suppose the current question is this one and it will go here answers and in this answers we have the text and correct so we have to display these text in the buttons so we will add document. create element and the tag name button so it will create one one button tag and we will save it as a variable called button and in this button we have to add one text so to add the text we will add inner HTML and in this inner HTML we will add the answer. text so answer is this one answer. text so it will add the first one then we will add the second one like that so it will add the text in the button then in the button we have to add one class name so we are adding button. class list do add and the class name BTN so it will add this BTN class name in this button after that we have to display this button inside the div which is here answer buttons this div is here so we have to display that button inside this div so we are adding answer button do appen child button so after adding this it will display the question with the question number and it will display the answer now we have to call this a start quiz function to display the output so let’s copy this one and add it here at the bottom start quiz so it will call this a start quiz function and it will set the current index z a score 0 and button text next then it will call the so questions and this so questions will display the question with the question number and uh it will display the answers in the button so after adding this let’s come back to the website and here you can see it is displaying the question with the question number one then we have the previous text that we have added in the HTML file which is Answer 1 2 3 4 then we have our answers that we have added with the variable here you can see the answers for the first question Sark blue whale elephant and jff so you can see these answers here but we have not added click function here right right now so now let’s come back and we have to hide these things to hide these things we have to reset the previous questions and answers so let’s come back and uh here we will add one function before displaying the question here we will add one function reset a state that will reset the previous question and answer now we have to Define this function so let’s add it here function reset state in this reset State let’s add the next button dot style do display it will be none then we will add while answer button it will will be buttons s and here also we will add buttons in this one so answer buttons DOT first child so suppose it has a child element then we have to remove that here we will add answer buttons dot remove child answer buttons DOT first child so it will remove all the previous answers and here also we have added answer button it will answer buttons yes answer buttons do app and child so after adding this let’s come back and here you can see the first question with the question number and list of options and if I click here nothing is happening next we have to add the click function on these answers so let’s come back here we will add button dot add event listener click and here we have to add one function name so when we will click on the answer button it will call this function select answer and before this click event we will add if answer dot correct so if it has some value then it will add button dot data set dot correct equal to answer dot correct so it will add the true or false in this data set correct from here this false true it will add in this button data set now we will add the function which is Select answer so let’s define this function above this a start quiz so here we will add function so when we will click on that uh button it will add the selected button element in this variable selected vtn and then it will check the selected vtn and data set true so if the data set is true then it will add the class name correct and if it is not true then it will add the class name incorrect now for these class name we have to add the background color so we will change the background color for the correct and incorrect class name so let’s come back to the CSS file here we will add correct and background in this background we will add one color code now we will add the background for the incorrect class name Incorrect and this background color after adding this let me come back to the website and if I click on the first one you can see the background becomes red because it is incorrect if I click on the second one you can see it becomes red because it is correct and if I click on the third one you can see it is red and the fourth one is red now we can click on any number of times so we have to disable the click after selecting one answer and when we will select the wrong answer it should automatically highlight the correct answer with the green color so to add that one let’s come back here in the subscript after that we will add so here we have added aray from answer buttons children for each so for each button it will check the data set if it is true then it will add the class name correct suppose we have selected the wrong answer then it will go and check the other answers and if it is true then it it will add the green color with this class name correct and after that it will disable the button so we cannot click on the any button and after that it will display the next button so here we are adding next button style. display block so it will again display the next button so that we can go to the next question so after adding this let’s come back to the website and if I click on the first one which is the wrong answer you can see the second one becomes green because the second answer is correct and it is displaying the next button and now we cannot click on the any other button let’s refresh the website and if I click on the correct answer it is displaying the green color here and now we cannot select any other next we have to hide the hover effect when we select the button so let’s come back and uh in this CSS file here we have added BTN hover so in this one we will add one more thing h and uh not disabled so the hover effect will work when the button is not disabled and when the button is disabled the hover effect will not work and we will add one more thing here we will add BTN disabled and uh cursor no drop after adding this let’s come back and refresh the website if I click here you can see we will not get the hover effect now and the cursor becomes red we cannot click on any button we can just click on the next button we have to add one more thing when we will select the correct answer the score should be increased so let’s come back and here we have added the class name correct in this one so here only we will add one more thing score Plus+ so it will increase the score by one next we will add the function for the next button so here we will add next button do add event listener and the event is click here we will add add a function and in this one we will add if it will check the current index if the current index is less than the length of the question it means the number of question is four then the question length is four so if the index is less than that then here we will add one function handle next button or else it will add a start quiz suppose if there is no question and we will click on that button so it will restart the quiz and here we have to Define this function handle next button so above this one here we will add function handle next button and in this one we will add current question index Plus+ it will increase the question index y1 when we will click on the next button and again we will add if current question index less than question length then so question function with the updated question index else it will display the score so score so if there is another question it will display the another question and if it is not there then it will display the score when we’ll click on the next button next we have to Define this function so cord so here let’s add function sour score and in this one let’s add reset state that we have already created to display the score we have to call this reset function and instead of question we have to display the score so we are displaying the question in the question element so in this one we will add inner HTML and let’s add the text in backtick here we will add us code so it will display the escore out of the length of question and after that we will add next button dot inard HTML equal to play again and uh next button will be block so let’s add next button do style do display block after adding this let’s come back to the website again and let’s select the correct answer next again correct answer next again we will click here next and here next you can see us code four out of four and we are getting the button play play again it will restart the quiz let’s click the wrong answer it will display the correct one let’s click next and wrong answer so we have selected two wrong answers let’s click again click here it is also wrong and if we click here on the correct one so you can see the score one out of four because we have selected only one correct answer out of four and we are getting play again so finally this quiz app is working you can update your question in this JavaScript and you can create your own quiz app or quiz website using HTML CSS and JavaScript in this video we are going to learn how to add the validation in contact form using JavaScript so here you can see I have created a contact form where you can see the input field for the name phone number email ID and message and at the end we have the submit button if I click on the submit button you can see it is giving an error name is required and there was one more error message at the bottom called please fix error to submit first we have to fix the error which is in the name field so here we have to enter the name because right now the name field is empty so let’s add anything here if I write like this still we are getting an error write full name because we have to add the first and last name so let’s add a space and write full name like this now you can see a green check icon that means this input field is correct so after adding the correct data in this name input field let’s click on the submit button again so it is giving error in the phone number field and here it is saying phone number is required so let’s add some characters here if I write like this it is saying phone number should be 10 digits so let’s add any 10 digit number here so so now you can see check mark it means this input field is correct after that if I click on the submit button again it is giving an error in email field so here also we have to add the email ID so let’s add the email ID like this so right now this is not the correct format so that’s why it is saying email invalid so we have to add the email in proper email format so if I write like this now you can see a check mark let’s click on the submit button again and it is giving an error 30 more characters required because we have added the limit minimum 30 colors should be there in the message box so here let’s add any message you can see as I’m writing the text here it is decreasing the required character right now it is saying 16 more characters required after writing minimum 30 characters in this message field we will get this check mark now we can submit this form so let’s click here and you can see it will submit the form so without collecting all the fields this form will not be submitted and once we will collect all the input fields and click on submit button this form will work so we will learn how to add this validation in form using JavaScript now let’s start this tutorial to add validation on contact form using JavaScript I have already already created multiple tutorials about creating a contact form using HTML and CSS that’s why in this video I’m not going to design this form you can go to the video description and download this HTML and CSS form and in this video we will only talk about the validation so let’s come back to the folder and here you can see I have this HTML and CSS file that you can also download from the video description once you will open these files with the code editor you will see this HTML file where I have added the container and then we have the form tag and in this form we have added this icon and here we have added the font awesome link that’s why we have added this font awesome icon then we have the input group and in this one we have the input field for the name this is for the phone number this is for the email and this one is for the text box and after that we have the button and you will get this CSS file also where we have added all the CSS for the design of the form once you will open this HTML file with B browser you will get this form like this next we will display the error message on this form so let’s come back to the code and here you can see we have added the input field for the name so just below this input field we will add one span tag and in this span let’s add one ID also so I will add the ID name error and in this name error let’s add a error name is required like this simply we will add the span tag in all the input group just below the input field so here also we will add this fan tag and this is for the phone number so we will add the ID phone error and here also one message phone is required let’s copy this one and add it just after this input field for the email here we will add the ID email error and we will add the message email is required and uh after that we will add one span here this is for the message error message is required like this and uh we will add one message after this submit button also so here also we will add a span and we will add the ID submit error and one message please fix error so we have added these error message in this HTML file and let’s refresh our website and now you can see these message here at the end of all the input fields and one error message at the bottom left corner of this form so we have to change the position and color for these error message for that we will come back to the HTML file and here you can see we have the class name called input group and in this input group we have the span tag where we have added the error message so let’s add this class name in the CSS file and here we will add the span and for this aspan we have to set the position Position will be absolute then we will add the bottom bottom will be 12 pixel and right 17 pixel we will add the font size it will be 14 pixel and color so the color will be red because it’s an error so you can see the position has been changed for these error message we have to add the Cs for this one also which is for the submit error let’s come back and here you can see we have added the ID called submit error so let’s copy this ID write it here with the hashtag because it is an ID and here we will add color red that’s it so this message is also in the red color so we have added the position and color for the error message but right now this message is displaying by default but we have to display this message after validation using JavaScript so we will remove these error messages for now and it will be displayed later let’s come back and come to the HTML file and just remove this message span tag will be there we have to remove the message only let’s remove all the error message like this it’s done again you can see the simple contact form now we have to add the JavaScript file so here we will create a new file go to files new file and uh save this file as uh script.js make sure the file name should be JS so we have created a new file and uh next we have to come to the HTML file and just at the bottom before this closing body tag we will add a script a script open and closing tag write SRC and write the file name that we have just created which is script.js so it will connect the Javascript file with the HTML file next we have to add the variable for all these ID that we have written here in this HTML file so let’s come to the script file this is the script.js and here we will create variable so let’s add where name error equal to document dot get element by ID and in this ID we will add the ID that we have added in the HTML file so you can see we have added the ID called name error just copy this one and place it here so this is the first variable just duplicate this one and change the name it will be phone error this is for the email error this is message error and this one for the submit error and here also we will change the ID so we have added these variables next we have to add the function that will validate the input box so let’s come back to the stml file and here we have the input field for the name in this one we will add one ID so let’s add one ID called contact name and we will add one event so it is on key up on key up equal to and here we will add one function name so let’s add any function name validate name like this so here we have added one ID and one function next we have to Define this function that we have added here so just copy this function and come to the script file here we will add function write the function name like this so this function will be executed whenever we will start typing anything in the input field so here we will add one variable and write name equal to document Dot get element by ID and in this ID we will add the ID that we have just created which is contact name copy this one add it here at the end we will add dot value so this variable called name Will store the content written in the input box which is for the name so it will take the value of the input field and now we will add the condition so here we will add if name Dot this will check whether this name length is zero it means the input field is empty so it will display an error called name is required and where this error message will be displayed it will be displayed in the variable called name error and this name error is for the ID called name error that we have added here in this span tag so in this span tag we will see this message called name is required when the length is zero it means the input box is empty next we will add the another condition here we are adding this condition so this expression is exactly checking the first character should be alphabet and after that there will be one space and after that it could be any character A to Z here we are adding exclamation it means value is not matching with this expression then it will give an error so what will be the error just copy this one paste it here and here we will add write full name like this and one more thing once it will give an error it will return false like this and we will add this return false in this if condition also so whenever there will be an error it will return false in this condition also if it will give an error it will return false if there is no error then what will happen it will display a success message so let’s add name error dot inner HTML equal to and in this one let’s add valid like this Suppose there is no no error then it will say valid and then it will return true like this it is not and it will be a dollar sign like this so again refresh the website and you can see if I write a first name and write anything in the second name it will say valid you you can see the message has been changed to valid so instead of valid we want to display a check sign so you can see in the HTML file we have added this font awesome link so we can add the font awesome icons so let’s come to the font awesome website here we will search for one icon so let’s go to the icon and search for check we’ll click on this one check Circle copy this and come back to the script file and in this script instead of this valid we will add this HTML code like this and we will change the color also so it is in the it tag you can see it is in the it tag so we have to use this it tag in the CSS file just come to the CSS and copy this input group span and uh in this Supan we have the it tag for the icon and here we will add the color so let’s add the color of this one after adding this color come to the web page and here we will add one name now you can see a green color of check sign so it is working fine next we will add the validation for the phone number field so let’s come back again come to the HTML file and as you can see we have added the ID in the name field and one function so same thing we will do in the phone number field so just copy it here so this is for the phone number field so it will be contact phone ID is contact phone and here we will add validate phone like this come to the script file and let’s copy this one paste it here instead of validate name we will add validate phone this is for the phone number validation and again we have to add the variable so let me just copy this one only paste it here it will be phone equal to document. G by ID contact phone ID is contact phone so this phone will store the value written in the phone number input field next we have to add the condition to check the phone number so here let me write the condition then I will explain to you so you can see here we have added phone. length equal to Z so it will check whether the phone number field is empty then it will display and eror phone number is required next it will check the length of the phone number if it is not equal to 10 then it will display an error phone number should be 10 digits in this condition it is checking the phone num should be 0 to9 and for 10 characters and if it is not like that then it will display an error called only digits and if there is no error like this then it will display a check icon and it will return true so after adding this let’s check the phone number field come back to the web page and here if I write you can see phone number should be 10 digits so let’s add more digits and now you can see a check icon you can see if I add any character like this Zed y anything it is saying only digits please so we need to add digits and if we add 10 digits it is fine so this phone number validation is also working now let’s come back and we will add the validation in this email field so let me just copy this one and paste it here in this email input field write the ID contact email and this is validate email next we will add the script so let’s copy this one it will be validate email then copy this paste it here it will be email document. get elment by ID contact email so it will store the value written in the email input field and now we will check the conditions for so in this validate email function we are adding this variable that will get the value of the input box and then it will check the length if it is zero it means it is empty so it will display an error email is required and return false next if there is some value then it will check this condition and here it is saying it should be any alphabet it may contain a DOT or underscore or the siphon and it can also contain any number and after that there should be one at theate after at theate there will be some alphabets and then one dot and after that dot there will be another alphabet it could be 2 three or four characters so if the email format is not matching with this one then it will display an error called email invalid and return false and if there is no such error then it will display the check icon and return true here we will remove this and save this file let’s refresh the website again and if I write uh correct email here now you can see it is displaying a check icon it means the email ID is valid next we have to add the validation for the message box let’s come back and here we will add one ID and one function copy and paste it here write the ID called Contact message and this is validate message now let’s come back to the script file and copy this one here we will add validate message and in this one again we will add one variable so it will store the value written in the message box and after that we will add one variable where we will add any number required equal to so if we want 30 characters then we will add 30 characters is required and here let’s add another variable and it is left left equal to required minus message do length so it will give the value how much characters is left and now we will add the condition if left greater than zero it will be giving an error message message error dot inard HTML and then it will return false and if there is no such error and the character is more than 30 then it will display a check sign just copy this one paste it here and here we will add message error. innerhtml that’s it here it will be this one message refresh the website and now you can see if I write something 29 more characters required if I delete this one it will display 30 more characters required and if we write some text here and now you can see the error message has gone and we will get the check icon so this message box validation is also working fine next we have to add the validation when we will click the submit button so let’s come back in this button we will add onclick and here let’s add return space and one function validate form next we have to Define this function called validate form in the JavaScript so let’s copy this one come back to the Javascript file and here we will add a function validate form and in this one first it will check all the functions that we have added in the different input field so here we will add if exclamation validate name then we will add exclamation validate phone in the series wise we are adding so this condition we check if any of these are false then it will display an error message so here we will add submit error dot inner HTML and one message like this and after that it will also return false after adding this again refresh the website and simply click on the submit button and you can see here it is displaying please fix error to submit so M submit but right now this error message will be displayed continuously so we have to hide this message after a few seconds so let’s come back and here we will add submit error dot style do display it will be block so it will be visible and here we will add set timeout display none so after 3 second it it will hide the error message which is please fix error to submit so this message will be displayed for 3 second and after 3 second it will be hidden because we are adding display none in the set timeout and it will return false so it will not submit the form so let’s check this one and if I click here you can see this message will be hidden after some time you can see this message is hidden so this complete form is working fine right now let me check check all these input field and if I write a name here then we will add one phone number and any email ID and message after collecting all the input field if I click on sub MIT it will submit the form successfully without any error message so it is working fine so we have completed this form validation using JavaScript in this video we are going to learn how to create an image gallery that will slide horizontally using Mouse wheel usually when we rotate the mouse wheel the web page scroll down or a scroll up but if I take cursor over this image gallery and rotate the mouse wheel it will scroll the gallery horizontally either in the left side or right side in this image gallery we have added two control icons also that is for the backward and forward we can click on these icons to scroll the gallery to the left side or right side we have added one more effect if I take cursor over this image you can see the image becomes colorful all the images are gray right now when we take cursor it becomes colorful and you can see the image size is also increasing when we take cursor so we will create this horizontal scroll with mouse wheel using HTML CSS and very simple JavaScript this will be very good JavaScript mini project for your resume now let’s start the video here I have this folder and in this folder I have one HTML file one CSS file and another folder called images and here you can see some images and two icons you can find all these images download link in the video description now I will open these files with my code editor which is Visual Studio code so this is the HTML file where I have added the basic HTML structure and this one is the CSS file in this HTML file I have added this title then this link tag that will connect the CSS file now we will add the code within this body tag so here we will create one div with the class name gallery and within this Gallery we will create another div and in this div we will add span and inside this span we will add the first image with the IMG tag here we will add the file path of the image it is images / image1.png Let’s duplicate this line and we will add the another image image 2 and three after that let me open this web page with browser so you can see three images on this web page now let’s come back and here we will copy this class name and come back to the CSS file here first we will add the Cs for the body and here in this body we will add the background after that add that class name Gallery here we will add the width it will be 900 pixel and display Flex after that we will add gallery and div for this div let’s add the width of 100% display grid and grid template column Auto auto auto so we will get three image in one row after that we will add grid gap of 20 pixel and padding of 10 pixel then we have the IMG tag so here we will add gallery div and IMG width will be 100% for the image now you can see perfect size for these images next we will add three more images so let’s come back and duplicate this div and replace the image file name it is 456 so we have total six images you can see the images size becomes small so let’s come back and here we will add Flex none now you can see it is perfect size for the image and you can see the horizontal scrolling here the complete website is scrolling so let’s come back and uh here in this Gallery we have to add overflow X scroll now only this Gallery will scroll the gallery width is 900 pixel and it is scrolling inside that div next we have to hide this horizontal scroll bar so let’s come back and here we will add gallery and webkit scroll bar display none so that horizontal scroll bar is hidden but we cannot scroll it with the mouse wheel so let’s come back and uh Above This Gallery we will add another div with the class name Gallery WAP and in this one we will add one image and file name back do PNG then another file name next. PNG here we will add ID back BTN and next vtn and let’s remove it and add it here within these images so first we have the back arrow then all images and again next Arrow you can see the back arrow at the top and the next Arrow at the bottom here we will add gallery W display Flex align item Center and justify content Center then we will add the margin of 10% Auto you can see it is horizontally centered now just come back and copy this ID back vtn then next vdn we are adding hashtag because it’s an ID here we will add the width 50 pixel cursor pointer and margin 40 pixel now the size for the icons are perfect next we will add the hover effect on these images so let’s come back and here we will add gallery div IMG and hover and uh let’s add filter gray SK zero the G scale will be zero and come here and we will add cursor pointer and transform scale 1.1 so it will increase the size just copy this filter gray scale and add it here and let’s add 100% so the default gray scale will be 100% so the image will be gray let’s add the transition transform 0.5 seconds so it will take5 seconds to increase the size you can see the size is increasing and the image becomes colorful when we take cursor so we have added the hover effect after that we have to enable the horizontal scroll using Mouse wheel so just come back and here above this closing body tag we will add a script tag in this script tag we will add the JavaScript so here we will add let scroll container equal to document dot query select and we will select this one do Gallery so we are selecting this class name after that we will add let back vtn equal to document. get element by ID because we have the ID here back vtn so write it here now duplicate this line and it will be next vtn so we have selected the gallery div then next vtn and back vtn after that let’s call copy this one add it here here we will add add event listener and it will be wheel so it is wheel event then we will add this Arrow function and when we will rotate the wheel this function will be executed so here we will add EVT do prevent default it will prevent the default feature that scroll the web page down or up next we will add the scroll container scroll left plus equal to EVT dot Delta y after that come back to the website and if I take cursor over this image and rotate the mouse wheel this slider is scrolling we can scroll in the left direction or right direction you can see this image gallery is scrolling horizontally with the mouse field now we will add the click feature on this back arrow and next Arrow so let’s come back and hit we will add next BTN do event listener click because we will add the click function here also we will add the arrow function and this function will be executed when we will click on the icon here we will add scroll container do scroll left plus equal to 900 because the width is 900 for the gallery again duplicate it and here we will add back BTN and it will be minus equal to 900 that’s it after that let’s come back and if I click on the back button it is a scrolling the gallery to the left side and if I click on the right button it is a scrolling the gallery to the right side but when we click on these icons it immediately scroll it by 900 that’s why we cannot see the scroll animation so let’s come back and here we will add scroll container dot Style dot scroll behavior and we will add the scroll Behavior smooth let’s copy it and paste it here same thing now just come back and if I click here you can see it will scroll smoothly you can see this Gallery is scrolling horizontally when we click on these next or previous button and we can scroll it using the mouse wheel also but you can see this mouse wheel scroll is not smooth right now so let’s come back and uh here copy and paste it in this V event and here we will add Auto that’s it after adding this let’s come back now if we rotate the mouse wheel this Gallery is scrolling smoothly and when we click on the icon here also it is scrolling smoothly and we have the hover effect also so finally we have completed this beautiful image gallery that scroll horizontally using the mouse wheel in this video we will learn to make a digital clock using JavaScript let’s check the current time in my laptop at the bottom right corner so the time is exactly same as the time displaying on my website we will Design This digital clock using HTML and CSS then we will update the local time using JavaScript this is very useful JavaScript project for your job portfolio so let’s start to make this digital clock using JavaScript a step by step here I have this folder and in this folder I have added one index.html file one style. CSS file let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added the margin padding font family and box sizing these CSS properties are applicable for all the HTML elements in this HTML file I have added this title digital clock using JavaScript e tutorials and then I have added this link tag that will connect the HTML and CSS file because here I have added hdf style.css now we will add the code within the body tag so so here let’s create one div with the class name hero and now we will add the CSS for this class name write this class name here in this CSS file and here we will add the width height main height will be 100 VH then we will add the background and in this background we will add the linear gradient color here we will add one angle and two color code then we will add the color this will be the white color and let’s add the position relative after adding this let me come back to the folder and open this HTML file with any web browser so you can see this gradient color on the complete web page let me close this browser and I will open it with the visual studio code extension called live server so that it will refresh the web page automatically whenever we will add any changes in the code file and save the code file so you can see the same web page again with the gradient color now let’s come back and within this div with the class name hero here we will create another di with the class name container inside this container we will create another with the class name clock and in this clock let’s add the time like this save this and open the web page you can see this time here at the top left corner 0 so let’s add some CSS let’s come back and here we have the class name container just add it here in this CSS file and here we will add the CSS for this content container we will add the width it will be 800 pixel and then we will add the height height will be 180 pixel after that we will add the position absolute top 50% left 50% and transform translate – 50% and – 50% so that this element will be in the center of the web page for now here we will add one background so let’s add the background red and open the web page so you can see this red color of box in the center of the web page now we’ll remove this color let’s come back to the HTML file and here we have the class name clock so let’s add the CSS for this clock here we will add the width and height 100% after that we will add the background and in the background we will add some color with less opacity so we will add rgba so this is the color code for the background then we will add the Border radius of 10 pixel and uh let’s add display Flex align items Center and justify content Center so that the text inside this clock will be in the center and after that come back to the web page you can see this color in this box now we will add two other elements that is a square and circle so let’s come back we will add the element with the help of cudio elements so here in this container we will add two cudio elements which which is before and after so add this container then write double column before and in this before we will add content content will be empty then let’s add the width and height width will be 180 pixel and height also same 180 pixel then we will add the background here we will add one color code then border radius will be 5 pixel very small and Position will be absolute left Min – 50 pixel and top also Min – 50 pixel then right Z index minus one after adding this you can see one element at the top left side of this horizontal box now we will create another element that that will be one Circle so let’s come back and duplicate this one here we will add after this is same content width height and we will change the background color and here we will add border radius of 50% so that it will be a circle Position will be absolute and here it will be on right side so right minus 30 pixel and it will be at the bottom so write bottom minus 50 pixel that’s it now you can see one Circle in the right side next we have to make this horizontal box blur so let’s come back and here we have the clock so in this clock we will add backdrop filter blood it will be 40 pixel after that you can see the web page it looks good next we have to change the size for this text and we will add the name also like minutes second hours so let’s come back and uh here let’s remove this one instead of writing the text directly we will add one span tag and in this span first we will add 0 0 Let’s duplicate it here we will add the column after updating this you can see again it is same we have just added the span tag for each number let’s come back here we have the span inside this clock so come to the CSS file let’s add dot clock and a span so for each a span we will increase the font size so let’s add the font size 80 pixel we will add the width 11 10 pixel and uh display will be inline block and text align Center and P relative after that you can see some space between these numbers and the font size is also increased next we will add the name like hours minutes and seconds so let’s come back to the code again and let’s copy this clock span and write the sudo element after and this after let’s add the content in this content it will be empty font size 16 pixel position absolute bottom – 5 pixel and left 50% transform translate x – 50% in this content we can add the text so let’s add ours it will be 16 pixel PX and after applying this you can see we have the text here hours hours hours like this and we have to remove this hours and it will be different in the first one we will add hours then minutes and seconds to change this one we will come back to the the HTML file and in this HTML file let’s add some IDs in the first span we will add the ID HRS for the RS then in the second number here we will add ID Min n that is for minutes and in the last one we will add the ID SEC for the seconds and let’s come back to the CSS file and remove this content from here remove this and here at the end we will add that ID like HRS and here we will add sudo element after write content ours duplicate this line it will be minute and second and here also minutes and seconds after adding this let’s come back to the website so you can see in the first number we are getting hours then in the second one minutes and last one seconds next we have to update the time and uh to add the current time we need to add the JavaScript so let’s come back to the HTML file and here at the bottom just above this closing body tag we will add a script open and closing tag and within this script we will add all our JavaScript code so here we will add let HRS equal to document. getet element by ID and the ID is HRS that is from here let’s duplicate it it will be minute and second to get the date and time we need to use the JavaScript object called date so here let’s add let current time equal to new date and if we print this current time let’s add console.log current time you will see the local time and date let’s come back to the website and open the console here you can see it is displaying Tuesday May 30 2013 and this is the time so it is our local time now we have to get the time only we have to remove the date and day so let’s come back here you can use the JavaScript methods get hours get minutes and get seconds to get the hours minutes and seconds from this time so let me show you here we will add current time dot get ours and open the web page you can see it is displaying the hours 15 if we come back and add get minutes it will display the minutes in current time 37 and like that we can get the seconds also so let’s display all those things here we will add HRS do inner HTML equal to current time dot get hours so it will display the hours of current time duplicate this it will be minutes Min and it will be seconds second and here also we will update the methods get minutes and another method called get seconds so after updating this let’s come back to the website you can see the current time here which is 15 38 and 39 let me show you my laptop current time it is same 1538 but you can see this time is not updating so we have to update it it at every second for that we will use the set interval so let’s come back and we will add all those things in a set interval here we will add comma 1000 milliseconds that means 1 second and and within this we will add all these code so it will execute this code at every 1 second now just come back to the website again and you can see this seconds is increasing and this minute is also increasing right now it is displaying only one digit so suppose you have the numbers less than 10 we can add one zero in front of that number for that let’s come back to the JavaScript again and here we will add one if condition so we will add the inline if condition copy this and here we will add plus this one and here we will add the condition if less than 10 if it is less than 10 then it will add one zero or if it is not less than 10 then it will be empty like this so we have to add the same thing in the other one here and here and update the methods it will be minutes minutes and seconds after updating this let’s come back to the website again and finally you can see it will display the double digit in the numbers now you will see it is starting from 0 1 02 03 like that so finally we have completed our digital clock using HTML CSS and jav JavaScript in this video we will create a product page design that you can use on e-commerce website here I have added a product image on the left side and product details on the right side in this product image we have some control buttons when I click here you can see the product image is changing in the product detail section you can see the product name price and offer after after that we have some select option for variable products we can select the size and color of the product then we have input field to select the product quantity and at the bottom you can see by now button we will create this product page design using HTML CSS and JavaScript here in this folder I have created one index.html file one style. CSS file and you can see another folder with some images you can find all the images download link in the video description let me open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added basic HTML structures and this one is the CSS file and I have connected this CSS file with this link tag in the HTML file now we will add code in the body tag so here we will create one dip with the class name container in this container we will create another div and let’s add the class name product in this product we have to create two columns so first we will create the left TI with the class name Gallery where we will add the product image gallery and let’s add another div with the class name details where we will add the product details like product title description and buttons next we will add the image in the first div which is image gallery so here we will add one IMG tag write the file path of the image so this is the images / image 1.png after adding this let’s come back to the folder and open our HTML file with any web browser so you can see this image on the web page let me close this browser and I will open this browser with the visual studio code extension called live server so that it will refresh the web page automatically whenever we will add any changes in the code file and save the code file so you can see the same B page page again now let’s come back and we will add the CSS so let’s copy this container write it here in the CSS file here we will add some CSS properties like width then we will add Min height then we will add the background in this background we will add one color code let’s add the display Flex align items Center justify content Center so that the product will be in the center of the web page let’s copy this class name product write it here so for this product we will add the width it will be 90% and maximum width will be 750 pixel then we will add display Flex so left and right column will be side by side now we will add the CSS for this gallery and details so let’s add this Gallery here so for this Gallery we will add Flex basis 47% it means width is 47% after that we will add the background so this is the color code now in this Gallery we have one image so again write this one then write IMG tag so for this image we will add the width it will be 100% and display it will be block let’s add some padding from the top 100 pixel and after adding this again refresh the website you can see this image on the web page next we will add the CSS for the right column which is details so here we have details just copy this one write it here in this CSS file so for this one we will add the flex bases 53% it is width 53% so now we will add the background it is white and we will add some padding it is 40 pixel and let’s add the padding from left side it will be 60 pixel now you can see this white color in the right side and in the left side you can see this image now we have to increase the size for the left one so here in this Gallery we will add transform scale 1.08 so it will increase the size let’s add the Box Shadow also so here we will add box Shadow next we will add the same box shadow in the second column which is details so just copy this one and paste it here after adding this let’s come back to the website again you can see the size for the left column is increased and you can see the shadow also now we will add some details in the second column so here in this second div we will add space and here we will add one title in H1 it will be the name of the product casual t-shirt next we will add another text in H2 so it will be the price of the product again we will add H3 and here let’s add the discount 30% off after that we will add some description in P tag so this is the description after adding this you can see this title and description on the web page so we have to design these things so just copy this class name details WR it here and here in this details we have the first title in H1 so for this H1 we will add this color code and we will add the font size you can see different size for this text again write this class name then write H2 for the second Title Here we will add another color and font size it will be 30 pixel and we will also change the font weight 600 let’s add this class name again and here we will add H3 for the discount so in this one we will add color and margin from the bottom to add some space at the bottom so you can see these titles looks good next we will add the CSS for this description for that we will come back back and here in this details here only we will add font size it will be 13 pixel and we will change the font weight let’s add the color after adding this this description is also looking good next we have to add some radio buttons where we can select the size and color so let’s come back and after this P we will add one form tag and in this form we will add one div so let’s add the div with the size select and in this size select first we have to add one text in P tag it is size then we will add one label in this label we have to add the four it will be small and inside this label we will add one input field so in this input field input type will be radio so it will be a radio button then we will add the name let’s add size and in this ID we will add the same thing which is here for this ID and for should be shame after that we will add a span and in this span we will add s s means small let’s duplicate this label and change the ID and for so this will be medium and here also medium this will be M duplicate again and write large and ID also large and a span L again we will add this one then right extra large for Excel let’s duplicate again and this is the last option dou x large double XL after adding this again refresh the website you can see this text size then we have the radio buttons for SML Xcel and double XEL you can select these radio buttons now let’s come back to design this one we will copy this form here we will add details form so for this form we will add the font size it will be 15 pixel then we will add the font weight then we have the size select so let’s copy this one write it here size select in this one we will add display Flex so that the text and radio buttons will be in the same horizontal line aligned items will be Center and some margin from the top to add some space again copy this one here we will add P so for this P tag we will add the width it will be 70 pixel now you can see this size here then we have some space and after that these radio buttons and text next we have to change the color of these text which is SM L XL so let’s come back and copy this one here we will add input then checked so if the input is checked we have to change the color of the span text so here we will add plus span and color we will add this blue color and we will also increase the font weight it is 600 so you can see when I select any radio button the color for the label text is changing and the font weight is also changing next we have to hide these radio buttons there will be only text copy this size select input and just add display none so it will be hidden you can see we have only text here and we can click over these text to select any radio button that is invisible so again come back here we will add site select then a span so for this span we have to add some space so first we will add some padding then margin from the right side and we will add the cursor pointer so it looks good and we can click on any text to select this one and the color and font weight is changing when we select any size so we have completed this size select let’s come back and after closing of this div which is for the size select or you can add it here just above this closing form tag here we will add one div with the class name color select where we will add radio buttons to select the color so in this one again we will add text in P tag it is color then we will add label for let’s add red color and in this for again we will add input input type will be radio then we will add name in this name we will add color and let’s add the ID red for and this ID should be same after that again we have to add one span and in this span we will add one class name so it is color one after adding this let’s duplicate this complete label total we have four colors so let’s change the color it is green and here also green and in this span we will add the class name color two now for the third one we will add blue and ID also blue this is color three now for the fourth we will add for pink ID pink and class name color four after adding this let’s refresh the website again you can see this color and then we have four radio buttons now we have to align all these in same horizontal line so again come back let’s copy this class name color select write it here in the CSS file and for this color select we will add display Flex then align items Center and some space from the top again WR this class name and in this one we have P tag so we will add width 75 pixel you can see it is in the same horizontal line we have some space after this color next we have to add different color with the each radio buttons so let’s come back and in this CSS file we will add this class name again then write span so for this span let’s add display it will be inline block then we will add width and height it will be 15 pixel after that we will add border radius it will be 50% so that it will be a circle after that we will add some spad so we will add margin right 15 pixel and cursor will be pointer now we have to add different color in each as span so we have added class name color 1 2 3 4 so for all these span we will add different color so here we will add color one and write background it will be R let’s duplicate it and we will change the class name color 2 3 4 and for all these class name we will add different color now we have added different background in all the span again refresh the website and here you can see we have different color circle with the each radio buttons next we will hide these radio buttons only color will be visual so let’s come back and copy this class name color select then input here we will add display none that’s it so it will be hidden you can see we have colors here now we have to select the color so let’s come back and here we will add color select input checked so whenever the input button is checked we will Design the span so here we will add plus a span transform scale 0.7 so it will reduce this size size then we will add box shadow in this Shadow we will add two Shadow this will be in the white color and again we will add the same thing let’s add a comma and write another Shadow so here we will add black color and it will be 6 pixel so after adding this again refresh the website and you can see see when we click on any color there is one circle around it so this select option is working next we will come back to the HTML file and here before this closing form tag here we will create another div with the class name quantity select inside this div we will add one title in ptag it is quantity and again we will add one input field and input type will be number and value it will be one after adding this let’s refresh the website you can see this quantity and this input field with the value one and we can increase and decrease this value with these Arrow let’s come back and copy this class name quantity select write it here in the CSS file here again we will add display Flex align items Center and some space so margin top 20 pixel WR this class name again then write p and for this P we will add width it will be 75 pixel you can see it is in the same horizontal line next we will Design This input field let’s come back and here we will add quantity select input so for this input field we will add the background this is the color code for the background then we will add border it will be zero and outline it will be zero let’s add some padding inside this input field then we will add width it will be 50 pixel and B radius it will be 12 pixel you can see this input field looks good we can increase and decrease the value by clicking on this up and down buttons after adding these input fields we will add one submit button or a buy button let’s come back and just above this closing form tag we will add one button and button text will be by now you can see this button here next we will Design This so let’s come back to the CSS file here we will add form button in this button we will add the background this color code then we have to change the button text color after that increase the font size of this button text then width it will be 100% and some padding it is 10 pixel and Border radius will be 30 pixel after that we will add border zero and outline Z then we will add margin from the top to add some space from the top and box Shadow here we will add this box shadow then cursor pointer after adding this again refresh the website and you can see this button looks good so we have added all the contents in the product detail section now we will add controls option in the gallery where we will click and change the gallery image so let’s come back and in this Gallery after this image we will add one div with the class name controls inside this div we will add three asan and with this span we will add the class name BTN just duplicate it so we have three span here with the class name BTN next we have to design this one so copy this class name controls write it here in this CSS file here we will add position Position will be absolute then bottom it will be 40 pixel and right it will be 20 pixel so this control buttons will be in the bottom right side of the gallery here we will add BTN so for this span we will add display block and we will add the width and height 10 pixel then we will add border radius 50% so that it will be one small circle then we will add the background so in this background we will add the color code in RGV it will be white colored with 50% opacity then we will add some margin and cursor it will be pointer so here in this controls we have added position absolute so we will add position relative in this gallery you can see we have added Gallery over here at the top so in this one we will add position relative so this control buttons will be in the gallery only after adding this position relative again refresh the website and you can see these three Circle in this product Gallery next we have to add one color in the first one so it will look active so let’s come back and here in this first button we will add one one more class name active after adding this let’s come back to the CSS file at the bottom we will add BTN do active and here just we will change the color let’s add the background and this color code after adding this again refresh the website you can see this blue color in the first dot next we have to add the click function whenever we will click on any other dot the image should change so for that we will add the JavaScript so let’s come back and here in this HTML file we have to add the click feature on this span where we have added class name BTN and we will change the image in this IMG tag so here in this IMG tag we will add one ID also so let’s add the ID product IMG after adding this let’s come back at the bottom just above the closing body tag here we will add a script tag where we will add the JavaScript inside this we will add let product IMG equal to document. get element by ID and you already know the ID which is product IMG next we will add the let BTN equal to document Dot get Elements by class name because we have added the class name BTN in all the span after that we have to add the click feature on the button so here we will add BTN 0. on click equal to function and inside this function we will add the product img.src because we have to change the image so let’s add product img.src equal to the file path of the image so let’s come back to our folder you can see we have one folder called images and inside this folder we have the image called image 1.png 2.png and image 3.png so this is our file path so let’s come back and here we will add images SL image 1 do PNG so this is the first image after adding this let’s duplicate this one and here we will add BTN 1 and BTN 2 for the second button and third button and we will change the image also it is image 2.png and image 3.png after adding this let’s refresh the website again and if I click on the second button you can see the image is changing if I click on the third one image is changing right now the image is changing when we click on these dot but the color is not changing for the dot which is active so we have to change this one we have to change the active color for the circle so let’s come back and here we have added the class name active so we have to remove this class name through JavaScript and this class name will be added in the particular Circle where we will click to remove remve this one we will add for BT of BTN bt. classlist do remove and inside this remove we will add the class name which is active so it will remove the active class name from all the circles so after removing the class name we have to add this class name on the particular Circle where we have clicked for that here we will add this do class list do add and the class name which is active so first it is removing the class name from all the circle and adding the class name on the particular Circle let me copy this one and add it in all the function just copy and paste in the second and third one that’s it again refresh the website and you can see if I click on any Circle the image is changing and the color is also changing when we click on the second one the second Circle becomes blue when we click on the third one then third circle becomes blue so finally we have created this image gallery and product description for this product page I hope this JavaScript course will be helpful for you if you have any question you can ask me in the comment section please like and share this tutorial and also subscribe my channel greatest Tech to watch more videos like this one thank you so much for watching this video

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!

JavaScript Programming: From Fundamentals to Practical Applications

JavaScript Fundamentals Study Guide

Quiz

Quiz Answer Key

Essay Questions

Glossary of Key Terms

JavaScript Tutorial: A Beginner’s Guide

JavaScript FAQs: A Quick Reference

Frequently Asked Questions about JavaScript

JavaScript Fundamentals: Variables, Data Types, and DOM Manipulation

JavaScript DOM Manipulation Essentials

JavaScript Events and Event Handlers

JavaScript Prototypes: Inheritance, Properties, and Methods

JavaScript and the DOM: Manipulating HTML Elements

The Original Text

Discover more from Amjad Izhar Blog

Comments

Leave a comment Cancel reply

More posts

15 Easy Freelance Jobs That Pay Well

Al Quran Surah Al Baqarh, Al-e-Imran, An Nisa Fast Recitation سورہ البقرہ، آل عمران، النسا

Legitimate Transcription Jobs From Home

12 Scientifically Proven Signs of You’re in Love with someone Head Over Heels!

JavaScript Programming: From Fundamentals to Practical Applications

JavaScript Fundamentals Study Guide

Quiz

Quiz Answer Key

Essay Questions

Glossary of Key Terms

JavaScript Tutorial: A Beginner’s Guide

JavaScript FAQs: A Quick Reference

Frequently Asked Questions about JavaScript

JavaScript Fundamentals: Variables, Data Types, and DOM Manipulation

JavaScript DOM Manipulation Essentials

JavaScript Events and Event Handlers

JavaScript Prototypes: Inheritance, Properties, and Methods

JavaScript and the DOM: Manipulating HTML Elements

The Original Text

Share this:

Discover more from Amjad Izhar Blog

Comments

Leave a comment Cancel reply

More posts

15 Easy Freelance Jobs That Pay Well

Al Quran Surah Al Baqarh, Al-e-Imran, An Nisa Fast Recitation سورہ البقرہ، آل عمران، النسا

Legitimate Transcription Jobs From Home

12 Scientifically Proven Signs of You’re in Love with someone Head Over Heels!