⚡ JavaScript Basics (Make Your Website Alive 🧠🔥)

👉 HTML = Structure 
👉 CSS = Design 
👉 JavaScript = Brain (Logic + Interactivity)

🧠 What is JavaScript?

👉 Programming language used to: 
• Add interactivity
• Handle user actions
• Update content dynamically

💡 Example: 
• Button click
• Form validation
• Show/hide elements

🔑 Variables (Store Data) 
let name = "Deepak"; 
let age = 25; 
👉 Used to store values 

🔁 Conditions (Decision Making) 
if (age > 18) { 
  console.log("Adult"); 
} 

🔄 Loops (Repeat Work) 
for (let i = 1; i <= 5; i++) { 
  console.log(i); 
} 

🔧 Functions (Reusable Code) 
function greet() { 
  console.log("Hello World"); 
} 

greet(); 

🌐 DOM Manipulation (Most Important 🔥)

👉 DOM = Document Object Model 
👉 Lets you control HTML using JS 

document.getElementById("title").innerText = "Hello JS 🚀"; 

💡 You can: 
• Change text
• Change styles
• Add/remove elements

🖱️ Events (User Actions)

document.getElementById("btn").addEventListener("click", function() { 
  alert("Button clicked!"); 
}); 

👉 Common events: 
• click
• input
• submit

🎯 Mini Project

👉 Create a button: 
• On click → change text
• On click → change background color

⚡ Mini Project – Complete Solution (Button Interaction) 🔥

👉 Button click → change text + change background color 

💻 Full Code 

<!DOCTYPE html>
<html>
<head>
  <title>JS Mini Project</title>
  <style>
    body {
      text-align: center;
      margin-top: 50px;
    }

    button {
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h1 id="title">Hello World 👋</h1>
  <button id="btn">Click Me 🚀</button>

  <script>
    document.getElementById("btn").addEventListener("click", function() {
      
      // Change text
      document.getElementById("title").innerText = "You clicked the button! 🎉";
      
      // Change background color
      document.body.style.backgroundColor = "lightblue";
      
    });
  </script>

</body>
</html>

🧠 How It Works (Simple Breakdown)

1️⃣ Select Button 
document.getElementById("btn") 

2️⃣ Add Click Event 
.addEventListener("click", function() {}) 

3️⃣ Change Text 
document.getElementById("title").innerText = "New Text" 

4️⃣ Change Background 
document.body.style.backgroundColor = "lightblue" 

🎯 Output

👉 Click button → 
✔ Text changes 
✔ Background color changes 

🔥 Bonus Challenge

👉 Add: 
• Toggle colors (switch back  forth)
• Count number of clicks
• Show alert message

💡 Pro Tips

• Focus heavily on DOM + Events
• Practice small interactions daily
• Use browser console to test code

🎯 Outcome

After this: 
✔ You can add interactivity 
✔ You understand logic building 
✔ Ready for Advanced JavaScript 

Double Tap ❤️ For More