🟢 Beginner Level (1–10)

1. Select an element with id "title" and print it in console.
2. Change the text of a paragraph using innerHTML.
3. Change background color of a div to blue.
4. Select all elements with class "box" and print their length.
5. Change text of a button when it is clicked.
6. Add a new <li> item inside a <ul>.
7. Remove an element from the page using JavaScript.
8. Change an image src on button click.
9. Show an alert when user clicks a button.
10. Change font size of a heading using JavaScript.

---

🟡 Intermediate Level (11–20)

11. Toggle a class "dark-mode" on body when button is clicked.
12. Count number of <p> tags in a page.
13. Loop through multiple elements and change their color.
14. Create a button that hides and shows a div.
15. Get value from input field and display it in a div.
16. Change placeholder text of an input field.
17. Validate if input field is empty on button click.
18. Add multiple list items dynamically using array.
19. Create a counter (increase/decrease value on button click).
20. Detect mouse hover and change element color.

---

🔵 Advanced Level (21–30)

21. Create a live character counter for a textarea.
22. Build a simple image slider (next/previous buttons).
23. Validate email format using JavaScript.
24. Highlight selected menu item when clicked.
25. Create a dropdown menu that opens on click.
26. Build a tab system (click → show content).
27. Create a to-do list (add + delete tasks).
28. Detect keyboard input and show pressed key.
29. Prevent form submission if validation fails.
30. Create a real-time search filter (filter list items as user types).

---

🔥 Bonus Challenge (Real-world)

👉 Build a mini app combining multiple DOM concepts:

• Dark mode toggle
• Form validation
• To-do list
• Counter

---

💡 Tip (Very Important)

👉 First 10 → Basics
👉 Next 10 → Logic building
👉 Last 10 → Real-world projects