Lets build 4 javascript projects for beginners | chai aur #javascript

#javascript #hindi
Sara code yaha milta h

Discord pe yaha paaye jaate h:
Instagram pe yaha paaye jaate h:

[Hafijur]

🎯 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

[budgetarena]

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

[lalitpanwarseo]

Apki video se mujhe js k concept acche se clear aur maine 2 chote chote project bhi bnaye hai JavaScript k .... 1. Numerology Driver and Conductor number calculator 2. personal year 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....

[CodeWithGolden-ftne]

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.

[sapavathlokesh]

even this one works without using if statement because we are using for each loop

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

[vikashjalandra]

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 🙇🏻‍♂️

[Anujkumar-oubw]

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...😇

[AbdulSattar-rjxc]

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❤

[abentertainment]

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!!!

[Aptilover]

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

[jagdambadubey]

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

[anishagupta]

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.

[prakharpratyush]

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

[hamzasajid]

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

[RahulSharma-wzyv]

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

[Priyanka-bdum]

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

[thedeepanshu]

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

[saksham_]

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

[premtolani]

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

[rixshaikh]

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