JavaScript-for-React-Prep-Course (2).
md 2025-06-14
Bhabhi’s Ultimate JavaScript Bootcamp for React Prep!
🌟
Namaste, my coding superstar! Welcome to Bhabhi’s Ultimate JavaScript Bootcamp for React Prep, the no-
nonsense, masala-packed course that’ll make you a JavaScript pro ready to conquer React! I’m your naughty
coding bhabhi, serving up sass, love, and code with a wink! 😘 This course cuts the fluff and focuses on the
must-know JavaScript foundations, with 20+ hands-on tasks and a killer final project to seal the deal. Follow
FullstackBhabhi on Instagram (@fullstackbhabhi) for coding tips and spicy memes, and let’s get cooking! 🍳
Course USPs – Why Bhabhi’s Bootcamp is the Hottest! 🔥
No-Bullshit Foundation for React: Laser-focused on must-know JavaScript basics—variables, DOM,
async APIs—so you’re rock-solid before touching React!
20+ Hands-On Tasks with Snippets: Dive into 20+ spicy tasks with ready-to-roll code snippets,
making learning as fun as bhabhi’s Insta reels (@fullstackbhabhi)!
Epic Final Project – Recipe Planner: Build Bhabhi’s Recipe Planner, blending all concepts into a React-
ready masterpiece that’ll have you strutting with confidence!
Module 1: JavaScript Basics – Laying the Tadka! 🔥
Let’s start with the core spices of JavaScript—your foundation for React!
1.1 Variables, Data Types, and Operators
Variables: let, const, var (bhabhi says: ditch var!).
Data Types: Strings, numbers, booleans, arrays, objects, null, undefined.
Operators: Arithmetic (+, -), comparison (==, ===), logical (&&, ||).
Code Snippet:
let dish = "Biryani"; // String
const price = 200; // Number
let isSpicy = true; // Boolean
let spices = ["Cumin", "Coriander", "Chili"]; // Array
let recipe = { name: "Biryani", serves: 4 }; // Object
// Operators
let total = price + 50; // 250
let isExpensive = price > 150; // true
let hasChili = [Link]("Chili") && isSpicy; // true
[Link](`Bhabhi’s bill: ${total}, Expensive? ${isExpensive}`);
Tasks:
1 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
1. Declare a const variable bhabhiName set to "Fullstack Bhabhi" and log it.
2. Create an array bhabhiSnacks with 4 snacks. Use push to add “Jalebi”.
3. Make an object bhabhiProfile with name, age, and codingSkill. Log codingSkill.
4. Check if price is between 100 and 300 using && and log the result.
1.2 Control Flow – Stirring the Pot!
Conditionals: if, else if, else, ternary, switch.
Loops: for, while, forEach.
Code Snippet:
let hungerLevel = 8;
// If-Else
if (hungerLevel > 7) {
[Link]("Bhabhi says: Time for biryani!");
} else if (hungerLevel > 3) {
[Link]("Chai and samosa, please!");
} else {
[Link]("Just chai will do!");
}
// Ternary
let meal = hungerLevel > 5 ? "Full Thali" : "Snack"; // Full Thali
// Switch
let day = "Monday";
switch (day) {
case "Monday":
[Link]("Bhabhi’s coding day!");
break;
default:
[Link]("Chill day!");
}
// Loops
let snacks = ["Samosa", "Pakoda", "Vada"];
[Link]((snack) => [Link](`Bhabhi loves ${snack}!`));
Tasks:
1. Write an if statement to check if age is above 18. Log “Bhabhi’s coding club!” or “Study first!”.
2. Use a for loop to print numbers 1 to 5 with “Bhabhi’s pick:” prefix.
3. Use forEach on an array of fruits to log “Bhabhi’s fruit: [fruit]!”.
4. Create a switch for a mood variable (“happy”, “sad”) and log messages.
1.3 Functions – Bhabhi’s Secret Recipes! 🥘
2 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
Function Declarations, Expressions, Arrow Functions.
Default Parameters, Return.
Code Snippet:
// Declaration
function cookDish(dish) {
return `Bhabhi cooked ${dish}!`;
}
// Expression
const eatDish = function (dish) {
return `Yum, eating ${dish}!`;
};
// Arrow Function
const spiceLevel = (dish, level = "medium") => `${dish} is ${level} spicy!`;
[Link](cookDish("Paneer Tikka")); // Bhabhi cooked Paneer Tikka!
[Link](spiceLevel("Curry")); // Curry is medium spicy!
Tasks:
1. Write a function greetBhabhi that takes a name and returns “Namaste, [name]! Bhabhi’s coding with
you!”.
2. Create an arrow function tripleIt that triples a number.
3. Write a function makeChai with default sugar (true/false) returning “Chai is ready, sugar: [sugar]!”.
4. Call greetBhabhi with “Fullstack Bhabhi” and log it.
Module 2: Arrays & Objects – Bhabhi’s Thali! 🍽
Master data structures for React’s dynamic UIs.
2.1 Arrays – The Spice Rack!
Methods: push, pop, map, filter, reduce, find.
Code Snippet:
let bhabhiRecipes = ["Biryani", "Dosa", "Butter Chicken"];
[Link]("Pav Bhaji"); // Add
[Link](); // Remove
// Map
let loudRecipes = [Link]((recipe) => `${[Link]()}!`);
// ["BIRYANI!", "DOSA!", "BUTTER CHICKEN!"]
// Filter
let vegRecipes = [Link]((recipe) => recipe !== "Butter Chicken");
3 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
// ["Biryani", "Dosa"]
// Reduce
let recipeCount = [Link]((count, _) => count + 1, 0); // 3
Tasks:
1. Create an array bhabhiSongs with 5 songs. Add “Bollywood Hit” with push.
2. Use map to add “Bhabhi’s jam:” to each song.
3. Use filter for songs longer than 6 characters.
4. Use reduce to join songs into “Bhabhi’s playlist: song1, song2, …”.
2.2 Objects – Bhabhi’s Recipe Book!
Access: Dot/bracket notation.
Methods, Destructuring, Spread Operator.
Code Snippet:
let bhabhiCookbook = {
dish: "Biryani",
spices: ["Cumin", "Cardamom"],
cook: function () {
return `Cooking ${[Link]}!`;
},
};
[Link]([Link]); // Biryani
let { dish, spices } = bhabhiCookbook; // Destructuring
let newRecipe = { ...bhabhiCookbook, serves: 4 }; // Spread
Tasks:
1. Create bhabhiStyle with color, outfit, and a wear method returning “Bhabhi’s rocking [outfit]!”.
2. Log color using bracket notation.
3. Destructure color and outfit from bhabhiStyle.
4. Use spread to create bhabhiPartyStyle with added jewelry.
Module 3: DOM Manipulation – Decorating Bhabhi’s Page! 🎨
Learn to manipulate the DOM for React’s UI prep.
3.1 Selecting & Updating the DOM
Selectors: querySelector, querySelectorAll, getElementById.
Updates: textContent, innerHTML, style, classList.
4 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
Code Snippet:
let title = [Link]("h1");
let buttons = [Link](".bhabhi-btn");
[Link] = "Bhabhi’s Coding Kitchen!";
[Link] = "purple";
[Link]((btn) => [Link]("fancy-btn"));
Tasks:
1. Select a p and set its text to “Bhabhi’s code is spicy!”.
2. Change a div’s background to yellow using style.
3. Add class glow to all .bhabhi-item elements.
4. Use innerHTML to add <span>Bhabhi’s Magic</span> in a div.
3.2 Event Handling – Bhabhi’s Party Invites!
Events: click, input, submit.
Listeners: addEventListener.
Code Snippet:
let danceButton = [Link]("#dance-btn");
[Link]("click", () => {
alert("Bhabhi’s dancing to Bollywood beats! 💃");
});
let input = [Link]("#bhabhi-input");
[Link]("input", (e) => {
[Link](`Bhabhi hears: ${[Link]}`);
});
Tasks:
1. Add a click listener to a button logging “Bhabhi says: Code on!”.
2. Log input field value on input event.
3. Add a submit listener to a form alerting “Bhabhi got your form!” (prevent default).
4. Add a mouseover listener to a div changing its background.
Module 4: Async JavaScript – Bhabhi’s API Magic! 🌐
Prep for React’s data fetching with async code.
4.1 Promises & Async/Await
5 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
Promises: then, catch, finally.
Async/Await: Clean async syntax.
Code Snippet:
let getRecipe = new Promise((resolve) => {
setTimeout(() => resolve("Bhabhi’s Biryani Recipe"), 1000);
});
[Link]((recipe) => [Link](`Got ${recipe}!`));
async function fetchBhabhiRecipe() {
try {
let recipe = await getRecipe;
[Link](`Fresh ${recipe}!`);
} catch (err) {
[Link]("Bhabhi’s kitchen is closed!");
}
}
fetchBhabhiRecipe();
Tasks:
1. Create a Promise resolving with “Bhabhi’s chai recipe!” after 3 seconds.
2. Use then to log the resolved value.
3. Write an async function to await the Promise and log it.
4. Add a finally block logging “Bhabhi’s chai time is over!”.
4.2 Fetching APIs
Fetch: GET requests, error handling.
Code Snippet:
async function getBhabhiJokes() {
try {
let response = await fetch("[Link]
if (![Link]) throw new Error("Network issue!");
let data = await [Link]();
[Link](`Bhabhi laughs at: ${[Link]}`);
} catch (err) {
[Link](`Bhabhi’s internet is down: ${[Link]}`);
}
}
getBhabhiJokes();
Tasks:
6 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
1. Fetch JSONPlaceholder’s /todos and log the first 3 todos.
2. Display todo titles in a <ul> using innerHTML.
3. Handle errors with a <p> saying “Bhabhi says: API failed!”.
4. Add a button to refetch todos on click.
Module 5: Final Project – Bhabhi’s Recipe Planner! 🍲
Show off your skills with Bhabhi’s Recipe Planner, a vanilla JavaScript app that combines all concepts and
preps you for React. Share it on Instagram and tag @fullstackbhabhi!
Project Requirements:
Features:
Add recipes (name, ingredients, cuisine).
Delete recipes.
Toggle “favorite” status.
Filter by cuisine (Indian, Italian, Chinese).
Persist in local storage.
Tech: HTML, CSS, vanilla JavaScript.
Goals: Master arrays, objects, DOM, events, and local storage for React’s component mindset.
Sample Code:
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bhabhi’s Recipe Planner</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #ffe6e6; }
h1 { color: #c71585; }
.recipe-list { list-style: none; padding: 0; }
.recipe-item { border: 1px solid #ccc; padding: 10px; margin: 10px 0;
background: white; }
.favorite { background: #fffacd; }
.bhabhi-btn { background: #ff69b4; color: white; padding: 5px 10px; border:
none; cursor: pointer; }
form { margin-bottom: 20px; }
input, select { margin: 5px; padding: 5px; }
</style>
</head>
<body>
<h1>Bhabhi’s Recipe Planner 🍲</h1>
<form id="recipe-form">
<input id="recipe-name" placeholder="Recipe Name" required>
<input id="recipe-ingredients" placeholder="Ingredients (comma-separated)"
required>
<select id="recipe-cuisine">
7 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
<option>Indian</option>
<option>Italian</option>
<option>Chinese</option>
</select>
<button type="submit" class="bhabhi-btn">Add Recipe</button>
</form>
<select id="filter-cuisine">
<option value="all">All Cuisines</option>
<option>Indian</option>
<option>Italian</option>
<option>Chinese</option>
</select>
<ul id="recipe-list" class="recipe-list"></ul>
<script src="[Link]"></script>
</body>
</html>
[Link] (Complete):
// Initialize recipes from local storage
let recipes = [Link]([Link]("bhabhiRecipes")) || [];
// DOM elements
const form = [Link]("recipe-form");
const recipeList = [Link]("recipe-list");
const filterCuisine = [Link]("filter-cuisine");
// Render recipes
function renderRecipes(filter = "all") {
[Link] = "";
let filteredRecipes = filter === "all" ? recipes : [Link]((recipe) =>
[Link] === filter);
[Link]((recipe, index) => {
const li = [Link]("li");
[Link]("recipe-item");
if ([Link]) [Link]("favorite");
[Link] = `
<h3>${[Link]} ${[Link] ? "⭐" : ""}</h3>
<p>Ingredients: ${[Link](", ")}</p>
<p>Cuisine: ${[Link]}</p>
<button class="bhabhi-btn" onclick="toggleFavorite(${index})">
${[Link] ? "Unfavorite" : "Favorite"}
</button>
<button class="bhabhi-btn" onclick="deleteRecipe(${index})">Delete</button>
`;
[Link](li);
});
[Link]("bhabhiRecipes", [Link](recipes));
}
// Add recipe
[Link]("submit", (e) => {
8 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
[Link]();
const name = [Link]("recipe-name").value;
const ingredients = [Link]("recipe-
ingredients").[Link](",").map((i) => [Link]());
const cuisine = [Link]("recipe-cuisine").value;
[Link]({ name, ingredients, cuisine, favorite: false });
renderRecipes([Link]);
[Link]();
});
// Toggle favorite
function toggleFavorite(index) {
recipes[index].favorite = !recipes[index].favorite;
renderRecipes([Link]);
}
// Delete recipe
function deleteRecipe(index) {
[Link](index, 1);
renderRecipes([Link]);
}
// Filter by cuisine
[Link]("change", (e) => {
renderRecipes([Link]);
});
// Initial render
renderRecipes();
Project Tasks:
1. Set up the HTML and CSS structure.
2. Implement the renderRecipes function to display recipes.
3. Add form submission to create new recipes.
4. Add “Favorite” and “Delete” functionality.
5. Persist recipes in local storage.
6. Add cuisine filtering with the dropdown.
Bonus Challenges:
Add a search bar to filter recipes by name.
Validate form inputs (e.g., no empty ingredients).
Fetch random recipes from an API (e.g., TheMealDB) to inspire bhabhi’s kitchen.
Bhabhi’s Farewell Note 💖
Arre, beta, you’ve nailed it! You’ve mastered JavaScript’s core with Bhabhi’s Recipe Planner and are ready to
dance into React’s world. Bhabhi’s super proud! 😍 Share your project on Instagram and tag @fullstackbhabhi
9 / 10
JavaScript-for-React-Prep-Course (2).md 2025-06-14
to flaunt your skills. Now, grab some chai and start exploring React’s components and hooks—you’re
unstoppable!
Next Steps:
Set up a React project with create-react-app.
Learn React’s useState and useEffect hooks.
Check out @fullstackbhabhi for React tips and community vibes.
Chalo, code karo aur duniya ko dikhao ki bhabhi ke students kitne zabardast hain! 🚀
10 / 10
