I agree boss it is a GEM man i dont think any teacher can teach with this honesty and dedication and ofcourse in depth. Hitesh Sir huge respect to you. We as tech learners will definitely wait but keep on bringing such courses no wonder how much time it takes. Amazing
I am a 4th year IT student , And I am watching this video for my interview preparation , love the way he is teaching , the clarity of concepts he is providing and the completeness of the concepts.
Thank you for your amazing JavaScript videos! I've been learning a lot from them, and they've been really helpful in my journey to become a better JavaScript developer. I especially appreciate the way you explain complex concepts in a clear and concise way. Your videos are always well-organized and easy to follow. Thank you again for all your hard work!
@@bhaviljainnnnnnn Both parts will help you to clear Javascript concepts. Use both parts as base and build projects on it, then you will master each and every concepts. Interview questions are entirely depends on job you are going to apply. But with strong base of Javascript concepts and 2 industry grade projects, you'll feel confident to face any Javascript Interview. We are always learning by doing, All the best 👍
Pichle 3 saal se bhut Sara videos dekha hai lekin ap ke videos jaisa itna accha koi video nhi laga, itna easy tarike se ap details me samjhate hai wohi bhut helpful hai hum jaise students ke liye. apka Jo har ek chiz me consistency rakhte hai woh bhut acha lagta hai,, jitna vi tarif Kiya jaye kaam hi hoga apke liye. Thank you very much sir 🙏🏻
Never thought that someone could teach that well. Tried several sources but believe me, you will never get the quality content He is teaching anywhere. ❤❤
Today on 17th , December 2023 I finished this playlist . I am feeling so confident in Javascript now , I will start making some projects on Js as soon as possible . Thankyou Hitesh Sir! This is a wonderful playlist . Please never stop making videos.
@@i_am_groot3787that if condition and setting to null was just part of optimised code you don't necessarily need to do that. The reason why it starts working is because !intervalId = !(null) = !(false) = true, and if condition runs on true
I have completed both part sir 🎉 believe me first time I feel confident in js . Thank you so much sir for amazing series . Kash ap 3 Sal pahle mile hote to aaj 3 Sal ka experience hota JS me .
I started this series on 27/11 and today I completed it and I can definitely say that it was the best series till date and now I know a lot than I knew JS earlier.It took time for me to complete for I can say to all the peeps who will visit this in future that it would a very beautiful learning journey .Thanks sir ….Next goal React 😎.
@@baazigar5 whether u talk about HTML , CSS or JS. or any frameworks all of them have alot of concepts and functions in them....But the thing that matters is if you are able to fulfill the requirements or not? So, one should not be focused on completing every single thing in JS but he/she should focus on what exactly matters.
I have been searching JavaScript tutorial but literally never found tutorial like this on java script. Each and everything is explained in to much depth with ease and hats off to this guy for this great tutorial for us. Love from Pakistan : )
4:48:41 function getRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; } const bgChange = function(){ const randomColor = getRandomColor(); document.querySelector('body').style.backgroundColor = randomColor; } let setBG; document.querySelector('#start').addEventListener('click', function(){ setBG = setInterval(bgChange,1000); }); document.querySelector('#stop').addEventListener('click', function(){ clearInterval(setBG); setBG = null; }) mine is working fine even after declaring setBg to null after stopping the change of bg color PS: i understood the problem with this, in this case if user click start button multiple times, each time there will be new interval set, so color will start changing more faster, and will have issue in stopping it. figured out using help of gpt
3 saal sy programming pad raha huu Lekin aaj aisa lagrha hai jaisay pehli baar real programming pad raha huu agar aap pehlay milay hotay toa aaj meri job lag chuki hoti
Completed this series and I can tell from now on I don't have to watch any more videos on pure javascript...this is the end of watching tutorials and beginning of writing more code!! Thanks Hitesh for this amazing and in-depth knowledge✨❤️
Man You are at GOD level . love the way you improved yourself . if someone sees your earlier videos in English channel they can easily see the improvement of your teaching skill .
1:16:40: childNodes discussion 1:48:32: DOM Finished, thank you Sir for teaching with this much clarity!❤ 2:14:12: Project-02 (BMI Calculator) 4:08:44: Blocking v/s Non-blocking Code (depends on the use case) 4:09:34: JS Runtime Environment 4:11:08: Yes Sir, we want this kind of series for node js as well 5:22:55: XHR API Request Assignment 5:23:35: console log discussion 5:58:33: promise chaining using then() method 6:01:20: finally() method use case 6:03:50: handling promise using, then v/s async-await (async-await starts from here) 6:17:28: then-ables for handling promise chaining, the real-life use cases are really helpful to understand how things work under the table!🙌 6:19:00: why fetch execute earlier than any other async codes? (covered in next video on fetch) 6:37:15: HTTP errors in fetch request (senior developer wali baat, important for interviews) 7:38:52: Prototype Discussion , after 'new' keyword
please make one video on the project which are added later in the future, after completing the course. We don't know what to do in those projects. I cannot understand just from the code provided in the solution
I have completed both. If i just say thank you Hitesh bhaia , that wouldn't be fair enough. Even the experience and knowledge that you have share is totally incomparable. Long live Hitesh bhaia and i pray for your happiness. Love from Bangladesh.
9:26:00 abb yeh hi toh baat hai real knowledge ki , experience ki purana bhi karke batayenge aisa nhi hai ki bhaga de fta fat !! Hatts off sir free toh nhi honi chaiye thi yeh aisi feel aarhi hai
4:35:36 ..., document.querySelector('#start').addEventListener('click',function(){ const Interval = setInterval(function(){ console.log("Kapil",Date.now()); },1000) document.querySelector('#stop').addEventListener('click',function(){ clearInterval(Interval); }) }); i used nesting of events , if there is another way of doing this then please comment.
4:44:49....., const body = document.getElementsByTagName('body')[0]; document.querySelector('#start').addEventListener('click', function(){ const randomColor = setInterval(function(){ const hex = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += hex[Math.floor(Math.random() * 16)]; } body.style.backgroundColor = color; }, 2000); document.querySelector('#stop').addEventListener('click', function(){ clearInterval(randomColor); body.style.backgroundColor = ''; }); }); for automatically changing color , my version of code
I've successfully completed both parts, and I must say, it's an absolutely fantastic series! I would like to express my sincere gratitude to Hitesh Sir for his valuable guidance and support throughout.🥰🥰🥰🥰🥰🥰🥰🤩
# Document Object Model (DOM) Notes 1 ## Introduction - 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. - The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. ## Basic Concepts ### Nodes - **Node**: The basic unit of the DOM, representing a single point in the document tree. - **Element Node**: Represents an HTML element (e.g., ``). - **Text Node**: Contains the text content inside an element. - **Attribute Node**: Represents attributes of an HTML element. ### The Document Object - The `document` object represents the whole HTML document. - Methods like `getElementById`, `querySelector`, and `createElement` allow interaction with the DOM. ## DOM Tree - The document is represented as a tree structure, with the root being the `document` object. - **Parent Node**: A node containing other nodes. - **Child Node**: A node within another node. - **Sibling Nodes**: Nodes that share the same parent. ## Accessing Elements ### Methods - `document.getElementById('id')`: Returns the element with the specified `id`. - `document.getElementsByClassName('className')`: Returns a collection ( HTML Collection ) of elements with the specified class name. - An HTMLCollection is a collection of HTML elements, similar to a NodeList, but with some key differences. It's an array-like object, meaning it has a length property and allows indexed access, but it's not a true array. - We have to convert it to an array to use functions on it. - `document.querySelectorAll('selector')`: Returns a NodeList of elements matching the CSS selector. - NodeList : A "NodeList" is a collection of nodes, typically returned by methods like 'document.querySelectorAll()' or 'document.getElementsByClassName()'. - It represents a list of DOM elements, which can be accessed like an array, although it's not a true array. - Although Nodelist is not an array but it can be accessed like an array by using indexing. - `document.getElementsByTagName('tagName')`: Returns a collection of elements with the specified tag name. - `document.querySelector('selector')`: Returns the first element matching the CSS selector. ```javascript // Accessing Elements const elementId = document.getElementById('myElement'); const elementsClass = document.getElementsByClassName('myClass'); const elementsQuery = document.querySelectorAll('.myClass'); const elementsTag = document.getElementsByTagName('p'); const elementQuery = document.querySelector('#myElement'); ``` ### Modifying Attributes - `element.setAttribute('attribute', 'value')`: Sets the value of an attribute. - `element.getAttribute('attribute')` : Gets the attribute value. - `element.removeAttribute('attribute')`: Removes an attribute. ``` javascript // Modifying Attributes // Example Element let title = document.getElementById('title'); // Setting an Attribute title.setAttribute('class', 'highlighted'); // This sets the 'class' attribute of the 'title' element to 'highlighted'. // Getting an Attribute let classValue = title.getAttribute('class'); console.log(classValue); // This retrieves the value of the 'class' attribute, which is 'highlighted'. // Removing an Attribute title.removeAttribute('class'); // This removes the 'class' attribute from the 'title' element. title.style.backgroundColor = '#212121' title.style.color = '#fff' title.style.padding = '10px' title.style.margin = '10px' title.style.borderRadius = '10px' title.style.width = '100%' title.style.height = '100%' ``` ### What is difference between 'textContent', 'innerHTML' and 'innerText' - `textContent`: Returns the text content of an elements, including text within script and style elements. - `innerText`: Returns the text content of an element, excluding text within script and style elements. - `innerHTML`: Returns the HTML content of an element and its descendants. ### Example ``` javascript // Accessing elements in Nodelist const headCollection = document.querySelectorAll('h2') headCollection[0].style.color = 'orange' // Accessing elements in HTML collection const listName = document.getElementsByClassName('list-item') console.log(listName) // converting HTML Collection into an array const convertedArray = Array.from(listName) console.log(convertedArray) convertedArray.forEach( (item) => { item.style.color = 'orange' }) ```
# Document Object Model (DOM) 1 ## Introduction - 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. - The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. ## Basic Concepts ### Nodes - **Node**: The basic unit of the DOM, representing a single point in the document tree. - **Element Node**: Represents an HTML element (e.g., ``). - **Text Node**: Contains the text content inside an element. - **Attribute Node**: Represents attributes of an HTML element. ### The Document Object - The `document` object represents the whole HTML document. - Methods like `getElementById`, `querySelector`, and `createElement` allow interaction with the DOM. ## DOM Tree - The document is represented as a tree structure, with the root being the `document` object. - **Parent Node**: A node containing other nodes. - **Child Node**: A node within another node. - **Sibling Nodes**: Nodes that share the same parent. ## Accessing Elements ### Methods - `document.getElementById('id')`: Returns the element with the specified `id`. - `document.getElementsByClassName('className')`: Returns a collection of elements with the specified class name. - `document.getElementsByTagName('tagName')`: Returns a collection of elements with the specified tag name. - `document.querySelector('selector')`: Returns the first element matching the CSS selector. - `document.querySelectorAll('selector')`: Returns a NodeList of elements matching the CSS selector. ### Modifying Attributes - `element.setAttribute('attribute', 'value')`: Sets the value of an attribute. - `element.getAttribute('attribute')` : Gets the attribute value. - `element.removeAttribute('attribute')`: Removes an attribute. ### Example ```javascript document.getElementById('myElement'); title.style.backgroundColor = '#212121'
# JavaScript DOM Manipulation 3 ## Code ### Creating an element using JS ### createElement : `createElement` is a method for creating an element with the specified tagname const div = document.createElement('div'); console.log(div); ### Setting properties of the div div.className = 'main'; // Sets the class name of the div div.id = 2; // Sets the ID of the div div.setAttribute('title', 'generated title'); // Sets a title attribute for the div ### Styling the div div.style.backgroundColor = "green"; // Sets the background color div.style.color = "beige"; // Sets the text color div.style.padding = '12px'; // Sets the padding div.style.borderRadius = '10px'; // Sets the border radius div.style.textAlign = "center"; // Sets the text alignment ### Adding text to the div ### addText: The `addText` variable is used to create and add a text node to an HTML element. const addText = document.createTextNode("Chai aur Code"); // Creates a text node div.appendChild(addText); // Appends the text node to the div ### Appending the div to the body ### appendChild: The `appendChild` method is used to add a child node to a specified parent node in the DOM. document.body.appendChild(div);
Start Date - 15 May (Afternoon) End Date - 17 May (Afternoon) One of the best series I have to say. Summary of last video -> When you will be working on a project, you will get stuck on many things and then you say, I didn't learn this thing, but no worries there, just go to MDN docs, chat GPT, stack overflow etc and try to solve it. And doing this will help you to learn many more new things.
I completed both parts, believe me, it's a gem. It will be worth watching it! Thank you Hitesh Sir ❤
My pleasure 😊☕️🙏
agreed
I agree boss it is a GEM man i dont think any teacher can teach with this honesty and dedication and ofcourse in depth. Hitesh Sir huge respect to you. We as tech learners will definitely wait but keep on bringing such courses no wonder how much time it takes. Amazing
is it a last part
@@akworld2739 no
I like this long video and want more like that in detail keep it up 🎉❤
Javascript in 1 shot in Hindi Part 1 and Part 2 🤍 complete in 12 days Happy😎😎🤩🤩
Project Section Timestamp -
1:52:00: Color Changer
2:14:05: BMI Calculator
2:31:06: Digital Clock
2:38:34: Guess Number
To anyone who is getting scared by the length of the video, I would say it is absolutely worth your time. Great series thank you, sir.
i agree'
It's not about 30 days english course.
Is this complete JS?
yes, Complete se bhi zyada he bhai@@baazigar5
@@baazigar5please refer to part zq first
I am a 4th year IT student , And I am watching this video for my interview preparation , love the way he is teaching , the clarity of concepts he is providing and the completeness of the concepts.
kis company me hua
placement???
Thank you for your amazing JavaScript videos! I've been learning a lot from them, and they've been really helpful in my journey to become a better JavaScript developer.
I especially appreciate the way you explain complex concepts in a clear and concise way. Your videos are always well-organized and easy to follow.
Thank you again for all your hard work!
10:09:32
@@youngsgrowthGreat story 🔥
are both parts enough to crack a job?
@@bhaviljainnnnnnn Both parts will help you to clear Javascript concepts. Use both parts as base and build projects on it, then you will master each and every concepts.
Interview questions are entirely depends on job you are going to apply. But with strong base of Javascript concepts and 2 industry grade projects, you'll feel confident to face any Javascript Interview.
We are always learning by doing,
All the best 👍
@@akashthoriyaI start this course without knowing html?
Hithesh Anna(Bhai) Back end shurukarne keliye hame kya previous knowldege hone chayiye?? kis programming language master karne chayiye???
Pichle 3 saal se bhut Sara videos dekha hai lekin ap ke videos jaisa itna accha koi video nhi laga, itna easy tarike se ap details me samjhate hai wohi bhut helpful hai hum jaise students ke liye. apka Jo har ek chiz me consistency rakhte hai woh bhut acha lagta hai,, jitna vi tarif Kiya jaye kaam hi hoga apke liye. Thank you very much sir 🙏🏻
Thank you, Hitesh sir! I have learned so many things. You don't know how much you're helping us Thank you, Thank you....🙏🏻🙏🏻.
Starting part 2 at 16 April 11:46 PM
Thankyou sir sir pls continue the quality which you delever
Never thought that someone could teach that well.
Tried several sources but believe me, you will never get the quality content He is teaching anywhere. ❤❤
start and stop timer //making start and stop timer
////////setInterval()/////////////////////
const sayDate = function(str){
console.log(str, Date.now())
}
let intervalId=setInterval(sayDate, 1000, 'hi')
//start
document.querySelector('#start',).addEventListener('click', function(){
//this will be continues infinitely
console.log('STARTED')
intervalId= setInterval(sayDate, 1000, 'hi')
})
//stop
document.querySelector('#stop',).addEventListener('click', function(){
clearInterval(intervalId)
console.log('STOPPED')
})
By Far The Best JS series available across the Internet ..... Thanks Sir For Providing This Series For Free ❤
Today on 17th , December 2023 I finished this playlist . I am feeling so confident in Javascript now , I will start making some projects on Js as soon as possible . Thankyou Hitesh Sir! This is a wonderful playlist . Please never stop making videos.
when did you start
i cannot understand how putting if condition it starts working at 4:49:50🙏🙏🙏🙏can u help
@@i_am_groot3787that if condition and setting to null was just part of optimised code you don't necessarily need to do that.
The reason why it starts working is because !intervalId = !(null) = !(false) = true, and if condition runs on true
Sir chai ki galat habit lg gyi h 😂
Quantity + Quality + Free = feels like a Wow. Thanks Hitesh,You are such a Amazing Creature in this Industry. keep it on please😍
4:35:45
const startV=document.querySelector("#start")
const stopV=document.querySelector("#stop");
let intervalId
startV.addEventListener("click",()=>{
intervalId=setInterval(()=>{
console.log(Date.now())
},1000)
})
stopV.addEventListener("click",()=>{
clearInterval(intervalId)
console.log("Stopped")
})
I have completed both part sir 🎉 believe me first time I feel confident in js . Thank you so much sir for amazing series . Kash ap 3 Sal pahle mile hote to aaj 3 Sal ka experience hota JS me .
English channel to tha inka. Well, der aye, durust aye : )
I started this series on 27/11 and today I completed it and I can definitely say that it was the best series till date and now I know a lot than I knew JS earlier.It took time for me to complete for I can say to all the peeps who will visit this in future that it would a very beautiful learning journey .Thanks sir ….Next goal React 😎.
on the way
I have recently completed part 1 and now i am in part 2. This is literally the best series ❤
Is this complete JS?
@@baazigar5 look its not like that.... But it covers almost everything. Hence, if you want to learn js then u can go with this series
@@baazigar5 whether u talk about HTML , CSS or JS. or any frameworks all of them have alot of concepts and functions in them....But the thing that matters is if you are able to fulfill the requirements or not?
So, one should not be focused on completing every single thing in JS but he/she should focus on what exactly matters.
Series Aisi banao ki log apne youtube teacher ko bhul jaaye aur hitesh sir ko yaad kare
Thank you so much sir this beautiful JavaScript Series. 01/10/20224 I complete my JS series. Again, thank you sir 💖💖💖💖💖
Teaching is an art, and you demonstrate it admirably
6:03:34-13july
This is by far the best and in depth javascript course on youtube. even better than some paid courses I checked.
I have been searching JavaScript tutorial but literally never found tutorial like this on java script. Each and everything is explained in to much depth with ease and hats off to this guy for this great tutorial for us. Love from Pakistan : )
Thank you so much sir ✨🤩🤩🤩
4:48:41
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
const bgChange = function(){
const randomColor = getRandomColor();
document.querySelector('body').style.backgroundColor = randomColor;
}
let setBG;
document.querySelector('#start').addEventListener('click', function(){
setBG = setInterval(bgChange,1000);
});
document.querySelector('#stop').addEventListener('click', function(){
clearInterval(setBG);
setBG = null;
})
mine is working fine even after declaring setBg to null after stopping the change of bg color
PS: i understood the problem with this, in this case if user click start button multiple times, each time there will be new interval set, so color will start changing more faster, and will have issue in stopping it. figured out using help of gpt
Excellent Series with in depth knowledge and practical implementation of concepts 🔥😍🥰
Hi.. sir, it's possible . You should make interview question for javascript
almost 20 hours of javascript. thank you sir🤗
aur bhi ya bs khtam
?
@@NamanSukhija khtm
@@NamanSukhija khatam tata bye bye
Bhai js shikne m kitna time lagta hai
approx 6 months
@@SachinSharma-zv9tz
Thank you soo much sir for this amazing tutorial , this is the best tutorial of javaScript🙂#chaiaurcode #completeJavaScript
3 saal sy programming pad raha huu
Lekin aaj aisa lagrha hai jaisay pehli baar real programming pad raha huu agar aap pehlay milay hotay toa aaj meri job lag chuki hoti
Are u sure dude ? Because I want to start?
@@cham24.7 100%
3 saal se tum sirf time pass kert rahe the ......
@@serajrabbani9541 acha
Gyaani baaba aapnay kis pustak mai dekha....
thank you hitesh bhaiya, you are doing so good. The way you teach js in deep is really appriciated.
Finally completed, the amount of effort that went into this must have been really next level!
Thanks for this, will share it to anyone in need!
Good job bro I am in api part
project 2 started 2:14:10
4 saal ki engineering me nahi karatha voh last 6 weeks me kara.. Thank you sir
I have completed the js course both parts nice sir Thanks for your lovely courses
2:29:29 Task : solution for BMI Calculator
const message = document.querySelector(".message");
if (height === " " || height < 0 || isNaN(height)) {
results.innerHTML = `Please give a valid height ! ${height}`;
} else if (weight === " " || weight < 0 || isNaN(weight)) {
results.innerHTML = `Please give a valid weight ! ${weight}`;
} else {
const fMBI = (weight / ((height * height) / 10000)).toFixed(2); //will give for two decemal places
//show the result
results.append(fMBI);
if (fMBI < 18.6) {
message.append(`Underweight: ${fMBI}`);
} else if (fMBI >= 18.6 && fMBI
Completed this series and I can tell from now on I don't have to watch any more videos on pure javascript...this is the end of watching tutorials and beginning of writing more code!! Thanks Hitesh for this amazing and in-depth knowledge✨❤️
sahi bole aap, no need to watch other js series now.
bhai i am also doing it....but ek problem hai confidence nhi aa rha topics pe kya karu uske liye..........
av tak to maja aa rha hai 1 hour 27 min tak dekha hai av . you should upload good project on JavaScript
Amazing lecture as always , never compromise with quality of content (thank you so much sir )
9.24.38 fir se dekhna hoga
Man You are at GOD level . love the way you improved yourself . if someone sees your earlier videos in English channel they can easily see the improvement of your teaching skill .
7:38:40 prototype starts from here
1:16:40: childNodes discussion
1:48:32: DOM Finished, thank you Sir for teaching with this much clarity!❤
2:14:12: Project-02 (BMI Calculator)
4:08:44: Blocking v/s Non-blocking Code (depends on the use case)
4:09:34: JS Runtime Environment
4:11:08: Yes Sir, we want this kind of series for node js as well
5:22:55: XHR API Request Assignment
5:23:35: console log discussion
5:58:33: promise chaining using then() method
6:01:20: finally() method use case
6:03:50: handling promise using, then v/s async-await (async-await starts from here)
6:17:28: then-ables for handling promise chaining, the real-life use cases are really helpful to understand how things work under the table!🙌
6:19:00: why fetch execute earlier than any other async codes? (covered in next video on fetch)
6:37:15: HTTP errors in fetch request (senior developer wali baat, important for interviews)
7:38:52: Prototype Discussion , after 'new' keyword
😊❤
..... Kyuki hum bhot hi advance baate karne lag gaye hain 😂😂😂 05:07:40
finally i understood fetch() ,,
thank you bhaiya ji
9:55:54 complete closure topic wow🎉 nice
Ab css ka course aana chahiye jisme responsiveness or animation grid or flex box ki mastery karayi jay
thanks for this series
Best Seriess u have thoda ego tho
Bhai Address Bata do Personally , Life ki lagi Padi h
inner content -all text including that is hidden by css
/inner text- visible text
You must sound little strict as you are a teacher. A fake teacher vibes are coming.
1.5 month lag gaya 2 parts comlpete karne me
hitesh sir = GOAT 👑
thanks
hitesh sir make video on GITHUB and GIT please...
29:54 interesting content
Sir both parts is best, lekin sir promises samjhne me thoda tough laga.
Thank you so much for this masterpiece 🙏
please make one video on the project which are added later in the future, after completing the course. We don't know what to do in those projects. I cannot understand just from the code provided in the solution
I have completed both. If i just say thank you Hitesh bhaia , that wouldn't be fair enough. Even the experience and knowledge that you have share is totally incomparable. Long live Hitesh bhaia and i pray for your happiness. Love from Bangladesh.
this is definitely a god tier course and this should not be free lol.
bhaiya padate aachha ho . maja to aa rha hai . padke .
9:26:00 abb yeh hi toh baat hai real knowledge ki , experience ki purana bhi karke batayenge aisa nhi hai ki bhaga de fta fat !! Hatts off sir free toh nhi honi chaiye thi yeh aisi feel aarhi hai
sir I have completed both part of Js ,it really worth than most of the paid course
THANK YOU SO MUCH RESPECTES SIR YOU ARE THE BEST
Lots of love from Mumbai ❤
4:35:36 ..., document.querySelector('#start').addEventListener('click',function(){
const Interval = setInterval(function(){
console.log("Kapil",Date.now());
},1000)
document.querySelector('#stop').addEventListener('click',function(){
clearInterval(Interval);
})
});
i used nesting of events , if there is another way of doing this then please comment.
4:44:49....., const body = document.getElementsByTagName('body')[0];
document.querySelector('#start').addEventListener('click', function(){
const randomColor = setInterval(function(){
const hex = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += hex[Math.floor(Math.random() * 16)];
}
body.style.backgroundColor = color;
}, 2000);
document.querySelector('#stop').addEventListener('click', function(){
clearInterval(randomColor);
body.style.backgroundColor = '';
});
});
for automatically changing color , my version of code
sir angular ki series bana do
I've successfully completed both parts, and I must say, it's an absolutely fantastic series! I would like to express my sincere gratitude to Hitesh Sir for his valuable guidance and support throughout.🥰🥰🥰🥰🥰🥰🥰🤩
thank you sir for making js easy for us.
completed the series in one week 😊, Thank You Sir, you made our doubts cleared. Thank You!
const task1 = todo.querySelector(".DOM");
task1.remove();
3:41:44 (False)--Event babling || (True)--Event capturing
e.stopPropagation
Personal Timestamp Marks/NOTES
Day 1: 1:06:54
Day 2: project (BMI Calc.) : 2:14:09
# Document Object Model (DOM) Notes 1
## Introduction
- 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.
- The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
## Basic Concepts
### Nodes
- **Node**: The basic unit of the DOM, representing a single point in the document tree.
- **Element Node**: Represents an HTML element (e.g., ``).
- **Text Node**: Contains the text content inside an element.
- **Attribute Node**: Represents attributes of an HTML element.
### The Document Object
- The `document` object represents the whole HTML document.
- Methods like `getElementById`, `querySelector`, and `createElement` allow interaction with the DOM.
## DOM Tree
- The document is represented as a tree structure, with the root being the `document` object.
- **Parent Node**: A node containing other nodes.
- **Child Node**: A node within another node.
- **Sibling Nodes**: Nodes that share the same parent.
## Accessing Elements
### Methods
- `document.getElementById('id')`: Returns the element with the specified `id`.
- `document.getElementsByClassName('className')`: Returns a collection ( HTML Collection ) of elements with the specified class name.
- An HTMLCollection is a collection of HTML elements, similar to a NodeList, but with some key differences. It's an array-like object, meaning it has a length property and allows indexed access, but it's not a true array.
- We have to convert it to an array to use functions on it.
- `document.querySelectorAll('selector')`: Returns a NodeList of elements matching the CSS selector.
- NodeList : A "NodeList" is a collection of nodes, typically returned by methods like 'document.querySelectorAll()' or 'document.getElementsByClassName()'.
- It represents a list of DOM elements, which can be accessed like an array, although it's not a true array.
- Although Nodelist is not an array but it can be accessed like an array by using indexing.
- `document.getElementsByTagName('tagName')`: Returns a collection of elements with the specified tag name.
- `document.querySelector('selector')`: Returns the first element matching the CSS selector.
```javascript
// Accessing Elements
const elementId = document.getElementById('myElement');
const elementsClass = document.getElementsByClassName('myClass');
const elementsQuery = document.querySelectorAll('.myClass');
const elementsTag = document.getElementsByTagName('p');
const elementQuery = document.querySelector('#myElement');
```
### Modifying Attributes
- `element.setAttribute('attribute', 'value')`: Sets the value of an attribute.
- `element.getAttribute('attribute')` : Gets the attribute value.
- `element.removeAttribute('attribute')`: Removes an attribute.
``` javascript
// Modifying Attributes
// Example Element
let title = document.getElementById('title');
// Setting an Attribute
title.setAttribute('class', 'highlighted');
// This sets the 'class' attribute of the 'title' element to 'highlighted'.
// Getting an Attribute
let classValue = title.getAttribute('class');
console.log(classValue);
// This retrieves the value of the 'class' attribute, which is 'highlighted'.
// Removing an Attribute
title.removeAttribute('class');
// This removes the 'class' attribute from the 'title' element.
title.style.backgroundColor = '#212121'
title.style.color = '#fff'
title.style.padding = '10px'
title.style.margin = '10px'
title.style.borderRadius = '10px'
title.style.width = '100%'
title.style.height = '100%'
```
### What is difference between 'textContent', 'innerHTML' and 'innerText'
- `textContent`: Returns the text content of an elements, including text within script and style elements.
- `innerText`: Returns the text content of an element, excluding text within script and style elements.
- `innerHTML`: Returns the HTML content of an element and its descendants.
### Example
``` javascript
// Accessing elements in Nodelist
const headCollection = document.querySelectorAll('h2')
headCollection[0].style.color = 'orange'
// Accessing elements in HTML collection
const listName = document.getElementsByClassName('list-item')
console.log(listName)
// converting HTML Collection into an array
const convertedArray = Array.from(listName)
console.log(convertedArray)
convertedArray.forEach( (item) => {
item.style.color = 'orange'
})
```
# Document Object Model (DOM) 1
## Introduction
- 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.
- The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
## Basic Concepts
### Nodes
- **Node**: The basic unit of the DOM, representing a single point in the document tree.
- **Element Node**: Represents an HTML element (e.g., ``).
- **Text Node**: Contains the text content inside an element.
- **Attribute Node**: Represents attributes of an HTML element.
### The Document Object
- The `document` object represents the whole HTML document.
- Methods like `getElementById`, `querySelector`, and `createElement` allow interaction with the DOM.
## DOM Tree
- The document is represented as a tree structure, with the root being the `document` object.
- **Parent Node**: A node containing other nodes.
- **Child Node**: A node within another node.
- **Sibling Nodes**: Nodes that share the same parent.
## Accessing Elements
### Methods
- `document.getElementById('id')`: Returns the element with the specified `id`.
- `document.getElementsByClassName('className')`: Returns a collection of elements with the specified class name.
- `document.getElementsByTagName('tagName')`: Returns a collection of elements with the specified tag name.
- `document.querySelector('selector')`: Returns the first element matching the CSS selector.
- `document.querySelectorAll('selector')`: Returns a NodeList of elements matching the CSS selector.
### Modifying Attributes
- `element.setAttribute('attribute', 'value')`: Sets the value of an attribute.
- `element.getAttribute('attribute')` : Gets the attribute value.
- `element.removeAttribute('attribute')`: Removes an attribute.
### Example
```javascript
document.getElementById('myElement');
title.style.backgroundColor = '#212121'
# JavaScript DOM Manipulation 3
## Code
### Creating an element using JS
### createElement : `createElement` is a method for creating an element with the specified tagname
const div = document.createElement('div');
console.log(div);
### Setting properties of the div
div.className = 'main'; // Sets the class name of the div
div.id = 2; // Sets the ID of the div
div.setAttribute('title', 'generated title'); // Sets a title attribute for the div
### Styling the div
div.style.backgroundColor = "green"; // Sets the background color
div.style.color = "beige"; // Sets the text color
div.style.padding = '12px'; // Sets the padding
div.style.borderRadius = '10px'; // Sets the border radius
div.style.textAlign = "center"; // Sets the text alignment
### Adding text to the div
### addText: The `addText` variable is used to create and add a text node to an HTML element.
const addText = document.createTextNode("Chai aur Code"); // Creates a text node
div.appendChild(addText); // Appends the text node to the div
### Appending the div to the body
### appendChild: The `appendChild` method is used to add a child node to a specified parent node in the DOM.
document.body.appendChild(div);
29:48 very intresting concept.
6:20:00 What a great explanation for Promises!!! 💜 Sth me async await bhi smj aagye!
Now i completed both of the parts,Thank you so much sir.
5:02:09 start api video
7:31:05 😀jis ka matlab 'this'
sir your biceps is greater than my legs
10:03:06
Possible hai sir...
let colors = [
{ name: 'orange', color: 'rgb(255, 165, 0)' },
{ name: 'green', color: 'rgb(0, 128, 0)' },
{ name: 'blue', color: 'rgb(0, 0, 255)' },
{ name: 'yellow', color: 'rgb(255, 255, 0)' },
{ name: 'pink', color: 'rgb(255, 192, 203)' },
{ name: 'indigo', color: 'rgb(75, 0, 130)' },
{ name: 'orange-red', color: 'rgb(255, 69, 0)' },
{ name: 'purple', color: 'rgb(128, 0, 128)' },
{ name: 'cyan', color: 'rgb(0, 255, 255)' },
{ name: 'hot pink', color: 'rgb(255, 105, 180)' }
];
for (let i = 0; i < colors.length; i++) {
let btn = document.createElement('button');
btn.innerHTML = colors[i].name;
btn.className = 'p-2 m-2 bg-gray-700 text-cyan-300 rounded-2xl';
document.body.append(btn);
btn.addEventListener('click', () => {
document.body.style.backgroundColor = colors[i].color;
});
}
Kudos to you Hitesh Sir for creating a practical & concept oriented tutorial! Just loved it!❤
BEST COURSEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
Like for a jsTea 😁😁
Is this complete or more videos coming
Markdown hindi edition please!!!
1:48:40 Dom finished
this is solution with switch case
const buttons = document.querySelectorAll(".item");
const body = document.querySelector("body");
buttons.forEach((button) => {
button.addEventListener("click", (e) => {
switch (e.target.id) {
case "orange":
return (body.style.backgroundColor = e.target.id);
break;
case "yellow":
return (body.style.backgroundColor = e.target.id);
break;
case "green":
return (body.style.backgroundColor = e.target.id);
break;
case "blue":
return (body.style.backgroundColor = e.target.id);
break;
default:
return (body.style.backgroundColor = "black");
break;
}
});
});
this is solution with switch case
just completed this series now i am learning react
I have finished DOM, From Tomorrow I'll Start Projects. ❤ Thanks Sir.
Start Date - 15 May (Afternoon)
End Date - 17 May (Afternoon)
One of the best series I have to say.
Summary of last video -> When you will be working on a project, you will get stuck on many things and then you say, I didn't learn this thing, but no worries there, just go to MDN docs, chat GPT, stack overflow etc and try to solve it. And doing this will help you to learn many more new things.
5:02:00 main topic starts from here