✅ JavaScript Practice Questions – Part 2 💻🔥

🔍 Q1. Swap two variables without a third variable.
✅ Answer:

let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b);  // Output: 10 5

🔍 Q2. Find the largest number in an array.
✅ Answer:

let numbers = [3, 7, 2, 9, 5];
let max = Math.max(...numbers);
console.log(max);  // Output: 9

🔍 Q3. Check if a number is prime.
✅ Answer:

function isPrime(n) {
  if (n <= 1) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) return false;
  }
  return true;
}

console.log(isPrime(7));  // Output: true

🔍 Q4. Count vowels in a string.
✅ Answer:

function countVowels(str) {
  return str.match(/[aeiou]/gi)?.length || 0;
}

console.log(countVowels("Hello World"));  // Output: 3

🔍 Q5. Convert first letter of each word to uppercase.
✅ Answer:

let sentence = "hello world";
let titleCase = sentence.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");

console.log(titleCase);  // Output: Hello World

💬 Tap ❤️ for Part 3!


💎 @Htmlcss_channels | #css #JavaScript #HTML #interview

🚀 JavaScript Interview Questions with Answers — Part 3

21. What is an array in JavaScript?
An array is a special object used to store multiple values in a single variable.

Example:
const fruits = ["Apple", "Banana", "Mango"];

Access Elements:
console.log(fruits[0]); // Apple

Features:
• Ordered collection
• Zero-based indexing
• Can store mixed data types

Example:
const data = ["Deepak", 25, true];

22. How do you add/remove elements from an array?

Add Elements
push() → Add at end
const arr = [1, 2];
arr.push(3);
console.log(arr);

unshift() → Add at beginning
arr.unshift(0);

Remove Elements
pop() → Remove from end
arr.pop();
shift() → Remove from beginning
arr.shift();

Example:
const numbers = [1, 2, 3];
numbers.push(4);
numbers.pop();
console.log(numbers);

23. What is the difference between push(), pop(), shift(), unshift()?
push() → Add element at end
pop() → Remove element from end
shift() → Remove element from start
unshift() → Add element at start

Example:
const arr = [1, 2];
arr.push(3);
arr.unshift(0);
console.log(arr);
arr.pop();
arr.shift();
console.log(arr);
Output:
[0][1][2][3]

24. What is map(), filter(), and reduce()?
These are important array methods used in functional programming.

map()
Creates a new array by transforming elements.
const nums = [1, 2, 3];
const doubled = nums.map(num => num * 2);
console.log(doubled);

Output:
[2][4][6]

filter()
Returns elements matching a condition.
const nums = [1, 2, 3, 4];
const even = nums.filter(num => num % 2 === 0);
console.log(even);

Output:
[2][4]

reduce()
Reduces array to a single value.
const nums = [1, 2, 3];
const sum = nums.reduce((total, num) => total + num, 0);
console.log(sum);

Output:
6

25. How do you remove duplicates from an array?

Using Set
const nums = [1, 2, 2, 3, 4, 4];
const unique = [...new Set(nums)];
console.log(unique);

Output:
[1][2][3][4]

Why Set?
A Set stores only unique values.

Alternative Using filter()
const arr = [1, 2, 2, 3];
const unique = arr.filter((item, index) =>
arr.indexOf(item) === index
);
console.log(unique);

26. How do you flat / flatten an array?
Flattening means converting nested arrays into a single array.

Using flat()
const arr = [1, [2, 3], [4, 5]];
console.log(arr.flat());

Output:
[1][2][3][4][5]

Deep Flatten:
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(Infinity));

Using reduce()
const arr = [[1, 2], [3, 4]];
const flat = arr.reduce((acc, val) => acc.concat(val), []);
console.log(flat);

27. What is an object in JavaScript?
An object is a collection of key-value pairs.

Example:
const person = {
name: "Deepak",
age: 25,
city: "Oslo"
};

Access Properties:
console.log(person.name);

Objects Can Store:
• Strings
• Numbers
• Arrays
• Functions
• Other objects

28. What is the difference between dot and bracket notation?

Dot Notation
console.log(person.name);

Bracket Notation
console.log(person["name"]);

Dot Notation
• Simple syntax
• Faster to write

Bracket Notation
• Dynamic keys supported
• Useful for spaces/special chars

Example:
const obj = {
"first name": "Deepak"
};
console.log(obj["first name"]);

29. How do you merge two objects?

Using Spread Operator
const obj1 = {a: 1};
const obj2 = {b: 2};
const merged = {...obj1,...obj2};
console.log(merged);

Output:
{a: 1, b: 2}

Using Object.assign()
const merged = Object.assign({}, obj1, obj2);

Important:
If duplicate keys exist, later values overwrite earlier ones.

30. How do you deep clone an object? 
Deep cloning creates a completely independent copy of an object.

Using structuredClone()  
const obj = {  
    name: "Deepak",  
    address: {  
        city: "Oslo"  
    }  
};  
const clone = structuredClone(obj);

Using JSON Method  
const clone = JSON.parse(JSON.stringify(obj));

💌 Double Tap ❤️ For Part-4


💎 @Htmlcss_channels | #css #JavaScript #HTML #interview

39. When would you use for vs forEach()?
for Loop vs forEach() 
for - More control, Can use break/continue, Faster in heavy loops 

forEach() - Cleaner syntax, Cannot stop early, Better readability

for Example

for (let i = 0; i < 3; i++) {
    console.log(i);
}

forEach() Example

[1, 2, 3].forEach(num => {
    console.log(num);
});

Interview Tip: 
Use forEach() for readability and for when more control is needed.

40. How do you handle early exits from loops?
Using break

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        break;
    }
    console.log(i);
}

Using return Inside Functions

function test() {
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            return;
        }
        console.log(i);
    }
}

test();

Important:
forEach() does not support break directly.

Use:
• for
• for...of
• some()
• every()

for early exits.

Double Tap ❤️ For Part-5




💎 @Htmlcss_channels | #css #JavaScript #HTML #interview

✨ مجموعه‌ای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامه‌نویس وب باید داشته باشه!

۱️⃣ مرکز کردن آیتم‌ها در گرید

.container {
    display: grid;
    place-items: center;
}

یه خط ساده که همه چیز رو وسط میاره! هم عمودی، هم افقی.

۲️⃣ پدینگ چپ و راست (با logical properties)

.button {
    padding-inline: 1rem;
}

به جای padding-left و padding-right — یه دونه بنویس!

نکته: همین ترفند رو میتونی برای margin و border هم استفاده کنی:
• margin-inline / border-inline → چپ و راست
• padding-block / margin-block → بالا و پایین

۳️⃣ ستون‌های هم‌عرض در گرید

.container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

هر تعداد ستون که داشته باشی، همه هم‌عرض میشن! عالی برای layoutهای داینامیک.

۴️⃣ استایل همزمان hover و focus

button:is(:hover, :focus) {
    /* استایل خودت رو اینجا بنویس */
}

یه بار بنویس، برای هر دو حالت کار کنه! هم برای موس، هم برای کیبورد (accessibility).

۵️⃣ دایره کامل

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

هرچیزی رو تبدیل به دایره می‌کنه! با aspect-ratio مطمئن میشی که همیشه square بمونه.

۶️⃣ حذف فاصله اضافی بین آیتم‌های گرید

.container {
    gap: 0;
}

یا برای فاصله دلخواه:

.container {
    gap: 1rem;
}

💡 چرا اینا کاربردی ان؟
• کوتاه و مینیمال — هر کدوم یه خطه
• مدرن — از قابلیت‌های جدید CSS استفاده می‌کنن
• کاربرد روزمره — توی هر پروژه‌ای بهشون نیاز داری

💎 @Htmlcss_channels | #HTML #css #JavaScript

؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

۵ مرحله‌ای که تصاویر نشون می‌دن:
۱️⃣ ساخت Paint Worklet

class DotsPainter {
  paint(ctx, geom, props) {
    ctx.fillStyle = 'pink';
    for (let y = 0; y < geom.height; y += 20) {
      for (let x = 0; x < geom.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsPainter)

یه کلاس جاوااسکریپت می‌نویسی که روی canvas رسم می‌کنه.

۲️⃣ ثبت Worklet

CSS.paintWorklet.addModule('paint.js');

فایل جاوااسکریپت رو به مرورگر معرفی می‌کنی.

۳️⃣ استفاده در CSS

.box {
  background: paint(dots);
}

حالا می‌تونی مثل background معمولی استفاده کنی!

۴️⃣ شخصی‌سازی با متغیرها

ctx.fillStyle = props.get('--dot-color') || 'pink';

.box {
  background: paint(dots);
  --dot-color: blue;
}

رنگ رو از CSS تغییر بده!

۵️⃣ نتیجه
• ✅ بدون عکس
• ✅ بدون پلاگین
• ✅ فقط CSS خالص
• ✅ روی compositor thread اجرا می‌شه (سریع)



💎 @Htmlcss_channels | #HTML #css #JavaScript

#فیگما یک اکستنشن مرورگر کروم معرفی کرده که یک سایت رو باز میکنید
میزنید روی کپی
میرید داخل فیگما Past میکنید
تمام، الان یک سایت قابل ادیت دارید

پ.ن: الان میشه کار مشتری هایی که یک کپی دیجی کالا و اسنپ رو میخوان سریع راه انداخت

پ.ن:‌ نسخه آزمایشیش برای پلن های پرو به بالا کار میکنه نه رایگان

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg


💎 @Htmlcss_channels | #HTML #css #JavaScript

Responsive Web Design with HTML5 and CSS: Develop Future-proof Responsive Websites Using the Latest HTML5 and CSS Techniques
Book by Ben Frain



💎 @Htmlcss_channels | #HTML #css #JavaScript

# کتاب "Responsive Web Design with HTML5 and CSS"

📌 یه راهنمای عملی و جامع برای طراحی وب‌سایت‌های ریسپانسیو با استفاده از HTML5 و CSS3

📌مثال‌های کاربردی و پروژه‌ محور داره



💎 @Htmlcss_channels  | #HTML #css #JavaScript