I am a beginner learning JavaScript from scratch. My goal is to learn JS so I can move 
to React and then Python backend for a job. I don't want to waste time on things I won't 
use. Please teach me "Variables & Data Types" in JavaScript.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. var / let / const — what they are, difference between them, which one to use and why
2. Data types — string, number, boolean, null, undefined — with simple real-life examples
3. typeof operator — how to check what type a variable is

Rules for teaching:
- Assume I am a complete beginner
- Use very simple real-life analogies and examples
- Show small code examples for every concept
- After each sub-topic, give me 2-3 small practice exercises
- Tell me what to avoid or what beginners commonly get wrong
- Do NOT teach advanced concepts like hoisting, temporal dead zone etc. 
  I don't need them right now
- Keep each explanation short, friendly and to the point
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS to move to React and then 
get a job. Please teach me "Operators in JavaScript".

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Arithmetic operators — + - * / % (with real examples like calculating price, age etc.)
2. Comparison operators — == === !== > < >= <= 
   (very important: explain == vs === clearly with examples)
3. Logical operators — && || ! (with real if-condition examples)
4. Ternary operator — condition ? valueIfTrue : valueIfFalse 
   (this is used a LOT in React, explain it well)

Rules for teaching:
- Assume I am a complete beginner
- Use very simple relatable examples (shopping, age checks, scores etc.)
- Show code for every single concept
- After each sub-topic, give me 2-3 small practice exercises
- Highlight common mistakes beginners make
- Do NOT go into bitwise operators, comma operators or any advanced stuff
- Keep tone friendly and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Conditionals and Loops in JavaScript".

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. if / else if / else — decision making in code with real life examples
2. switch statement — when to use switch instead of if/else, with examples
3. for loop — counting, repeating tasks, looping over a list of items
4. while loop — when to use while instead of for, with simple examples
5. break & continue — how to stop or skip inside a loop

Rules for teaching:
- Assume I am a complete beginner
- Use very simple relatable examples (menu choices, counting items, scores etc.)
- Write and explain small code snippets for every concept
- After each sub-topic, give me 2-3 small practice exercises
- Tell me which one I'll use most often in real projects
- Do NOT teach for...in, for...of, do...while or label statements right now
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Function Types in JavaScript".

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Function declaration — what a function is, why we use it, how to define and call it,
   with simple real-life analogies (like a recipe or a machine)
2. Function expression — storing a function in a variable, how it differs from 
   declaration, when to use it
3. Arrow functions (=>) — the modern short way to write functions, how to convert 
   a regular function to arrow function step by step, one-liner arrows
4. Parameters & arguments — the difference between them, passing values into functions
5. Return values — what return does, what happens without return, returning different 
   data types

Rules for teaching:
- Assume I am a complete beginner
- Use very simple real-life analogies (a function is like a machine: you put 
  something in, it gives something back)
- Show code for every single concept with line by line explanation
- After each sub-topic give me 2-3 small practice exercises
- Arrow functions are used HEAVILY in React — explain them extra clearly
- Do NOT teach IIFE, generator functions, or function constructors right now
- Highlight the most common beginner mistakes for each concept
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Advanced Function Concepts in JavaScript".
These concepts are used directly in React so please explain them with extra care.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Default parameters — giving a parameter a fallback value if nothing is passed,
   with practical examples
2. Rest parameters (...args) — when you don't know how many arguments will be passed,
   collecting them all into an array
3. Callback functions — passing a function as an argument to another function,
   why this is so useful, real simple examples (like giving instructions to someone)
4. Higher-order functions — functions that take another function as input OR return 
   a function, connect this to .map() and .filter() so I can see why this matters

Rules for teaching:
- Assume I am a beginner but I already know basic function syntax
- Use very simple real-life analogies for callbacks especially 
  (example: "I'll call you back when the food is ready")
- Show clear code examples with step by step explanation for every concept
- After each sub-topic give me 2-3 small practice exercises
- Callbacks and higher-order functions are used EVERY DAY in React — 
  make sure I really understand WHY they exist, not just HOW to write them
- Do NOT teach "this" keyword, bind/call/apply, or currying right now
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Scope in JavaScript".
This topic confuses many beginners so please be extra clear and use lots of visuals 
and analogies.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Global scope — what it means for a variable to be global, why too many global 
   variables is a problem
2. Local / Function scope — variables that only exist inside a function, why this 
   is actually a good thing, what happens if you try to access them outside
3. Block scope — how let and const behave inside {} curly braces (if blocks, 
   for loops), how this differs from var (just a simple comparison, not too deep)
4. Closure — just the basic idea: a function remembering the variables from 
   the place it was created, one simple real-life analogy + one code example.
   Keep this very light — just enough to know what the word means when I 
   see it in React

Rules for teaching:
- Assume I am a complete beginner
- Use a real-life analogy for scope — like rooms in a house, or a school 
  with different classrooms. Variables are like items that only exist 
  in certain rooms.
- Show code for every concept with clear comments explaining what is 
  accessible where
- After each sub-topic give me 2-3 small practice exercises
- For closure — just a simple intuition is enough. No deep dive needed.
- Do NOT teach hoisting, the temporal dead zone, or module scope right now
- Highlight the most common beginner mistakes (like using var in loops)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Arrays in JavaScript".

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What is an array — why we need arrays, how to create one, how arrays store 
   multiple values in one variable. Use a real-life analogy like a shopping list 
   or a list of students.
2. Accessing array items — index numbers (starting from 0), getting first and last 
   item, what happens if you access an index that doesn't exist
3. Modifying arrays — push() to add at end, pop() to remove from end, 
   shift() to remove from start, unshift() to add at start. Show before 
   and after examples for each.
4. Useful array methods — indexOf() to find position of an item, includes() to 
   check if item exists, length property to count items
5. slice() and splice() — slice to copy part of array without changing original, 
   splice to remove or replace items. Show clear examples of both with 
   before and after results.

Rules for teaching:
- Assume I am a complete beginner
- Use real-life relatable examples throughout (grocery list, student names, 
  scores, etc.)
- Show code for every single concept with clear comments
- After each sub-topic give me 2-3 small practice exercises
- Clearly show what the original array looks like and what it looks like 
  after each operation
- Do NOT teach typed arrays, array destructuring (coming later), 
  or Array.from() right now
- Highlight the most common beginner mistakes (like forgetting index starts at 0)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Array Methods in JavaScript".

These methods are THE most used things in React — I will use them every single day.
So please teach each one with extra care, real examples, and connect each method 
to how it will be used in a real React app.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. .map() — transforming every item in an array into something new, returns a new 
   array. Real example: converting a list of names to uppercase, or a list of 
   prices with tax added. Then show how React uses .map() to display a list of 
   products on a page.

2. .filter() — keeping only items that pass a condition, returns a new array with 
   fewer items. Real example: filtering only products under $50, or only active 
   users. Then show how React uses .filter() to show only completed tasks in a 
   to-do list.

3. .find() — finding the FIRST item that matches a condition, returns that single 
   item (not an array). Compare it with .filter() so I understand the difference 
   clearly.

4. .forEach() — looping over every item to DO something (like console.log each), 
   but returns nothing. Clearly explain the difference between .forEach() and 
   .map() — this confuses many beginners.

5. .reduce() — combining all array items into a single value (like a total price 
   or a sum of scores). Use a very simple shopping cart total example. 
   Keep it beginner friendly — just the basic pattern, not complex use cases.

6. .some() and .every() — .some() checks if AT LEAST one item passes a condition, 
   .every() checks if ALL items pass. Real examples like checking if any item is 
   out of stock, or if all students passed.

Rules for teaching:
- Assume I am a beginner who knows basic arrays
- For EVERY method: first explain what it does in plain English, then show 
  the syntax, then show a simple example, then show a slightly realistic example
- Always show what the INPUT array looks like and what the OUTPUT/result looks like
- After each sub-topic give me 2-3 small practice exercises
- .map() and .filter() are the most critical — spend extra time on these two
- Connect each method to a real React use case so I understand WHY I'm learning it
- Do NOT go into chaining multiple methods, or complex reduce patterns right now
- Highlight the most common beginner mistakes for each method
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Objects in JavaScript".

Objects are everywhere in React — API responses, state, props — everything 
is an object. So please teach this topic thoroughly with real examples.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What is an object — why we need objects, how they differ from arrays, 
   how to create an object with key-value pairs. Use a real-life analogy 
   like a person's profile card or a product in a store.

2. Dot notation vs bracket notation — two ways to access object properties, 
   when to use dot (most of the time) and when to use bracket notation 
   (dynamic keys, keys with spaces). Show examples of both.

3. Adding, updating and deleting properties — how to add a new key to an 
   existing object, how to change an existing value, how to remove a key 
   using delete. Show before and after for each operation.

4. Nested objects — objects inside objects (like a user object with an 
   address object inside). How to access deeply nested values using 
   dot notation. Real example like a user profile from an API response.

5. Object.keys(), Object.values(), Object.entries() — three very useful 
   built-in methods. keys() gives all property names, values() gives all 
   values, entries() gives both as pairs. Show a real example using each 
   and explain when you'd use them.

Rules for teaching:
- Assume I am a complete beginner
- Use real-life relatable examples throughout (user profile, product details, 
  student record, etc.)
- Show code for every concept with clear comments
- After each sub-topic give me 2-3 small practice exercises
- Nested objects and dot notation are used constantly in React when 
  working with API data — explain these extra clearly
- Do NOT teach object destructuring (coming in Phase 4), object methods 
  with "this", prototypes, or classes right now
- Highlight the most common beginner mistakes 
  (like trying to loop an object with .map())
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Destructuring in JavaScript".

Destructuring is used EVERYWHERE in React — in props, state, API responses, 
function parameters. So please teach this with extra care and connect every 
concept to how React uses it.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Array destructuring — extracting values from an array into individual variables 
   using their position. Show the old way vs the new destructuring way side by side 
   so I can see why it's better. Real example: destructuring coordinates, RGB values, 
   or a useState hook result (just show the syntax, don't explain React hooks yet).

2. Object destructuring — extracting properties from an object into individual 
   variables using their key names. Again show old way vs new way. Real example: 
   destructuring a user profile object to get name, age, email separately.

3. Renaming while destructuring — how to give a different variable name while 
   destructuring an object property. Example: extracting "name" from object but 
   storing it as "userName". Show clearly when and why this is useful.

4. Default values in destructuring — what happens when a property doesn't exist 
   in the object or array, how to set a fallback default value while destructuring.
   Show examples with both array and object destructuring.

Rules for teaching:
- Assume I am a beginner who knows arrays and objects well
- Always show the OLD way first (without destructuring), then show the NEW way 
  (with destructuring) so I clearly see the benefit
- Show code for every concept with clear comments
- After each sub-topic give me 2-3 small practice exercises
- Object destructuring is used the most in React (props destructuring) — 
  explain it extra clearly with a React props example at the end
- Do NOT teach destructuring in function parameters, nested destructuring, 
  or swapping variables right now — keep it simple
- Highlight common beginner mistakes 
  (like confusing {} for object destructuring vs block of code)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Spread and Rest Operator in JavaScript".

These two operators look the same (...) but do opposite things. They are used 
constantly in React — especially for updating state without mutating the original 
data. Please teach this with real clear examples.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Spread with arrays [...arr] — copying an array, combining two arrays, adding 
   a new item to an array without changing the original. Show before and after 
   results clearly. Explain WHY we copy instead of mutate 
   (React needs new copies for state updates — just a quick mention).

2. Spread with objects {...obj} — copying an object, merging two objects, 
   adding or overriding a property without changing the original object. 
   Show a real example like updating a user profile object.
   This is the most important one for React state updates — explain it well.

3. Rest in functions (...args) — collecting multiple function arguments into 
   one array when you don't know how many will be passed. Show a simple 
   example like a function that adds any number of numbers together.
   Also show how rest is used in destructuring to collect "the rest" of items.

4. Merging arrays and objects in practice — combining what we learned: 
   merging two arrays into one, merging two objects into one, overriding 
   specific properties while keeping the rest. Show realistic examples 
   like merging a default settings object with user settings.

Rules for teaching:
- Assume I am a beginner who knows arrays, objects and basic functions
- The ... (three dots) confuses beginners — start by explaining that the 
  same symbol does different things depending on context (spread = expanding, 
  rest = collecting). Use a clear analogy.
- Always show what happens to the ORIGINAL — make it clear that spread 
  creates a NEW copy without changing the original
- After each sub-topic give me 2-3 small practice exercises
- Spread with objects (sub-topic 2) is the most critical for React — 
  give it extra attention
- Do NOT teach spread in function calls, or complex nested spread patterns
- Highlight the most common beginner mistakes 
  (like thinking spread deeply clones nested objects)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Template Literals in JavaScript".

This is a shorter topic but very important for writing clean readable code 
in React. Please teach it thoroughly.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Backtick strings — what template literals are, how they differ from regular 
   single or double quote strings, how to create a template literal using 
   backticks (`). Show a simple side by side comparison of old string 
   concatenation (+) vs template literals.

2. Embedding variables and expressions ${} — how to put variables, calculations, 
   function calls, and even ternary operators directly inside a string using ${}. 
   Real examples: building a greeting message, showing a product price with 
   currency, displaying a full name from first and last name variables.

3. Multi-line strings — how template literals make it easy to write strings 
   that span multiple lines without using \n. Show a real example like 
   building an HTML string or a long message.

Rules for teaching:
- Assume I am a complete beginner
- Start with the PAIN of the old way (string concatenation with +) and then 
  show how template literals solve that pain — this makes the lesson stick
- Show code for every concept with clear comments
- After each sub-topic give me 1-2 small practice exercises
- Embedding expressions with ${} is the most useful part — show several 
  examples including a ternary inside ${} because React uses this pattern
- Do NOT teach tagged template literals right now
- Keep this lesson light and fun — it's a short topic!
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Short-circuit Evaluation and Optional 
Chaining in JavaScript".

These are used CONSTANTLY in React — especially for conditional rendering 
(showing/hiding things on screen). Please teach this very carefully with 
React-focused examples.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. && (AND short-circuit) — how JavaScript stops evaluating as soon as it 
   finds a falsy value. Most importantly: how React uses && to conditionally 
   render something on screen only when a condition is true. 
   Example: show a welcome message only if user is logged in, 
   show a loading spinner only while data is loading.

2. || (OR short-circuit) — how JavaScript uses the second value as a fallback 
   when the first is falsy. Real examples: showing a default username if none 
   is provided, showing a placeholder image if no image URL exists.

3. ?? (Nullish coalescing) — similar to || but ONLY treats null and undefined 
   as falsy (not 0 or empty string). Clearly explain the difference between 
   || and ?? with examples where they behave differently. 
   Example: a score of 0 should show "0" not a fallback — this is where 
   ?? is better than ||.

4. ?. (Optional chaining) — safely accessing properties of an object that 
   might be null or undefined, without getting a "cannot read property of 
   undefined" error. Real example: accessing user?.address?.city when user 
   data might not be loaded yet from an API. This saves React apps from 
   crashing constantly.

Rules for teaching:
- Assume I am a beginner who knows basic operators and objects
- Use very simple real-life analogies for short-circuit 
  (like "if it's raining AND you have an umbrella, go out" — 
  if first condition fails, don't even check the second)
- Show code for every concept with clear comments
- After each sub-topic give me 2-3 small practice exercises
- Mention clearly how each concept is used in React — 
  this phase is called "used in React" for a reason
- The difference between || and ?? (sub-topics 2 and 3) is very important — 
  make sure I understand it clearly with contrasting examples
- Do NOT go into deep truthy/falsy tables or complex chaining patterns
- Highlight the most common beginner mistakes 
  (like using || when they should use ??)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "JavaScript Modules — import and export".

React is entirely built on modules — every single React file uses import and 
export. So even though this is a short topic, it is critical to understand 
before starting React.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What are modules and why do we need them — the problem of having all code 
   in one giant file, how modules let us split code into separate files, 
   and how files can share code with each other. Use an analogy like 
   organizing a big project into folders and files.

2. export default — how to export ONE main thing from a file 
   (a function, object, or value), how to import it in another file, 
   and the fact that you can name it anything when importing. 
   Show a real example with two files: one exports a function, 
   the other imports and uses it.

3. Named exports — how to export MULTIPLE things from one file using {}, 
   how to import specific things by their exact name using {}, 
   and how named exports differ from default exports. 
   Show a real example exporting multiple utility functions from one file.

4. Putting it all together — show a small example with 3 files that 
   represent a mini React-like structure: one file for data, one for 
   a helper function, and one main file that imports and uses both. 
   This will make me feel ready for React file structure.

Rules for teaching:
- Assume I am a complete beginner
- Always show TWO files side by side — the file that exports and the 
  file that imports — so I can clearly see how they connect
- Show code for every concept with clear comments and file names 
  (like // file: utils.js and // file: main.js)
- After each sub-topic give me 1-2 small practice exercises
- Make it clear that in React, EVERY component file uses export default 
  and every utility/helper uses named exports — this mental model 
  will help me immediately when I start React
- Do NOT teach dynamic imports, import.meta, or CommonJS (require/module.exports)
- Highlight common beginner mistakes 
  (like forgetting curly braces for named imports)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Selecting DOM Elements in JavaScript".

Important context: I am learning DOM manipulation just enough to understand 
WHAT the DOM is and HOW JavaScript talks to HTML. I will be moving to React 
very soon and React handles the DOM automatically — so I do NOT need to 
master DOM manipulation deeply. Just teach me the core essentials clearly.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What is the DOM — explain what the DOM (Document Object Model) is in the 
   simplest possible way. Use an analogy like a family tree or a map of a 
   building. Explain how the browser turns HTML into a tree of objects that 
   JavaScript can talk to. This mental model is important before touching 
   any DOM methods.

2. getElementById — selecting a single HTML element by its id attribute. 
   Show a simple HTML + JS example together. Explain what gets returned 
   (an element object), and what happens if the id doesn't exist.

3. querySelector — selecting the FIRST element that matches a CSS selector 
   (like a class, tag, or id). Show examples selecting by class (.box), 
   by tag name (h1), and by id (#title). Compare with getElementById — 
   when to use which.

4. querySelectorAll — selecting ALL elements that match a CSS selector, 
   returns a NodeList (like an array). Show how to loop over the results 
   with forEach. Real example: selecting all list items and logging them.

Rules for teaching:
- Assume I am a complete beginner
- Always show simple HTML code AND the JavaScript code together 
  so I can see exactly how they connect
- Show code for every concept with clear comments
- After each sub-topic give me 1-2 small practice exercises
- Keep reminding me that React will handle this automatically — 
  I just need to understand the concept, not memorize every method
- Do NOT teach getElementsByClassName, getElementsByTagName, 
  or any other older selection methods
- Highlight the most common beginner mistakes 
  (like forgetting the # for id or . for class in querySelector)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Changing DOM Elements in JavaScript".

Important context: I only need a basic understanding of this topic because 
React will handle all DOM updates for me automatically. Teach me just enough 
so I understand WHAT is happening behind the scenes when a webpage updates — 
not to master manual DOM manipulation.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. innerHTML and textContent — two ways to read or change the content inside 
   an element. Explain the difference clearly: innerHTML renders HTML tags 
   while textContent treats everything as plain text. Show when to use which, 
   and mention the security risk of innerHTML with user input 
   (just a brief warning, not a deep dive).

2. Changing styles with JavaScript — how to change CSS styles of an element 
   directly using element.style.propertyName. Show examples like changing 
   color, background, font size. Explain camelCase property names 
   (backgroundColor not background-color). Keep this brief — 
   React uses className and CSS files instead of inline style manipulation.

3. classList — adding, removing and toggling CSS classes on an element using 
   classList.add(), classList.remove(), classList.toggle(). 
   Real example: toggling a "dark mode" class on a button click, 
   or showing/hiding an element by toggling a "hidden" class. 
   This concept directly maps to how React conditionally applies classes.

Rules for teaching:
- Assume I am a beginner who understands basic HTML and CSS
- Always show simple HTML + JavaScript code together 
  so I can see the full picture
- Show code for every concept with clear before and after results
- After each sub-topic give me 1-2 small practice exercises
- Keep this phase light — remind me that React does all of this 
  automatically, I just need to understand the idea
- Do NOT teach createElement, appendChild, removeChild, 
  or building DOM elements dynamically right now
- Highlight the most common beginner mistakes 
  (like using innerHTML when they just need textContent)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "DOM Events in JavaScript".

Events are very important because React's entire interactivity system 
(onClick, onChange, onSubmit etc.) is based on the same event concepts 
from plain JavaScript. Understanding events HERE will make React events 
feel completely natural. Please teach this carefully.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What are events — explain what a DOM event is using a simple real-life 
   analogy (like a doorbell — something happens, something reacts). 
   Explain the concept of "listening" for events. Give a few examples 
   of common events: click, input, submit, keydown, mouseover.

2. addEventListener — how to attach an event listener to an element. 
   Show the syntax clearly: element.addEventListener('eventName', function). 
   Show a simple click example that changes text on a page. 
   Explain why we use addEventListener instead of inline HTML onclick attribute.

3. The event object (e) — when an event fires, JavaScript automatically 
   passes an event object to your function with details about what happened. 
   Show how to receive it as a parameter (e or event). 
   Show useful properties: e.target (what was clicked), 
   e.target.value (value of an input field), e.type (type of event). 
   These are used CONSTANTLY in React.

4. e.preventDefault() — how to stop the browser's default behavior 
   for certain events. Most important example: stopping a form from 
   refreshing the page on submit. Show a simple form example with 
   and without preventDefault so I can see the difference clearly. 
   This is used in every React form ever written.

5. Common event types to know — a quick practical tour of the most 
   used events: click (buttons), input (typing in a field), 
   change (selecting from dropdown), submit (form submission), 
   keydown (keyboard press). Show one small code example for each. 
   Don't go deep — just show me what each one sounds like so 
   I recognize them in React.

Rules for teaching:
- Assume I am a beginner who knows basic HTML and JavaScript functions
- Always show HTML + JavaScript together so I can see events in action
- Show code for every concept with clear comments
- After each sub-topic give me 1-2 small practice exercises
- The event object (e) and e.preventDefault() are the MOST important 
   parts here — spend extra time on them with multiple examples
- Directly connect each concept to React: after explaining addEventListener, 
  mention that React uses onClick={handleClick} which is the same idea. 
  After e.target.value, mention that React's onChange uses it the same way.
- Do NOT teach event bubbling, event capturing, stopPropagation, 
  or event delegation right now
- Highlight common beginner mistakes 
  (like calling the function instead of passing it: onClick={handleClick()} 
  vs onClick={handleClick})
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "How Asynchronous JavaScript Works".

This is a concept topic — I need to understand the IDEA of async before I touch 
Promises or async/await. Please build my mental model clearly before any code.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. Synchronous vs Asynchronous — explain what synchronous means 
   (one thing at a time, in order, each line waits for the previous one). 
   Then explain what asynchronous means (starting a task and moving on 
   without waiting for it to finish). Use a very relatable real-life analogy 
   — like ordering food at a restaurant: you place your order and do other 
   things while the kitchen prepares it instead of just standing and waiting. 
   Show a simple code example of synchronous code running line by line, 
   then show what happens when we introduce something slow like setTimeout().

2. The call stack — explain what the call stack is using a simple analogy 
   like a stack of plates. JavaScript reads and executes code by putting 
   functions on the stack and removing them when done. Show a simple 
   step by step walkthrough of a few function calls going on and off the stack.
   Keep this very visual and simple — just enough to understand why JS 
   can only do one thing at a time (it is single-threaded).

3. What is a callback in async context — explain that one of the earliest 
   ways to handle async operations was to pass a callback function that 
   runs AFTER the async task finishes. Show a simple setTimeout example: 
   "do this after 2 seconds". Then briefly mention the problem with 
   callbacks (callback hell — deeply nested callbacks) so I understand 
   WHY Promises were invented. Just show a simple visual of nested 
   callbacks getting messy — no need to go deep.

Rules for teaching:
- Assume I am a complete beginner
- This is a concept-heavy topic — use lots of real-life analogies and 
  simple diagrams described in text (like ASCII-style diagrams showing 
  the call stack) to make it visual
- Show simple code examples but focus more on building the mental model
- After each sub-topic give me 1-2 small exercises or thought experiments
- The goal of this prompt is NOT to write async code yet — it is to 
  understand WHY async exists and what problem it solves
- Do NOT teach the event loop in deep detail, Web APIs, or microtask queue
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Promises in JavaScript".

I already understand the basic idea of async JS and why callbacks get messy. 
Now I want to learn Promises — the cleaner solution. I will be using 
async/await mostly in React but I need to understand Promises first 
because async/await is built on top of them.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What is a Promise — explain the concept using a perfect real-life analogy 
   (like ordering a package online — you get a "promise" of delivery, 
   and it will either arrive successfully or fail). Explain the 3 states 
   of a Promise: pending, fulfilled, rejected. Show how to create a 
   basic new Promise() with resolve and reject. Keep the focus on 
   understanding the concept first.

2. .then() — how to handle a SUCCESSFUL promise result using .then(). 
   Show clearly that .then() receives the resolved value as its argument. 
   Show a simple example of a fake "fetch user data" promise that resolves 
   after 1 second and then .then() uses the result. Show how .then() 
   can be chained — one .then() after another — and how the return value 
   of one .then() gets passed to the next.

3. .catch() — how to handle a FAILED promise using .catch(). 
   Show how .catch() catches any error from the promise OR any error 
   thrown inside a .then(). Show a complete example with both 
   .then() and .catch() together. Real example: a fake API call that 
   sometimes fails — handle both success and failure cleanly.

4. Promise.all() — how to run MULTIPLE promises at the same time and 
   wait for ALL of them to finish before doing something. Real example: 
   fetching user data AND their posts at the same time instead of 
   one after another. Show clearly what happens if one of the promises 
   fails. Keep this simple — just the core use case.

Rules for teaching:
- Assume I am a beginner who understands async concepts and callbacks
- Always start with the analogy, then introduce the code — 
  never just throw code at me without context
- Show code for every concept with clear comments
- After each sub-topic give me 1-2 small practice exercises
- Be very clear about the difference between a Promise CREATING 
  something async vs .then() HANDLING the result — 
  beginners often confuse these two roles
- Do NOT teach Promise.race(), Promise.allSettled(), Promise.any(), 
  or manually creating complex promise chains — I will use async/await for that
- Highlight common beginner mistakes 
  (like forgetting to return inside .then() when chaining, 
  or forgetting .catch() entirely)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "Async/Await in JavaScript".

I already understand Promises. Now I want to learn async/await — the modern, 
clean way to write async code that I will use every single day in React. 
This is one of the most important topics before starting React. 
Please teach it very carefully.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. async function — what the async keyword does when placed before a function, 
   how it automatically makes the function return a Promise. Show the 
   connection: an async function is just a cleaner way to work with Promises. 
   Show side by side: the same operation written with .then() vs with async/await 
   — let me clearly see how much cleaner async/await looks.

2. await keyword — how await pauses execution INSIDE an async function and 
   waits for a Promise to resolve before moving to the next line. 
   Emphasize that await only works INSIDE an async function. 
   Use the restaurant analogy again: await is like waiting at the counter 
   for your order — but only YOU wait, the rest of the restaurant keeps running. 
   Show a clear step by step example of await fetching fake data.

3. try / catch / finally with async/await — how to handle errors in async 
   functions using try/catch instead of .catch(). Show the structure clearly. 
   Explain: try runs the code, catch handles any error that happens, 
   finally runs no matter what (success or failure). 
   Real example: fetching user data — try to get it, catch any network error, 
   finally hide the loading spinner. This pattern is used in EVERY 
   React data fetching operation.

Rules for teaching:
- Assume I am a beginner who understands Promises
- The biggest thing to make clear: async/await does NOT change HOW async 
  works — it just makes it LOOK synchronous and easier to read. 
  Emphasize this repeatedly.
- Always show the Promise version first, then the async/await version 
  side by side so I can see the improvement
- Show code for every concept with clear comments and step by step 
  explanation of what happens at each line
- After each sub-topic give me 2-3 small practice exercises
- try/catch with async/await (sub-topic 3) is THE pattern I will use 
  in every React component that fetches data — explain it extra carefully 
  with multiple examples
- Do NOT teach top-level await, async class methods, or async generators
- Highlight the most common beginner mistakes 
  (like forgetting the async keyword before the function, 
  or using await outside an async function)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

I am a beginner learning JavaScript. My goal is to learn JS and then move to React 
for a frontend job. Please teach me "The Fetch API in JavaScript".

This is the final topic before I start building my JS mini projects and 
then jump to React. Fetch is how JavaScript talks to a backend server 
or external API — I will use this in every real React app I ever build. 
Please teach it thoroughly with realistic examples.

Cover these sub-topics one by one, each in a separate message. Wait for me to say 
"next" before moving to the next sub-topic:

1. What is the Fetch API — explain what fetch() is and what problem it solves. 
   What is an API in simple terms (a waiter between your app and a server — 
   you send a request, it brings back data). What is a URL endpoint. 
   What is JSON and why APIs send data in JSON format. 
   Keep this conceptual — build the mental model before any code.

2. GET request with fetch — how to use fetch(url) to request data from a 
   server. Walk through every step: fetch() returns a Promise, 
   .json() converts the response to a JavaScript object (and also returns 
   a Promise), then we use the data. Show a complete working example 
   using a real free public API like 
   https://jsonplaceholder.typicode.com/users — fetch the list of users 
   and console.log the results. Show both the .then() version AND 
   the async/await version side by side.

3. Handling errors properly — two types of errors to handle: 
   network errors (no internet, server down — these throw an error 
   that catch handles), and HTTP errors (server responds but with 
   an error status like 404 or 500 — fetch does NOT throw for these, 
   you must check response.ok manually). Show a complete example 
   that handles BOTH types of errors correctly using async/await 
   with try/catch AND response.ok check. This is very important 
   and most beginners get it wrong.

4. POST request with fetch — how to SEND data to a server using fetch 
   with method: 'POST'. Show the full syntax: passing a config object 
   as the second argument to fetch with method, headers 
   (Content-Type: application/json), and body (JSON.stringify(data)). 
   Real example: sending a new user object to 
   https://jsonplaceholder.typicode.com/posts. 
   Explain what JSON.stringify does and why it is needed.

Rules for teaching:
- Assume I am a beginner who understands async/await and try/catch
- Use https://jsonplaceholder.typicode.com as the practice API 
  throughout — it is free, requires no signup, and perfect for beginners
- Show complete working code examples with async/await for every concept
- After each sub-topic give me 1-2 small practice exercises 
  using the jsonplaceholder API
- The error handling sub-topic (sub-topic 3) is critically important — 
  most tutorials skip the response.ok check and teach bad habits. 
  Please show the CORRECT complete error handling pattern.
- After sub-topic 4, show me a mini summary: a complete reusable 
  async function that does a GET request with full error handling — 
  something I can use as a template in my React projects
- Do NOT teach axios, Request/Response objects in depth, 
  HTTP headers in depth, or authentication headers right now
- Highlight the most common beginner mistakes 
  (like forgetting to call .json(), or not handling HTTP errors 
  with response.ok)
- Keep tone friendly, simple and encouraging
- At the end of each sub-topic ask me if I understood or have questions

Start with sub-topic 1 now.

                        
Here're three prompts. 
 Copy One by One NOT at ONCE
                        

                        
Prompt for ToDo List App
                        I am a beginner who has just finished learning JavaScript fundamentals including 
variables, functions, arrays, objects, ES6+ syntax, DOM manipulation, and 
async/await. My goal is to build my first JavaScript project before moving 
to React for a frontend job.

Please guide me in building a TO-DO LIST APP using plain HTML, CSS and JavaScript.
This project will practice: arrays, .map(), .filter(), DOM manipulation, 
events, classList, and localStorage.

Please guide me step by step. After each step wait for me to say "next" 
or "done" before moving forward. If I say I am stuck, help me debug.

Here is what the app should do:
- User can type a task in an input field and press a button or Enter to add it
- Task appears in a list on the screen
- Each task has a "Complete" button that marks it as done (strikethrough style)
- Each task has a "Delete" button that removes it from the list
- A filter section with 3 buttons: All / Active / Completed 
  to show filtered tasks
- Tasks are saved in localStorage so they persist after page refresh

Step by step plan — teach me ONE step at a time:

Step 1: Project setup
- Create the HTML structure: input field, add button, filter buttons, 
  task list container
- Add basic CSS to make it look clean and usable 
  (nothing fancy, just readable)
- Set up the JavaScript file and connect it

Step 2: Add a task
- Get the input value when button is clicked or Enter is pressed
- Validate: don't add empty tasks, show a simple alert or message
- Store tasks in a JavaScript array as objects 
  like { id, text, completed: false }
- Render the array to the DOM using a renderTasks() function 
  that uses .map() to build the list

Step 3: Complete and delete
- Add click event to the Complete button that toggles 
  the completed property to true/false
- Add click event to the Delete button that uses .filter() 
  to remove the task from the array
- Re-render after every change

Step 4: Filter tasks
- Track the current filter (all / active / completed) in a variable
- When a filter button is clicked, use .filter() on the tasks array 
  to show only matching tasks
- Highlight the active filter button with a CSS class

Step 5: localStorage
- Save tasks array to localStorage after every change 
  using JSON.stringify()
- Load tasks from localStorage when the page loads 
  using JSON.parse()
- Handle the case where localStorage is empty (first visit)

Rules for teaching:
- Assume I am a beginner — explain every line of code you write
- Do NOT write the entire project at once — go step by step and 
  wait for me after each step
- After each step explain WHAT we built, WHY we wrote it that way, 
  and which JS concept from my learning it is using
- If I make a mistake or get stuck, guide me with hints first 
  before giving the answer
- After the project is complete, give me a summary of every 
  JS concept I used in this project
- Then suggest 2-3 small features I could add on my own 
  as extra practice
- Keep tone friendly, encouraging and patient

Start with Step 1 now.



Prompt for Weather App
I am a beginner who has just finished learning JavaScript fundamentals including 
variables, functions, arrays, objects, ES6+ syntax, DOM manipulation, 
async/await and the Fetch API. My goal is to build projects before moving 
to React for a frontend job.

Please guide me in building a WEATHER APP using plain HTML, CSS and JavaScript.
This project will practice: fetch API, async/await, try/catch, 
DOM manipulation, template literals, and JSON parsing.

Please guide me step by step. After each step wait for me to say "next" 
or "done" before moving forward. If I say I am stuck, help me debug.

We will use the FREE OpenWeatherMap API:
- Sign up at https://openweathermap.org/api to get a free API key
- We will use the Current Weather endpoint
- Guide me through getting the API key at the start

Here is what the app should do:
- User types a city name and clicks Search or presses Enter
- App fetches current weather data for that city from OpenWeatherMap
- Display: city name, country, temperature (Celsius), weather description, 
  humidity, wind speed, and a weather emoji or icon
- Show a loading message while data is being fetched
- Show a friendly error message if city is not found or network fails
- Last searched city is saved in localStorage and auto-loaded on page refresh

Step by step plan — teach me ONE step at a time:

Step 1: Project setup and API key
- Create HTML structure: search bar, search button, results section, 
  error message area, loading indicator
- Add clean basic CSS styling
- Explain how to sign up for OpenWeatherMap and get a free API key
- Show what the API response JSON looks like so I understand 
  the data structure before coding
- Set up the JavaScript file

Step 2: Fetch weather data
- Write an async function getWeather(city) that uses fetch to call 
  the OpenWeatherMap API
- Use async/await with try/catch for error handling
- Check response.ok and handle 404 (city not found) separately 
  from network errors
- console.log the full response first so I can see the data structure

Step 3: Display the weather data
- Extract the needed data from the JSON response using 
  dot notation and destructuring
- Build the display HTML using template literals
- Inject it into the DOM
- Show temperature in Celsius (the API returns Kelvin by default — 
  show me how to convert OR use the units=metric parameter)
- Map weather condition codes to simple weather emojis 
  (like ☀️ for clear, 🌧️ for rain, ⛅ for clouds — 
  show a simple object map for this)

Step 4: Loading state and error handling
- Show a "Searching..." loading message when fetch starts
- Hide it when fetch completes (success or failure)
- Show a friendly error message section for city not found
- Show a different message for network/server errors
- Clear previous results before showing new ones

Step 5: Search improvements and localStorage
- Trigger search on Enter key press (not just button click)
- Validate empty input — don't search if input is empty
- Save the last searched city in localStorage
- On page load, check localStorage and auto-fetch weather 
  for the last searched city if it exists

Rules for teaching:
- Assume I am a beginner — explain every line of code you write
- Do NOT write the entire project at once — go step by step 
  and wait for me after each step
- After each step explain WHAT we built, WHY we wrote it that way, 
  and which JS concept from my learning it is using
- The fetch + async/await + try/catch + response.ok pattern 
  is the most important part — make sure I understand it deeply
- If I make a mistake or get stuck, guide me with hints first 
  before giving the answer
- After the project is complete, give me a summary of every 
  JS concept I practiced in this project
- Then suggest 2-3 small features I could add on my own 
  as extra practice (like 5-day forecast, toggle Celsius/Fahrenheit etc.)
- Keep tone friendly, encouraging and patient

Start with Step 1 now.



 
Prompt for Quiz App
 I am a beginner who has just finished learning JavaScript fundamentals including 
variables, functions, arrays, objects, ES6+ syntax, DOM manipulation, 
events and async/await. My goal is to build projects before moving 
to React for a frontend job. This is my third and final JS project.

Please guide me in building a QUIZ APP using plain HTML, CSS and JavaScript.
This project will practice: objects, arrays, .map(), .filter(), 
DOM events, conditionals, template literals, and state management 
using plain JavaScript variables.

Please guide me step by step. After each step wait for me to say "next" 
or "done" before moving forward. If I say I am stuck, help me debug.

Here is what the app should do:
- Show one question at a time with 4 multiple choice answer buttons
- Track which answer the user selects — highlight correct answer 
  in green and wrong answer in red immediately after selection
- Show a "Next" button after answering to move to next question
- Show a progress bar or question counter (Question 2 of 10)
- At the end show a results screen: score, percentage, 
  and a list of questions they got wrong
- A "Restart Quiz" button that resets everything back to question 1
- Questions are stored as an array of objects in JavaScript

Step by step plan — teach me ONE step at a time:

Step 1: Project setup and data structure
- Design the questions data structure as an array of objects. 
  Each object should have: id, question (string), 
  options (array of 4 strings), correctAnswer (string or index)
- Write at least 8 sample questions (any fun topic — movies, 
  science, general knowledge)
- Create the HTML structure: question container, options container, 
  next button, progress counter, results screen (hidden initially)
- Add clean CSS styling — make the answer buttons look like 
  proper clickable option cards

Step 2: Display a question
- Write a displayQuestion(index) function that takes the current 
  question index and renders the question and its 4 answer 
  buttons to the DOM
- Use template literals to build the HTML
- Use .map() on the options array to create the answer buttons
- Track current question index and user score in variables
- Call displayQuestion(0) on page load to show the first question

Step 3: Handle answer selection
- Add click events to answer buttons
- When clicked: compare selected answer to correctAnswer
- If correct: highlight button green, increment score
- If wrong: highlight button red AND show the correct answer 
  in green so user learns immediately
- Disable all buttons after selection so user can't change answer
- Show the Next button after an answer is selected

Step 4: Progress and navigation
- Show a question counter: "Question 3 of 8" — update it 
  with each question
- Add a simple progress bar that fills up as questions progress 
  (use CSS width percentage)
- When Next button is clicked: move to next question 
  or show results if it was the last question

Step 5: Results screen
- After last question, hide the quiz section and show 
  results section
- Display: total score (6/8), percentage (75%), 
  and a performance message (Excellent! / Good job! / Keep practicing!)
- Use .filter() on the questions array to find questions 
  the user got wrong and display them in a "Review your mistakes" list
- Add a Restart Quiz button that resets score, 
  current index, clears all highlights, and shows question 1 again

Rules for teaching:
- Assume I am a beginner — explain every line of code you write
- Do NOT write the entire project at once — go step by step 
  and wait for me after each step
- After each step explain WHAT we built, WHY we wrote it that way, 
  and which JS concept from my learning it is using
- State management (tracking current question, score, user answers 
  in variables) is the most important concept here — it directly 
  maps to React's useState. Emphasize this connection clearly.
- If I make a mistake or get stuck, guide me with hints first 
  before giving the answer
- After the project is complete, give me a full summary of 
  every JS concept I used
- Point out specifically how this project's patterns 
  (state variables, re-rendering on state change, event handlers) 
  are EXACTLY what React does — just in a more organized way. 
  This will make the React transition feel very natural.
- Then suggest 2-3 features I can add on my own as extra practice 
  (like a timer, difficulty levels, fetching questions from an API)
- Keep tone friendly, encouraging and patient

Start with Step 1 now.

I have just completed learning JavaScript fundamentals across these topics:
- Variables, data types, operators, conditionals and loops
- Functions, arrow functions, callbacks, higher-order functions, scope
- Arrays, array methods (.map, .filter, .find, .reduce), objects
- ES6+ syntax: destructuring, spread/rest, template literals, 
  short-circuit, optional chaining, modules
- DOM manipulation: selecting elements, changing content, events
- Async JS: Promises, async/await, try/catch, Fetch API

I also built 3 projects:
1. To-Do List App
2. Weather App  
3. Quiz App

Now I am about to start learning React. 

Please do the following:
1. Give me a quick confidence check — ask me 10 rapid-fire JS questions 
   (mix of conceptual and code-reading questions) to see if I am 
   genuinely React-ready. Wait for my answers before evaluating.

2. After I answer, tell me honestly:
   - Which topics I answered well and am solid on
   - Which topics I should quickly review before starting React
   - An overall verdict: am I React-ready or should I spend 
     a few more days on anything specific?

3. Then give me a "What to expect in React" preview:
   - Show me 5 specific examples of how the JS I just learned 
     directly maps to React code
   - For example: how .map() in JS becomes rendering a list in React,
     how async/await + fetch becomes data fetching in useEffect,
     how object spread becomes state updates etc.
   - This will make my first day of React feel familiar instead 
     of scary

4. Finally give me 3 motivational but honest tips for 
   learning React as a beginner coming from plain JS

Keep tone encouraging, honest and friendly.