javascriptvaish

This is my JavaScript practice repo where I build one mini project every day.

---

Projects

1. OTP Generator

A simple OTP generator that creates a random 4-digit code on button click.

• Concepts: DOM manipulation, Math.random(), event listeners
• File: otp-generator.html

---

2. To-Do List App

Add tasks, mark them as completed with strikethrough, and delete them.

• Concepts: DOM manipulation, createElement, classList.toggle, event listeners
• File: todo-list.html

---

3. Character Counter

A textarea that counts characters in real time with a 100 character limit. The counter turns orange near the limit and red when maxed out.

• Concepts: DOM manipulation, event listeners, input event, dynamic styling
• File: character-counter.html

---

4. Password Strength Checker

A password input that checks strength in real time. Shows weak, medium, or strong based on length, numbers, uppercase letters, and special characters.

• Concepts: DOM manipulation, regex, event listeners, conditional logic
• File: password-strength.html

---

5. Dark/Light Mode Toggle

A button that switches the page between dark and light mode, updating the heading text accordingly.

• Concepts: DOM manipulation, classList.toggle, classList.contains, event listeners
• File: toggle-button.html

---

6. Random Quote Generator

Displays a random motivational quote from a list every time the button is clicked.

• Concepts: DOM manipulation, arrays, Math.random(), Math.floor(), event listeners
• File: random-quote-generator.html

---

7. Number Guessing Game

Guess a randomly generated number between 1 and 10. The game tells you if your guess is too high, too low, or correct.

• Concepts: DOM manipulation, Math.random(), Math.floor(), Number(), event listeners
• File: number-picker.html

---

8. fetch api

this is fetch api mini code

• File: lec13.html

---

8. Currency Converter

Converts currency amounts in real time using a live exchange rate API. Supports 150+ currencies with country flags that update dynamically based on selection.

• Concepts: Fetch API, async/await, DOM manipulation, dynamic dropdowns, event listeners
• File: currency-converter-all.html, codes.js

---

9. DOM Practice — Revision

10 practice questions covering core DOM manipulation concepts, solved independently.

Q	Topic
1	Select element by ID and change text
2	Change page background color on button click
3	Live text preview using input event
4	Show/hide div using classList.toggle
5	Event delegation on a list
6	Click counter with live display
7	Remove list items dynamically
8	Add items to a list from input
9	Hover opacity effect using JS events + event delegation
10	Input border validation using classList

• Concepts: querySelector, innerText, addEventListener, classList, event delegation, createElement, mouseover/mouseout, input validation
• File: dom-revision.txt

---

More projects coming daily!