html and css آموزش
22.7K subscribers
527 photos
256 videos
92 files
324 links
ادمین :
@Maryam3771


تعرفه تبلیغات:
https://t.me/alloadv/822
Download Telegram
JavaScript Practice Questions with Answers 💻

🔍 Q1. How do you check if a number is even or odd?
Answer:
let num = 10;
if (num % 2 === 0) {
console.log("Even");
} else {
console.log("Odd");
}


🔍 Q2. How do you reverse a string?
Answer:
let text = "hello";
let reversedText = text.split("").reverse().join("");
console.log(reversedText); // Output: olleh


🔍 Q3. Write a function to find the factorial of a number.
Answer:
function factorial(n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
}

console.log(factorial(5)); // Output: 120


🔍 Q4. How do you remove duplicates from an array?
Answer:
let items = [1, 2, 2, 3, 4, 4];
let uniqueItems = [...new Set(items)];
console.log(uniqueItems);


🔍 Q5. Print numbers from 1 to 10 using a loop.
Answer:
for (let i = 1; i <= 10; i++) {
console.log(i);
}


🔍 Q6. Check if a word is a palindrome.
Answer:
let word = "madam";
let reversed = word.split("").reverse().join("");
if (word === reversed) {
console.log("Palindrome");
} else {
console.log("Not a palindrome");
}


💬 Tap ❤️ for more!


💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
4
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
4
🚀 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
6
🚀 JavaScript Interview Questions with Answers — Part 4

31. What is if/else and switch?

Both are conditional statements used to make decisions in JavaScript.

if/else 
Executes code based on conditions. 

let age = 18;

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}


switch 
Used when checking multiple possible values. 

let day = 2;

switch(day) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    default:
        console.log("Invalid Day");
}


Difference: 
if/else - Better for conditions/ranges, Flexible 
switch - Better for exact values, Cleaner for many cases

32. What is the difference between for, for...in, and for...of?

for 
Traditional loop. 

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


for...in 
Used for iterating object keys. 

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

for (let key in person) {
    console.log(key);
}


for...of 
Used for iterable values like arrays. 

const nums = [1, 2, 3];

for (let num of nums) {
    console.log(num);
}


Key Difference: 
Loop - Best For 
for - Full control 
for...in - Object properties 
for...of - Array values

33. What is the while and do-while loop?

Both loops execute code repeatedly while a condition is true.

while Loop 
Condition checked before execution. 

let i = 1;

while (i <= 3) {
    console.log(i);
    i++;
}


do-while Loop 
Runs at least once before checking condition. 

let i = 1;

do {
    console.log(i);
    i++;
} while(i <= 3);


Difference: 
while - Condition first, May run zero times 
do-while - Code first, Runs at least once

34. What is the ternary operator?

The ternary operator is a shorthand for if/else.

Syntax: 
condition? trueValue : falseValue

Example: 

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);


Benefits: 
• Shorter code
• Cleaner simple conditions

35. What is short-circuit evaluation?

JavaScript stops evaluating expressions as soon as the result is known.

Using && 
Returns first falsy value. 

console.log(false && "Hello");


Output: 
false

Using || 
Returns first truthy value. 

console.log("" || "Default");


Output: 
Default

Practical Example: 

let username = "";

let displayName = username || "Guest";

console.log(displayName);


36. What is the difference between break and continue?

Keyword - Purpose 
break - Stops the loop completely 
continue - Skips current iteration

break Example 

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


Output: 

2

continue Example 

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


Output: 



5

37. How do you iterate over an array or object?

Array Iteration 
Using forEach() 

const nums = [1, 2, 3];

nums.forEach(num => {
    console.log(num);
});


Object Iteration 
Using for...in 

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

for (let key in person) {
    console.log(key, person[key]);
}


Using Object.keys() 

Object.keys(person).forEach(key => {
    console.log(key);
});


38. How do you implement recursion?

Recursion is when a function calls itself until a stopping condition is met.

Example: Factorial

function factorial(n) {
    if (n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5));


Output: 
120

Important Parts: 
1. Base condition
2. Recursive call

Without a base condition → infinite recursion.
1👍1
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
3
🔰 Some useful CSS shortcuts



💎 @Htmlcss_channels | #css #JavaScript
🔥32
💻 Responsive HTML Video با Orientation Media Query

💻 کد CSS:

* حالت عمودی (موبایل) *
@media screen and (orientation: portrait) {
  video {
    width: 100%;
    height: auto;
  }
}

* حالت افقی (دسکتاپ) *
@media screen and (orientation: landscape) {
  video {
    width: auto;
    height: 100vh;
    max-width: 100%;
  }
}


بهینه‌سازی بیشتر:
* فقط موبایل *
@media screen and (max-width: 768px) and (orientation: portrait) {
  video {
    object-fit: cover;
    aspect-ratio: 9/16;
  }
}

* فقط دسکتاپ *
@media screen and (min-width: 769px) and (orientation: landscape) {
  video {
    object-fit: contain;
    aspect-ratio: 16/9;
  }
}

🎬 مثال عملی:
<video controls poster="poster.jpg">
  <source src="video-mobile.mp4" media="(orientation: portrait)">
  <source src="video-desktop.mp4" media="(orientation: landscape)">
  Your browser does not support the video tag.
</video>



💎 @Htmlcss_channels | #HTML #css #JavaScript
8
مجموعه‌ای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامه‌نویس وب باید داشته باشه


ارسال کدها در پست بعدی👇


💎 @Htmlcss_channels | #HTML #css #JavaScript
3🔥1