Lets build 4 javascript projects for beginners | chai aur

Visit chaicode.com for all related materials, community help, source code etc.
#javascript #hindi
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial

[@Hafijur0211]

🎯 Key Takeaways for quick navigation: 00:00 🌟 *Introduction to Series and Projects* - Introduction to a new series named "Chai and JavaScript." 00:29 🚀 *Exciting Project Experiences* - Highlighting unique and exciting project experiences. 01:09 🔧 *Balancing Noise and Learning in Projects* - Acknowledging achievements without excessive hype. 01:36 📅 *Overview of Events in JavaScript* 02:04 🌐 *Tips on Event Handling* - Offering insights into handling events in JavaScript. 02:19 🌐 *Setting Project Levels for Confidence Building* - Introduction to setting project difficulty levels gradually. 03:02 🛠️ *Using Code Sandbox for Practice* - Introducing Code Sandbox as a valuable platform. 03:17 🚧 *Challenges Faced During Practice* - Addressing small challenges faced during coding practice. 03:45 🕰️ *Balancing Wait Time and Learning Experiences* 04:00 📂 *Sharing Completed Projects and Directories* - Sharing completed projects directly for a hands-on experience. 04:28 🌐 *Setting Up Code for Practice Safely* - Caution against using incognito mode for pasting URLs. 05:10 🔄 *Navigating Project and Support* - Utilizing URLs to navigate within the project and access support. 05:52 🛠️ *Making Changes in Forked Projects* - Demonstrating the process of forking a project for personal changes. 06:19 📂 *Creating Folders and Managing Links* - Creating a new folder and naming it for organized project management. 07:07 🎥 *Introduction to Markdown Preview in MacDown* - Explanation of the Markdown Preview button in MacDown. 07:37 📝 *Writing Project-Related Information in Markdown* - Demonstrating how to write project-related details in Markdown. 08:09 💻 *Providing Solution Code and Markdown Preview* - Showing how to include solution code in Markdown for projects. 09:08 📊 *Organizing Content and Accessing Safari Browser* - Discussing the importance of creating a presentation in Markdown. 09:50 🎨 *Introduction to Color Changer Project* - Explanation of the Color Changer project. 10:18 🎨 *Challenges in Implementing Color Change* - Highlighting the challenge of implementing color change dynamically. 11:00 ⚙️ *Adjusting Font Settings for Better Visibility* - Demonstration of adjusting font settings in HTML for better visibility. 11:47 🎨 *Exploring Color Switch IDs and Classes* - Overview of the Color Switch project elements (span, buttons, IDs, and classes). 12:14 📜 *Overview of Scripts and Code for Chai and Code* - Introduction to the script named "Chai and Code." 12:29 🔄 *Selecting Elements and Changing Body* - Introduction to selecting elements in the Color Changer project. 13:10 🎨 *Utilizing Query Selector for Buttons* - Explanation of using `querySelector` to select buttons. 13:54 🛠️ *Dynamically Logging Button Details* - Logging details of selected buttons using `console.log`. 14:21 🔁 *Looping Through Buttons for Event Handling* - Introducing the concept of looping through buttons. 14:50 🔍 *Understanding Event Handling* - Overview of events in JavaScript. 15:02 🎯 *Setting Up Buttons and Functions* - Selecting buttons and setting up functions for the Color Changer project. 15:17 🖱️ *Dynamically Applying Styles with JavaScript* 15:31 🔄 *Looping Through Buttons for Event Binding* 16:14 🎤 *Emphasizing the Importance of Events* 17:08 🔍 *Understanding Event Listeners* 17:37 📜 *Accessing Event Object Details* 18:04 🎯 *Assigning a Short Variable Name* 18:27 🕵️ *Examining Event Target and Attributes* 19:08 ⚙️ *Implementing Dynamic Switching* 19:36 🎨 *Changing Styles Dynamically* 20:06 🚀 *Leveraging HTML and Styling* 20:36 🎨 *Dynamic Styling with Event Details* 21:14🔄 Iterating *and Enhancing Functionality* 22:07 💻 *Advanced Implementation and Code Explanation* 22:34 🏁 *Completing Project One: Event Handling* 23:10 🛠️ *Adding Comments for Easy Understanding* 23:38 📚 *Accessing Documentation and Further Practice* 24:47 📊 *Project Two: BMI Calculator - Introduction* 25:29 🔄 *Interacting with the BMI Calculator* 25:54 🚀 *Adjusting HTML Structure and Styling* 27:03 📐 *Exploring HTML Structure and Elements* 27:44 📝 *Handling Input Events and Value Extraction* 28:12 🔄 *Updating and Displaying Results* 28:26 🛠️ *Analyzing Project Structure and Forking* 28:41 📋 *Selecting Form and Understanding Form Submission* 29:09 📝 *JavaScript Code for Form Selection and Event Handling* 29:51 🛑 *Preventing Default Action and Selecting Values* 30:21 🔄 *Utilizing Callback Function and Handling Values* 31:04 📑 *Selecting Elements and Understanding Values* 31:30 🔄 *Handling String Values and Applying Replace* 32:09 ⚙️ *Handling Empty Values and Checking Validity* 32:42 🛡️ *Preventing Default and Handling Form Submission* 33:16 🧮 *Calculating BMI from Height and Weight* 33:42 🧭 *Checking and Handling Results and Values* 34:21 🛠️ *Validating Height and Applying Inner HTML* 35:05 🔄 *Modern Technique for Number Validation* 35:34 🚦 *Finalizing Height Validation and Handling Conversion* 36:18 🔄 *Updating Height Value Dynamically* 36:48 🛠️ *Continuing Validation and Logic Implementation* 37:15 🔄 *Height and Weight Validation Integration* 37:42 🛠️ *Implementing BMI Calculation* 38:38 🧮 *BMI Calculation Formula* 39:07 🛠️ *Fixing Decimal Display in BMI Calculation* 39:21 📊 *Displaying BMI Result and HTML Styling* 39:49 🧑‍💻 *Dynamically Injecting Values for Practice* 41:11 🚀 *Completing Project Three and Introducing Project Four* 42:30 🕰️ *Creating a Digital Clock - Introduction* 42:42 ⏰ *Displaying Local Time* 43:12 🕒 *Clock Styling and HTML Structure* 43:38 🛠️ *Coding the Clock Display* 44:09 🔄 *Dynamically Updating Clock Every Second* 45:08 🔄 *Controlling Script Execution* 45:22 ⏰ *Interval Timing and Advanced Approaches* 45:35 🚀 *Essential JavaScript Event Handling* 46:04 🛠️ *Writing the Set Interval Method* 46:33 📝 *Understanding SetInterval Parameters* 47:02 🔍 *Testing Interval Functionality* 47:43 🕰️ *Creating a Real-Time Clock* 47:57 ☕ *Small Project: Tea Timer* 48:26 📄 *Accessing Project Solutions* 48:54 🚀 *Project 3: Wallet Selector* 49:43 🎲 *Gas Number Evaluation in a Game* 50:53 📊 *Gas Tracking Form Logic* 51:22 🖥️ *Design and Elements of the Gas Tracking Form* 51:47 🎭 *Handling Form Submission and Events* 52:18 🔢 *Generating Random Numbers and Decimal Adjustments* 52:59 🔄 *Dynamic Update of Random Numbers* 53:26 🔄 *Adjusting Random Number Range* 54:08 🔧 *Fine-tuning Random Number Decimals* 54:52 🛠️ *Handling Random Number Display Issues* 55:21 📝 *Selecting and Handling User Input* 55:55 🧐 *Choosing Approach for Value Handling* 56:07 📊 *Managing User Input and Gas Values* 57:08 🔄 *Troubleshooting and Refreshing* 57:53 📝 *Selecting Additional Values* 58:23 🔄 *Refining User Experience* 59:04 🚀 *Setting up Gas and User Input Handling* 59:46 🛠️ *Implementing Controls and Validation* 01:00:15 🎮 *Designing Game Logic and Events* 01:00:57 🔍 *Gas Validation and Check Gas Method* 01:01:39 📜 *Displaying Validation Messages* 01:02:07 🚧 *Creating Display Message Method* 01:02:36 🚀 *Finalizing Display Message and Gas Methods* 01:03:54 🏁 *Implementing Victory and Display Gas Methods* 01:04:23 🎮 *Managing Game States and New Game Function* 01:05:32 🚦 *Checking Game Availability and Handling User Input* 01:06:11 🛠 *Refining User Input Handling* 01:07:14 🛠 *Validating and Displaying User Input* 01:07:42 🧹 *Cleaning and Improving Validation* 01:08:11 🔍 *Multiple Validation Checks* 01:09:12 🔄 *Iterating Through Validation Checks* 01:09:54 🎮 *Handling Game Over Scenario* 01:10:22 🔄 *Checking Game Mode and Validation* 01:10:47 📊 *Accessing and Displaying Game Statistics* 01:11:57 🏁 *Finalizing Game End and Logic* 01:12:47 📝 *Validating User Input* 01:13:28 🧾 *Gas Validation and Display Messages* 01:15:47 🧹 *Cleaning Up User Input* 01:15:59 🛠️ *Updating Gas Stall Information* 01:17:11 🔄 *Iterative Update of Gas Values* 01:17:53 🔄 *Continuous Gas Update Logic* 01:18:40 🔄 *Introduction to a New Method* 01:18:53 📝 *Printing Messages Dynamically* 01:19:20 🛠️ *Creating Headings and Values* 01:19:47 🔄 *Debugging and Adjusting Spacing* 01:20:45 🔄 *Displaying Values in List Format* 01:21:12 🎮 *Discussing Additional Game Features* 01:21:42 🕹️ *Creating a Button for New Game* 01:22:23 🛠️ *Implementing Input Field Actions* 01:23:07 🚀 *Adding a Start Button* 01:23:49 🆔 *Implementing New Game Start Button* 01:24:15 🕹️ *Styling and Structure for Start Button* 01:24:57 🔄 *Modifying Inner HTML Dynamically* 01:25:51 🎮 *Refining Play Game Functionality* 01:27:03 🎯 *Setting up Event Listener for New Game Button* 01:27:30 🔄 *Implementing Event Handling Function* 01:27:57 🎲 *Dynamic Generation of Random Numbers* 01:29:07 🛠️ *Refining Inner HTML and Attribute Manipulation* 01:29:49 🚧 *Finalizing Attribute Removal and Reset Logic* 01:30:09 🔄 *Enhancing Query Result Handling* 01:30:23 🔧 *Revisiting and Implementing Additional Features* 01:31:19 📝 *Conclusion and Overview of Project* Made with HARPA AI

[@lalitpanwarseo]

Apki video se mujhe js k concept acche se clear hue............ aur maine 2 chote chote project bhi bnaye hai JavaScript k .... 1. Numerology Driver and Conductor number calculator 2. personal year calculator...... Aur vo live bhi hai... Unka link yaha nhi de skta.. aur 3rd project Numerology Lo-su grid generator bna raha hu... Dil se dhanyawad... Apka contribution hai jo hum sb etna acchi trah sikh paye....

[@budgetarena1984]

Wow, jinko javascript samajh nahi aati hai wo bhi aapki smyle, sweet voice and simple teaching style se sikh jayenge.

[@gaana3728]

write

[@saksham_1612]

Project 1 = 9:50 Project 2 = 25:30 Project 3 = 42:37 Project 4 = 50:00

[@saksham_1612]

Thanks a lot sir for giving heart to my comment. You are amazing I feel you are the best indian youtubers for development.

[@developerprofile6565]

@@saksham_1612 absolutely right !

[@hemant1772]

last peoject me array bnakar value push ki lekin uska faida kya hua uske binna bhi values show ho rhi hai previous guesses me is line se prevguess += `${guess}` to faida kya hua ?

[@ketanmangale6153]

@@hemant1772 You are right. Direct array ko hi display karna chayiye.

[@hemant1772]

@@ketanmangale6153 Yahi to mai dekh rha tha project bnaya to confusion huii to push liya

[@abentertainment5531]

4rth project mene solution dekhne se pehly khudse krne ki try ki thi or mene solve krdiya hai game chal bhi rha hai but mere code me mene just direct if else se kam kia hau functions nhi banae sir apki approach kafi neat or achi thi. hamari bhi ho hi jaegi. THankks!!!

[@da_divyansh]

21:00 Project 1 :-- const btn = document.querySelectorAll('.button'); const body = document.querySelector('body'); btn.forEach(function (button) { button.addEventListener('click', function (e) { if (e.target.id === e.target.id) { body.style.backgroundColor = e.target.id; } }); });

[@skyworth3158]

Project 1 = 9:50 -> Color Changer Project 2 = 25:30 -> BMI Calculator Project 3 = 42:37 => Digital Clock Project 4 = 50:00 => Guess the Number

[@faisalhrbk]

thanks for giveing us timestamps bro

[@Anujkumar-ou2bw]

Thanks a lot for this series. Now I started doing Javascript projects in my local for better understanding after learning all these concepts. Hats off to you Hitesh Sir...😇

[@nitishm8464]

css ka code kaha milega

[@tusharbaskheti8002]

the last project was crazy good ..........hitesh sir is all about flow .........the flow and way he teach is swad

[@meermind]

@@HarshKaushik_12 chat gpt se help lo bro

[@spencereditz.]

@chai aur Code sir ji One Two Three Four Reset function style(color) { let body = document.querySelector('body'); body.style.backgroundColor = color; } i tried to solve color changer page with this approach🤞.

[@PookieThisSide-d9c]

Tq sir aapke Karan bg changer me khud se logic lga payi tq concept clear krne ke liye. 😍😍

[@Priyanka-bd6um]

Sir aap kitni mhnt kre ho hamare liye......Thank you ❤️soo much

[@khubaibsiddiqui7144]

I also wanna say that, but It is for money so i can't say that😂

[@Priyanka-bd6um]

People who only works for money they thinks that other peoples also only work for the money....I think same think happen to you bro....bless you God give you broad imagination.

[@khubaibsiddiqui7144]

@@Priyanka-bd6um Lol! To your info, i'm a student not a worker, N btw i was just kidding. N according to your response i can guess your level of observation about the world that really needs improvement :),,

[@Priyanka-bd6um]

@@khubaibsiddiqui7144 Dea student😂, you won the conversation

[@user-jy1lldigitech]

❤❤❤

[@rumitvarsani]

At 24:41 in the video, I was initially puzzled about why the presenter switched to a different editor. However, I now understand the reasoning behind it. You truly are a genius!

[@ahmadrasheed2598]

Here's the code I have written. This code is for Number guessing game. I have also managed corner cases in this code. I have written this without looking the solution. Thank you Sir for this amazing course. ❤❤ let subt = document.querySelector('#subt'); let prevGuesses = document.querySelector('.guesses'); let remaining = document.querySelector('.lastResult'); let lowOrHi = document.querySelector('.lowOrHi'); let randNum = Math.floor(Math.random() * 100 + 1); let guessArr = []; let guessesRemaining = 10; let gameWon = false; subt.addEventListener('click', (e) => { e.preventDefault(); console.log(randNum); let userNum = parseInt(document.querySelector('#guessField').value); if (!isNaN(userNum) && guessesRemaining !== 0 && gameWon == false) { guessArr.push(userNum); prevGuesses.innerHTML = guessArr; guessesRemaining--; remaining.textContent = guessesRemaining; if (userNum < randNum) { lowOrHi.textContent = 'Try a little higher'; } else if (userNum > randNum) { lowOrHi.textContent = 'Try a little lower'; } else { lowOrHi.textContent = `You guessed it correct in ${ 10 - guessesRemaining } guesses. The number was ${randNum}`; gameWon = true; } } else if (guessesRemaining === 0) { lowOrHi.textContent = `You ran out of gueses`; } else { lowOrHi.textContent = `Please enter a valid number`; } });

[@thedeepanshu4937]

So finally, I found the best JS project vedio on the whole KZbin. Thanks Alot sir.

[@tusharCoding]

If you get any confusion in Project 4 for generating the random number [ min , max ] then simply use the basic and simple formula - const random = Math.floor(Math.random()*(max-min+1)) + min; And In case you want to know how this generate number b/w min and max ( where min and max are inclusive ) then paste this formula on Chatgpt and learn. Thankyou Hitesh sir for your effort and support , your videos are really helpful .

[@AbdulSattar-rj7xc]

Really u r very gd and humble person.. Aap jese logo ki wjh se lakho life.. Better ho rhi h.. Jo financially afford ni kr skte.. U r great❤

[@atharvatirkhunde4517]

I had a lot of fun building the frontend and backend myself! I practiced a lot and added many great features to my projects. It was an enjoyable experience. Thank you for the resources, and I look forward to seeing more content like this!

[@shreyakolekar4059]

Projects karne mai bohot maza aaya! Abhi tak jo bhi series mai JavaScript ke concepts kiye, sab kuch apply karne aaya! Thank you again Sir!

[@chaiaurcode]

Most welcome 🤗

[@pranavkannur]

Timestamps (Powered by Merlin AI) 00:02 - Learn about different types of events in JavaScript. 01:48 - The video discusses building 4 JavaScript projects for beginners. 05:17 - Let's build 4 JavaScript projects for beginners 07:22 - Learn and build 4 beginner-level JavaScript projects 11:25 - Selecting and changing the color of elements using JavaScript 13:02 - Learn to select buttons and body using Document.Query method in JavaScript 16:36 - Creating event listeners and handling events in JavaScript. 18:11 - Choosing the first lock and understanding the event and target in JavaScript 21:52 - Implementing JavaScript projects for beginners 23:46 - Practice JavaScript projects with different approaches and learn through a playground. 27:45 - Select the form and handle the submit event 29:14 - Prevent default action of form submission in JavaScript 32:48 - Learn how to store, access, and manipulate values in JavaScript 34:31 - Checking for valid height in JavaScript project 38:07 - Calculate BMI using the formula: weight divided by height squared 39:48 - Building HTML and JavaScript projects for beginners 43:49 - Query Select is used to display the clock 45:49 - Learning about the setInterval method in JavaScript. 49:17 - Build a JavaScript project to evaluate a user-entered number against a randomly generated number. 51:15 - Generating random numbers in JavaScript using the Math library 54:47 - Taking user input for select query in JavaScript 56:40 - Learn how to build 4 JavaScript projects for beginners. 1:00:16 - Validation and check of gas values in the game 1:01:58 - Displaying messages using JavaScript methods 1:05:32 - Building 4 JavaScript projects for beginners 1:07:21 - Introduction to number validation method 1:10:59 - Display gas and message 1:12:49 - Display messages based on gas value and random number 1:17:03 - Cleaning and updating values of gases in JavaScript 1:18:42 - The new method is about displaying a message and adding values to it. 1:21:56 - Adding input fields and buttons in JavaScript projects 1:23:40 - Adding HTML elements and attributes in JavaScript 1:27:34 - Build a function that handles event listeners in JavaScript 1:29:22 - Removing attributes and child elements in JavaScript 1:34:03 - Building 4 JavaScript projects for beginners

[@enciridus2291]

20:52 Better way to write this code const boxes = document.querySelectorAll('.box'); const body = document.querySelector('body'); boxes.forEach(function(box) { box.addEventListener('click', function(e) { const color = e.target.id; body.style.backgroundColor = color; }); });

[@radon8452]

why does he used IF?

[@shouviksarkar7900]

In the first project instead of writing all the if else we can do it this way. Works the same. let btns = document.querySelectorAll('.button'); btns.forEach((btn) =>{ btn.addEventListener('click', (e) =>{ document.body.style.backgroundColor = e.target.id ; }) }) ***I know the if else is a good practice and if I want to make the project more complex then if else is needed. I just found for the current project, this is a more short cut method.***

[@tusharCoding]

Right 👍

[@TechAahar]

Go directly to the projects by selecting the time :) Project 1 = 9:50 -> Color Changer Project 2 = 25:30 -> BMI Calculator Project 3 = 42:37 => Digital Clock Project 4 = 50:00 => Guess the Number

[@CodeWithGolden-ft8ne]

Yes, we need more project videos, first time ever I completely understood the whole project without any confusion! You have amazing teaching skills, I really affectionate with them.

[@jeet6973]

40:50 if(bmi18.6 && bmi

[@RexAshwin1163]

bro if the bmi calculates 18.6 the result will show overweight..

[@sakshibharti6766]

Yha pr ap ${bmi} kiye ho wo agar nahi likhe tohh usse koi fark pdega kyaa ya tohh ${} iske andar likhne se kya hota hain please iske bare btaye

[@barikankitkumar]

document.querySelectorAll(".button").forEach((e) => e.addEventListener("click",(c)=>document.querySelector("body").style.backgroundColor = c.target.id))

[@ojas.11]

Great job Hitesh. I wish we had teachers like you in the Engineering. Your approach is quite practicle and you put in quite a lot of efforts in your videos. Keep up the good work bro. ❤❤

[@barunkumar3276]

We can eliminate 'if' check as well. And, directly assign button's id, i.e. colour. const allButtons = document.querySelectorAll(".button"); const body = document.querySelector("body"); allButtons.forEach(function(button){ button.addEventListener('mouseover', function(event){ body.style.backgroundColor = button.id; }) })

[@yashu1703]

Right bro, I was searching for this comment only.

[@kavya6650]

const allButtons = document.querySelectorAll(".button"); const body = document.querySelector("body"); allButtons.forEach(function(button){ button.addEventListener('mouseover', event => body.style.backgroundColor = button.id); }) //using arrow func.

[@Coding_Sarkar]

you are a great teacher sir i always follow your video, for color generator we can make JavaScript code more optimise const background = document.querySelector(".main"); const buttons = document.querySelectorAll(".color-box"); buttons.forEach(button => { button.addEventListener("click", (e) => { let buttonId = e.target.id; background.style.backgroundColor = buttonId; }) });

[@GauravSingh-hl9qk]

20:45 Color-Changer : Why we are using if ? const buttons = document.querySelectorAll('.button'); const body = document.querySelector('body'); buttons.forEach((button) => { button.addEventListener('click', function (e) { body.style.backgroundColor = e.target.id; }); });

[@umsstoriesnvlogs197]

bina if k pata kasey chalega konsa target krrhe hai hum ..

[@capt.cacksparrow9224]

@@umsstoriesnvlogs197 lolz

[@DeskAsus]

Well it is okay, but what in case of black background. The texts are also black, so in case of that you would like to use if. (I'm a beginner)

[@CentristPerspective]

I solved the question 4 on my own, and I came up with this: const listenEv =document.querySelector("#subt") const randomNum=Math.floor(((Math.random()*100)+1)); // let value=10; let newArr = new Array(); listenEv.addEventListener('click',function(e){ e.preventDefault(); console.log(randomNum) const guessNum=parseInt(document.querySelector('#guessField').value) const prevGuess=document.querySelector('.guesses'); const guessCount=document.querySelector('.lastResult'); newArr.push(guessNum); const result=document.querySelector(".lowOrHi"); if(randomNum===guessNum) { result.innerHTML=`Congratulations!! You guessed the number. ${guessNum}` guessCount.innerHTML=10; newArr.length=0; } else{ if(value===0) { result.innerHTML=`Game Over!! The random number was ${randomNum}` value=10; guessCount.innerHTML=value; newArr.length=0; } guessCount.innerHTML=value; value--; } prevGuess.innerHTML=newArr; }) EDIT: I won't be seeing the video for project 4, kyu time waste krna aab

[@haariskhan961]

00:02 Learn about different types of events in JavaScript. 01:48 The video discusses building 4 JavaScript projects for beginners. 05:17 Let's build 4 JavaScript projects for beginners 07:22 Learn and build 4 beginner-level JavaScript projects 11:25 Selecting and changing the color of elements using JavaScript 13:02 Learn to select buttons and body using Document.Query method in JavaScript 16:36 Creating event listeners and handling events in JavaScript. 18:11 Choosing the first lock and understanding the event and target in JavaScript 21:52 Implementing JavaScript projects for beginners 23:46 Practice JavaScript projects with different approaches and learn through a playground. 27:45 Select the form and handle the submit event 29:14 Prevent default action of form submission in JavaScript 32:48 Learn how to store, access, and manipulate values in JavaScript 34:31 Checking for valid height in JavaScript project 38:07 Calculate BMI using the formula: weight divided by height squared 39:48 Building HTML and JavaScript projects for beginners 43:49 Query Select is used to display the clock 45:49 Learning about the setInterval method in JavaScript. 49:17 Build a JavaScript project to evaluate a user-entered number against a randomly generated number. 51:15 Generating random numbers in JavaScript using the Math library 54:47 Taking user input for select query in JavaScript 56:40 Learn how to build 4 JavaScript projects for beginners. 1:00:16 Validation and check of gas values in the game 1:01:58 Displaying messages using JavaScript methods 1:05:32 Building 4 JavaScript projects for beginners 1:07:21 Introduction to number validation method 1:10:59 Display gas and message 1:12:49 Display messages based on gas value and random number 1:17:03 Cleaning and updating values of gases in JavaScript 1:18:42 The new method is about displaying a message and adding values to it. 1:21:56 Adding input fields and buttons in JavaScript projects 1:23:40 Adding HTML elements and attributes in JavaScript 1:27:34 Build a function that handles event listeners in JavaScript 1:29:22 Removing attributes and child elements in JavaScript 1:34:03 Building 4 JavaScript projects for beginners

[@faizsings]

thanks sir and here the further code of the IInd project. first assign bmi variable of the outside of the scope and then..... if(bmi < 18.6 || bmi < 0){ results.innerHTML = `${bmi}, which is Under Weight`; } else if(bmi === 18.6 || bmi > 18.6 || bmi < 24.9 || bmi === 24.9){ results.innerHTML = `${bmi}, which is Normal Weight`; } if(bmi > 24.9) { results.innerHTML = `${bmi}, which is Over Weight`; }

[@siddhartharaja9413]

Amazing

[@faizsings]

@@siddhartharaja9413 yeah thanks buddy

[@mymemory2782]

This really help buddy, thanks a lot. By the way I declare the BMI inside the scope & it works because of the var. Once again thanks a lot's man. You are a saver.

[@faizsings]

@@mymemory2782 hahaha ur wlcm bro, i appreciate it.

[@letstry2854]

ye hui na..kabse intajar tha project ka..thank you so much sir!!🥰🥰🥰🥰

[@bhuvansingh4375]

Hello Hitesh sir, iss video ke first project mein time stamp 20:56 you have applied if statement but when you target the body you forgot to add (document) to target the DOM instead The code runs perfectly by applying document.body.style.backgroundcolor = 'grey' I have done this same by applying switch case, here is my code : switch (e.target.id) { case 'red': document.body.style.backgroundColor = e.target.id; break; case 'violet': document.body.style.backgroundColor = e.target.id; break; case 'blue': document.body.style.backgroundColor = e.target.id; break; case 'yellow': document.body.style.backgroundColor = e.target.id; break; default: break; } }); }); thankyou :)

[@HeyIMSomnath]

project 1 my approach: const body = document.querySelector('body'); const buttons = document.querySelectorAll('.button'); buttons.forEach(function(e){ e.addEventListener('click',function(){ body.style.backgroundColor = e.id; }) })

[@vikashjalandra2297]

Amazing sir, mene ye sare project phle bnae the khud se, but you changed my thinking ki kaise clean code likhna h or kaise reusable code likhna h, thanks a lot sir. Salute to you 🙇🏻‍♂️

[@mkmpib]

Bhai mko to abhi smj hi nhi aa rhe h

[@mkmpib]

Help kr skte ho aoo

[@overunityinventor]

In your first project instead of putting an if condition, I think we can directly set body bg to whatever the event target id is, correct? In this way you don't have to add another if clause if one more color tile is added in the front end. Isn't this will be faster and easily scalable?

[@greatvibes_with_sonal]

Yes I tried the same logic.

[@TradingTales]

Can you share the code for the same??​@@greatvibes_with_sonal

[@Aman4864y]

20:47 that’s great using this we don’t even need any if or switch case because expression itself is sufficient for deciding the background colour

[@premtolani4688]

Literally after i seen the way he teaches the coding is unbelievable that easy going process never found anywhere else!

[@anishagupta6308]

Thank you so much for this series. It helps a lot to undertand coding in a much better way. Your style of teaching is very good.

[@RahulSharma-wz6yv]

Humne end tak dekha hai video, Aapki baatein sunane ka mazaa ek taraf or code sikhna ek taraf

[@noobless88]

never seen any other youtuber, online bootcamps and even my college professors taking time to make us understand everything this detailed.

[@prakharpratyush7828]

instead of the if-else statements in the color switcher we can directly do body.style.background =event.target.id , both works the same.

[@lovegoyner7450]

i did the same 😆😆😆😆

[@DeskAsus]

​@@lovegoyner7450Don't laugh, there is so much in it. He knew the simplest approach, but thought to go with beginner idea. So a viewer gains confidence here. And additionally, in case of black coloor background the texts won't show so you would need text color to change there in the if condition

[@tejaskhanolkar3844]

सर जी ...... आपके videos होते बहोत अच्छे और समज भि आसानिसे आते है| लेकीन videos थोडा लेट आते है तो थोडी दीक्क्ते आती है .... ..... .... तो हम चाहते है आप अक video "आप चिजे कैसे सिखते हो" इसपे अक video बनायीए . बस request है देखिये. वक्त मिये तो जरुर बनायीए .. Shere तो हम करिही लेंगे.😊🙏

[@manukaushik8901]

Time Stamp ProjectWise Project 1 = 9:50 Project 2 = 25:30 Project 3 = 42.37 Project 4 = 50.00

[@shadikhusain1216]

Finallay jis chai+js project ka intezaar tha vo aakhir mil hi gya hai. Ye sabb @Hitesh sir ka hi kamal hai. ❤😂

[@shubhamaths]

completed within 2 days (not consistent) but do every line of code logically . Now I'm getting confidence in Js . Thank you sir .❤❤ Love from WB

[@xyz4597]

Can't we do the same with vs code editter instead the one from he is doing?

[@shubhamaths]

@@xyz4597 Yes you can , but you have to create account on the platform . Then you can copy paste the code in you vs code editor and can run the code easily.

[@sapavathlokesh6210]

even this one works without using if statement because we are using for each loop const buttons = document.querySelectorAll(".button"); const body = document.querySelector("body"); buttons.forEach((button) => { button.addEventListener("click", (e) => { body.style.backgroundColor = e.target.id; }); });

[@iUttamRao]

I was going to reply same...

[@SKD14344AK]

yes we can do this also , but for more readability may be sir took this "if" method

[@Prajjwal191]

@@SKD14344AK just came here to say the same

[@adamasMagna]

Is it only me who used more simple approach , no loop, no if, no switch 😖🫣 let c1= document.getElementById("c1"); c1.addEventListener("click", function(){ document.body.style.backgroundColor = "#FF8674" });

[@Abhishekh1516techboy]

@@adamasMagna const btn = document.querySelectorAll('.button'); const canvas = document.querySelector('.canvas'); btn.forEach((elm) => { elm.addEventListener('click', (e) => { canvas.style.backgroundColor = window.getComputedStyle(e.target).backgroundColor; }); });

[@hamzasajid7973]

Meny pehly projects kiye baad may Hitesh bhai ki video dekhi and everything was super clear

[@vedantpanchal1276]

Sir , i have a confusion in when to use "new" keyword and what is it's importance. Also can make a video to clear these small things in JS. Thank You

[@chaiaurcode]

Sure I will

[@sureshbhatt363]

Are patience hi nahi hai kaise programmer banega?

[@virenkhokhar6305]

Mast video tha sir... Please aise videos banate rahiye... Thank-you!

[@DeepakThakur-vj2xz]

color scheme = 9:50 BMI = 25:30 Clock =[ 42:00]

[@sujalthakkar2118]

*project 2 Assignment:* const p = document.createElement('p') if(bmi < 18.6) { p.innerHTML = `Unfortunately, you're Under-weight` } else if(bmi >= 18.6 && bmi

[@raazdirp4710]

haan ji kaise hein app ?

[@jagdambadubey6956]

Sir apke channel and teaching ye ehsas ho gya ki mothertounge me seekhna aashan aur mazedar hota h..

[@xxehacker]

Amazing sir ji ❤😅

[@chaiaurcode]

Thanks 😊

[@MonkeyD.3892]

Great Video Sir . Cleared All The Concepts . Thank You Sir

[@GameXLove1]

Yesssssss! Need More videos like this. Thank you sir

[@viveknimbokar2267]

In project 1, Instead of copying if statement we can use below code. const buttons = document.querySelectorAll('.button'); // console.log(buttons); const body = document.querySelector("body"); buttons.forEach(function(button){ // console.log(button); button.addEventListener('click', function(e){ // console.log(e); // console.log(e.target); if(e.target.id){ body.style.backgroundColor = e.target.id; } }) });

[@rajpratap29]

Thanks sir for this amazing series and these amzing projects. I have completed all four projects you make learning really easy you really are a great teacher power of 10+ years of experience.

[@Vasundhara482]

Amazing sir ji😇 Thank you so much❤

[@RajeevTutorials-ii4jc]

sir jii aapki video dekhta dekhta ab mja bhut jyda aata h daily ka routine h ki shurvat aap channel chai aur code se hi hoti h guru jii😍😍❤❤

[@gratefulstudent]

you are an extremely inspiring teacher. I have finished the first part of javascript series and excited for projects. the learning experience is so enriching that i take out time anyhow to learn from you Sir. Extremely grateful for first class content and ever inspiring tone.

[@durgaprasadparmar5339]

project 2-> assignment if(bml18.6 && bml24.9) results.innerHTML = `overweight ${bml}`;

[@suuuiiiiiii__7]

function newGame(){ const newGameButton = document.querySelector("#newGame") newGameButton.addEventListener("click", function(e){ location.reload(); }) } It should solve every kind of problem, but it's okay to set it manually so that we can understand why and where it's happening

[@aitest2-t1g]

const buttons = document.querySelectorAll('.button') const body = document.querySelector('body') buttons.forEach(function(button){ button.addEventListener('click', function(event){ body.style.backgroundColor = event.target.id }) }) I think so for project 1 we don't have to use if statements, it works fine other way

[@Anshu_0.7]

I accept in front of everyone that yes I copied the last project step by step ek dum copy kar liya but I have no shame kyuki I promise to myself abhi raat ho gayi hai but kal subha last project ko pura samjhunga acche se aur phir se banaunga bina dekhe kam se kam 2 bar

[@joyguha7944]

i can say thanks word is very small for your free contribution. your teaching way is far better that other you tubers and paid courses.

[@touhedislam007]

const buttons = document.querySelectorAll(".button"); const body = document.body; buttons.forEach((btn) =>{ btn.addEventListener("click", (e) =>{ body.style.backgroundColor = e.target.id; }) })

[@shadikhusain1216]

Ess series se ekk chiz to mili hai ki confidence level badha hai aur quality code mil raha hai. Jo sabb jagah milna na mumkin hai

[@Codbala]

Chai Aor Code Pahli Baar mein he Mai aapka fan Ho Gya ❤️❤️❤️😍

[@tech_channel110]

shandar projects shandar explanation shnadar lectures/videos love you sir

[@Alearner-world]

Project 1 : Color change , Code with Switch : buttons.forEach(function (btn) { console.log(btn); btn.addEventListener('click', function (e) { console.log(e); console.log(e.target); switch (e.target.id) { case 'grey': case 'blue': case 'yellow': case 'white': body.style.backgroundColor = e.target.id; break; } }); });

[@SurajKumar-kb3fw]

thanks bro

[@sairajrajput4857]

This series is masterpiece.

[@Iammuslim947]

i am just coming back to vid after finshing these projects now its time to proceed

[@decent719]

Best sir ever... Agr css ki koi playlist hoti to hm bi bolte ka puri web development hitesh sir se sekhi...pr koi baat nii React or backend to haaa...❤❤❤

[@h4s4n_ma]

maza aagya sir aage se bhi aise hi video leke aao

[@sachin0xblock]

"Chai and Code, your JavaScript series is an absolute gem! 🌟 I just wrapped up your challenging assignments, and I'm blown away by the depth and clarity of your content. A true delight for JavaScript enthusiasts like me! 👏🚀"

[@kapilkaushik8755]

bhai kya clear krte ho ek-ek term 🙏🙏🙏🙏 dil k thought h yeh

[@akashmondal3952]

thankyou , learned many things from this projects. lots of love sirji

[@nehabansal370]

"Kyunki m ho easy to hoga hi hoga", this line gives another level of excitement😇

[@TradingTales]

+confidence

[@rendevous9253]

Sir please markdown ki koi short tutorial bana dena , mujhe ati hai par phir bhi aap ki experience se kuch extra mil jayegi sikhne ko

[@anuj5427]

After one year sir this series still Number one on yt

[@rixshaikh397]

Thank You Sir Aap Itni Mehnat kar ke Ye course bana rahe ho Bahot Bahot Thank You ❤️

[@anilshelke1308]

awesome. so much interesting❤.Thank you SIR.

[@HimanshuSharma-um3hf]

sir said he wont be focusing on designing and in the last project he nailed it 😮

[@vikralkumar8127]

Sir the way you talk is really is sounds so good your teaching style is really amazing. I can't takes my off from you.thank you sir from the bottom of my heart❤❤.

[@studytime6668]

DOM finish, amazing sir I'm very inspire to your teaching style. and your top quality video.

[@amansayer4943]

40:58 added message and also linked it with background color to learn obviously const form = document.querySelector('form'); //this use case will give us empty value; // const height = parseInt(document.getElementById('height').value); // const weight = parseInt(document.getElementById('weight').value); form.addEventListener('submit',function(e){ e.preventDefault(); const height = parseInt(document.getElementById('height').value); const weight = parseInt(document.getElementById('weight').value); const result = document.getElementById('result'); const body = document.getElementsByTagName('body')[0]; if(height === '' || height < 0 || isNaN(height)){ result.innerHTML = `please give a valid height ${height}`; } else if(weight === '' || weight < 0 || isNaN(weight)){ result.innerHTML = `please give a valid weight ${weight}`; } else{ const BMI = (weight / ((height*height)/10000)).toFixed(2); let message = ""; if(BMI 18.6 && BMI

[@Sumeshkumarback]

Ye each time message= message + .... Kyon Kiya direct likhte toh bhi hota tha na

[@bilalbhatti6466]

Thank You so much sir........Very helpful for me...bundle of thanks

[@faizandarwesh9606]

Your teaching skills are next level. Thank you so much

[@hanging_life]

In the first project there is no need of if condition. just take the id (as a color) and give it to body like: color = e.target.id; body.style.backgroundColor = color; or in a single line: body.style.backgroundColor = e.target.id;

[@69pinkman50]

hmm const button = document.querySelectorAll('.color') const body = document.querySelector('body') button.forEach(button => { button.addEventListener('mouseover', function(e){ body.style.backgroundColor = e.target.id })

[@RoronoaZoro78687]

Thanku so much sir

[@sanjeebgochhayat6911]

1st project const buttons = document.querySelectorAll('.button'); const body = document.querySelector('body'); //because buttons is a nodelist we can loop through all items using forEach loop buttons.forEach((btn) => { btn.style.cursor = 'pointer'; btn.addEventListener('click', (e) => { const colorValue = e.target.id; body.style.backgroundColor = colorValue; }); });

[@SarveshKumar-08]

00:02 The video discusses building 4 JavaScript projects for beginners. 05:17 Let's build 4 JavaScript projects for beginners 07:22 Learn and build 4 beginner-level JavaScript projects 09:50 First JavaScript projects Color Changer. 11:25 Selecting and changing the color of elements using JavaScript 13:02 Learn to select buttons and body using Document. Query method in JavaScript 16:36 Creating event listeners and handling events in JavaScript. 18:11 Choosing the first lock and understanding the event and target in JavaScript 21:52 Implementing JavaScript projects for beginners 23:46 Practice JavaScript projects with different approaches and learn through a playground. 25:30 Second JavaScript Project BMI Calculator 27:45 Select the form and handle the submit event 29:14 Prevent default action of form submission in JavaScript 32:48 Learn how to store, access, and manipulate values in JavaScript 34:31 Checking for valid height in the JavaScript project 38:07 Calculate BMI using the formula: weight divided by height squared 39:48 Building HTML and JavaScript projects for beginners 42:37 Third JavaScript Project Digital Clock 43:49 Query Select is used to display the clock 45:49 Learning about the setInterval method in JavaScript. 49:17 Build a JavaScript project to evaluate a user-entered number against a randomly generated number. 50:00 Fourth JavaScript Project Guess The Number 51:15 Generating random numbers in JavaScript using the Math library 54:47 Taking user input for select query in JavaScript 56:40 Learn how to build 4 JavaScript projects for beginners. 1:00:16 Validation and check of gas values in the game 1:01:58 Displaying messages using JavaScript methods 1:05:32 Building 4 JavaScript projects for beginners 1:07:21 Introduction to the number validation method 1:10:59 Display gas and message 1:12:49 Display messages based on gas value and random number 1:17:03 Cleaning and updating values of gases in JavaScript 1:18:42 The new method is about displaying a message and adding values to it. 1:21:56 Adding input fields and buttons in JavaScript projects 1:23:40 Adding HTML elements and attributes in JavaScript 1:27:34 Build a function that handles event listeners in JavaScript 1:29:22 Removing attributes and child elements in JavaScript

[@avibirla9863]

Thanks for introducing stackblitz ... Amazing platform 🔥

[@chaiaurcode]

Glad you like it!

[@VikashSingh-hc6zo]

🍵 + 🧑‍💻 "Chai bhi pehli baar pee or Projects bhi pehli baar kiye hai sir or maja agya " Thanks a lot sir maja a gya mene sabhi project kiye or kuch apna touch bhi dia apse padne me boht maja ata hai sir time ka pta ni lagta kab ho gya Thank you so much sir 🙏

[@mihir____]

जितना भी शुक्रिया करे सर जी कम हैं। ❤

[@AhmedRehan01]

Thank you so much for this series. It helps a lot to undertand coding in a much better way. Your style of teaching is very good.

[@GajananPatange-kj7fh]

thanks for the practicing these projects