Web Development - HTML, CSS & JavaScript
55.7K subscribers
1.88K photos
6 videos
34 files
506 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge

Managed by: @love_data
Download Telegram
1️⃣1️⃣ "while" Loop

A "while" loop runs as long as its condition remains true.

let count = 1;

while (count <= 5) {
    console.log(count);
    count++;
}

Output: 1 2 3 4 5

Be careful to update the variable. This can create an infinite loop:

let count = 1;

while (count <= 5) {
    console.log(count);
}

"count" never changes, so the condition never becomes false.

1️⃣2️⃣ "do...while"

A "do...while" loop executes the code at least once, because the condition is checked after the code runs.

let count = 10;

do {
    console.log(count);
    count++;
} while (count < 5);

Output: 10

Even though "count < 5" is false, the code runs once.

Compare:
while (count < 5) {
    console.log(count);
}

The "while" loop may execute zero times.

1️⃣3️⃣ "break"

"break" immediately stops a loop.

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

Output: 1 2 3 4

1️⃣4️⃣ "continue"

"continue" skips the current iteration and moves to the next one.

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

Output: 1 2 4 5

1️⃣5️⃣ Nested Loops

You can put one loop inside another.

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 2; j++) {
        console.log(i, j);
    }
}

Output:
• 1 1
• 1 2
• 2 1
• 2 2
• 3 1
• 3 2

Nested loops are useful for:
• Grids
• Tables
• Matrices
• Combinations
• Certain algorithmic problems

But they can become expensive when working with large datasets.

⭐ 1️⃣6️⃣ "for...of"

"for...of" is especially useful for iterating over values in an iterable such as an array or string.

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {
    console.log(fruit);
}

Output: Apple Banana Mango

⭐ 1️⃣7️⃣ "for...in"

"for...in" is commonly used to iterate over enumerable property keys of an object.

let person = {
    name: "Rahul",
    age: 25,
    city: "Pune"
};

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

Output: name age city

To access the corresponding value:
for (let key in person) {
    console.log(key, person[key]);
}

Output: name Rahul, age 25, city Pune

Important distinction
• for...of → values
• for...in → property keys

🧠 Real-World Example

Imagine an e-commerce application. You want to check whether each customer has completed their payment.

let payments = [
    "success",
    "success",
    "failed",
    "success"
];

for (let payment of payments) {
    if (payment === "success") {
        console.log("Order confirmed");
    } else {
        console.log("Payment failed");
    }
}

Output: Order confirmed, Order confirmed, Payment failed, Order confirmed

💻 Practice

1️⃣ Voting eligibility
Write a program that prints Eligible when age is 18 or above, otherwise Not eligible

2️⃣ Even numbers
Use a loop to print: 2 4 6 8 10

3️⃣ Multiplication table
Print the multiplication table of 7

4️⃣ Find a number
Loop from 1 to 20 and stop when you reach 13. Use "break".

5️⃣ Skip numbers
Loop from 1 to 10 but skip 5. Use "continue".

6️⃣ Predict the output
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}
7️⃣ Challenge
Write a program that checks numbers from 1 to 20 and prints Even for even numbers and Odd for odd numbers.
Hint: number % 2 === 0

🧠 Double Tap ❤️ For More
❤9
🎓 𝐅𝐑𝐄𝐄 𝐈𝐁𝐌 𝐂𝐞𝐫𝐭𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐂𝐨𝐮𝐫𝐬𝐞𝐬 🚀

Explore these beginner-friendly courses and strengthen your resume!

🎯 Perfect for Students, Freshers and Working Professionals
💻 Learn Online at Your Own Pace
📜 Earn Certificates After Successful Completion

🔗 𝗘𝗻𝗿𝗼𝗹𝗹 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘 👇:-

https://pdlink.in/45KgqDR

🔥 Don’t just collect certificates—build skills that employers value. Share this with your friends!
❤1🥰1
💻 JavaScript Roadmap 2026 — Part 5

🟢 Functions in JavaScript

Functions are one of the most important concepts in JavaScript.

A function is a reusable block of code designed to perform a particular task. Instead of writing the same code repeatedly, you can put it inside a function and call it whenever you need it.

1️⃣ Creating a Function

The basic syntax is:

function greet() {
console.log("Hello!");
}


This creates a function called "greet". But creating a function doesn't execute it.

To execute it, you need to call it:

greet();


Output: Hello!

2️⃣ Why Do We Need Functions?

Imagine you need to print the same message three times.

Without a function:

console.log("Welcome to JavaScript");
console.log("Welcome to JavaScript");


With a function:

function welcome() {
console.log("Welcome to JavaScript");
}

welcome();
welcome();
welcome();


Functions make code:

✅ Reusable,

✅ Easier to maintain,

✅ Easier to test,

✅ Easier to understand

3️⃣ Function Parameters

Functions can accept information through parameters.

function greet(name) {
console.log("Hello " + name);
}

greet("Rahul");
greet("Priya");


Output: Hello Rahul, Hello Priya

Here: name → parameter, "Rahul" → argument.

A parameter is the variable defined in the function. An argument is the actual value passed when calling it.

4️⃣ Multiple Parameters

A function can accept multiple parameters.

function add(a, b) {
console.log(a + b);
}

add(10, 5); // 15


You can reuse the same function: add(20, 30); add(100, 50);

5️⃣ Returning a Value

A function doesn't always need to print something. It can return a value.

function add(a, b) {
return a + b;
}

let result = add(10, 5);
console.log(result); // 15


The important difference is: console.log() displays something. return sends a value back from the function.

6️⃣ Understanding "return"

function multiply(a, b) {
return a * b;
}

let result = multiply(5, 4);
console.log(result);


The process is: multiply(5, 4) → 5 × 4 → 20 → return 20 → result = 20

Once JavaScript executes "return", the function stops executing.

function test() {
return "Hello";
console.log("This will not run");
}


7️⃣ Functions Without "return"

function greet(name) {
console.log("Hello " + name);
}

greet("Rahul");


That's completely valid. If a function doesn't explicitly return a value, its return value is: undefined

function greet() {
console.log("Hello");
}

let result = greet();
console.log(result); // Hello, undefined


8️⃣ Storing a Function in a Variable

Functions can be assigned to variables.

const greet = function () {
console.log("Hello");
};

greet();


This is called a function expression.

Compare:

Function declaration: function greet() { console.log("Hello"); }

Function expression: const greet = function () { console.log("Hello"); };

Both can be called as functions, but they have different hoisting behavior.

🔹 Arrow Functions

9️⃣ What Is an Arrow Function?

Arrow functions provide a shorter syntax for writing functions.

Traditional function:

function add(a, b) {
return a + b;
}


Arrow function:

const add = (a, b) => {
return a + b;
};
❤3
For a simple expression, you can make it even shorter:

const add = (a, b) => a + b;


This is called an implicit return.

🔟 Arrow Function Examples

One parameter:

const square = number => number * number;
console.log(square(5)); // 25


Multiple parameters:

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20


No parameters:

const greet = () => {
console.log("Hello");
};
greet();


1️⃣1️⃣ Default Parameters

You can provide a default value for a parameter.

function greet(name = "Guest") {
console.log("Hello " + name);
}

greet("Rahul"); // Hello Rahul

greet(); // Hello Guest


Default parameters are very useful when a value is optional.

1️⃣2️⃣ Rest Parameters

Sometimes you don't know how many arguments will be passed.

You can use "...".

function add(...numbers) {
console.log(numbers);
}

add(10, 20, 30, 40); // [10, 20, 30, 40]


The rest parameter collects the arguments into an array.

function add(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}

console.log(add(10, 20, 30)); // 60


1️⃣3️⃣ Scope

Scope determines where a variable can be accessed.

function greet() {
let message = "Hello";
console.log(message);
}

greet();


"message" exists inside the function. Trying to access it outside: console.log(message); will cause an error.

This is because "message" has function/local scope.

1️⃣4️⃣ Block Scope

Variables declared with "let" and "const" are block-scoped.

if (true) {
let message = "Hello";
console.log(message);
}


This works. But: console.log(message); outside the block does not. The block is defined by { // block }.

This is one reason "let" and "const" are preferred over "var".

1️⃣5️⃣ Global Scope

A variable declared outside functions or blocks can be accessible from broader parts of the program.

const appName = "My App";

function showAppName() {
console.log(appName);
}

showAppName(); // My App


However, don't create unnecessary global variables. Too many globals can make larger applications difficult to maintain.

⭐ 1️⃣6️⃣ Callback Functions

A function can be passed to another function.

function greet(name) {
console.log("Hello " + name);
}

function processUser(callback) {
callback("Rahul");
}

processUser(greet); // Hello Rahul


Here: greet is passed as a value to processUser. This is called a callback function. Callbacks are extremely important in JavaScript because you'll encounter them throughout: Events, Array methods, Asynchronous programming, APIs, Node.js

⭐ 1️⃣7️⃣ Higher-Order Functions

A higher-order function is a function that: accepts another function as an argument, or returns a function.

function calculate(a, b, operation) {
return operation(a, b);
}

const add = (a, b) => a + b;

console.log(calculate(10, 5, add)); // 15


Here "calculate()" receives another function. That's a higher-order function.

⭐ 1️⃣8️⃣ Functions Returning Functions

A function can also return another function.

function createGreeting(name) {
return function () {
console.log("Hello " + name);
};
}

const greetRahul = createGreeting("Rahul");
greetRahul(); // Hello Rahul
This concept leads directly into one of JavaScript's most important advanced topics: Closures. We'll cover closures separately later.

1️⃣9️⃣ Pure Functions

A pure function generally: 1. Produces the same output for the same input. 2. Doesn't modify external state.

function add(a, b) {
return a + b;
}


Every time: add(2, 3) returns: 5. A function that depends on changing external state can behave differently. Understanding pure functions becomes particularly useful when working with modern frontend frameworks.

🧠 Real-World Example

Imagine an online shopping application.

function calculateDiscount(price, discount) {
return price - discount;
}

function calculateTax(price, taxRate) {
return price * taxRate;
}

let price = 2000;
let discountedPrice = calculateDiscount(price, 300);
let tax = calculateTax(discountedPrice, 0.18);

console.log(discountedPrice);
console.log(tax);


Instead of putting everything into one huge block of code, each function handles a specific responsibility.

🧠 Double Tap ❤️ For More
❤5
🚀 𝗧𝗼𝗽 𝗜𝗻-𝗗𝗲𝗺𝗮𝗻𝗱 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 𝘁𝗼 𝗠𝗮𝘀𝘁𝗲𝗿 𝗶𝗻 𝟮𝟬𝟮𝟲

Explore these certification courses in today’s most in-demand technology fields:

💻 Full Stack :- https://pdlink.in/3SuUeuD

📊 Data Analytics :- https://pdlink.in/45vk5ph

💫AI Engineering :- https://pdlink.in/4fWJVID

🔥 Take the first step towards your high-paying tech career in 2026!
15 JavaScript Project Ideas for Freshers: ✨💻

🚀 Beginner Level :

1. ⏰ Digital Clock – Show current time live with JavaScript.
2. ✅ To-Do List App – Add, delete & mark tasks as complete.
3. ➗ Simple Calculator – Build a calculator with basic operations.
4. 🧠 Quiz App – Create a multiple-choice quiz with scores.
5. 🗓️ Age Calculator – Enter DOB and get exact age.



🌟 Intermediate Level :

6. 📋 Form Validator – Validate email, password, and input fields.
7. 🔢 Number Guessing Game – Let users guess a random number.
8. 🔄 Weather App (API) – Fetch live weather using OpenWeather API.
9. 📜 Quotes Generator – Show random quotes with a refresh button.
10. 💡 Dark Mode Toggle – Add light/dark theme toggle to a webpage.


🌌 Advanced Level :

11. 🎞️ Movie Search App – Use OMDb API to search and display movies.
12. ⚙️ Typing Speed Test – Track how fast users can type.
13. 🛍️ Product Filter UI – Filter products by category/price.
14. 🎵 Music Player – Play, pause, skip songs with a cool UI.
15. 🧠 Memory Card Game – Flip cards and match pairs for fun!

Like if it helps 👍❤️
❤7
𝗙𝗥𝗘𝗘 𝗔𝗜 𝗖𝗮𝗿𝗲𝗲𝗿 𝗠𝗮𝘀𝘁𝗲𝗿𝗰𝗹𝗮𝘀𝘀 🚀

Join this expert-led masterclass and discover how to become industry-ready for high-growth AI roles.

📅 Date: 24 September 2026
⏰ Time: 7:00 PM–9:00 PM IST
🌐 Mode: Online
🎓 Certificate: Available to all attendees

Eligibility :- Graduates Passing In 2025 or earlier

🔗 𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘 👇

https://pdlink.in/4xAMeGW

⚡ Register now and take your first step towards a successful career in AI!
❤2
🎓 𝗦𝘁𝗮𝗻𝗳𝗼𝗿𝗱 𝗨𝗻𝗶𝘃𝗲𝗿𝘀𝗶𝘁𝘆 𝗙𝗥𝗘𝗘 𝗢𝗻𝗹𝗶𝗻𝗲 𝗖𝗼𝘂𝗿𝘀𝗲𝘀! 🚀

Explore free online learning opportunities from Stanford University across technology, business and more!

💻 Tech & Programming
🤖 Artificial Intelligence & Data Science
💼 Business & Entrepreneurship
💡 Leadership & Innovation

🔗 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝘁𝗵𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 👇

https://pdlink.in/4hlnZGw

🎯 Great for students, freshers and working professionals looking to expand their knowledge.
🚀 𝗧𝗼𝗽 𝟳 𝗙𝗥𝗘𝗘 𝗠𝗶𝗰𝗿𝗼𝘀𝗼𝗳𝘁 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝘁𝗼 𝗟𝗲𝗮𝗿𝗻 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀! 📊

Want to start a career in Data Analytics?

Explore these 7 free Microsoft-backed learning resources covering Power BI, Excel, SQL and data fundamentals

🔗 𝗔𝗰𝗰𝗲𝘀𝘀 𝘁𝗵𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 👇

https://pdlink.in/3Tm2D3Z

💡 Ideal for students, freshers and professionals who want to build practical data skills.
❤2🍓1
The best doesn't come from working more.

It comes from working smarter.

The most common mistakes people make,
With practical tips to avoid each:

1) Working late every night.

• Prioritize quality time with loved ones.

Understand that long hours won't be remembered as fondly as time spent with family and friends.

2) Believing more hours mean more productivity.

• Focus on efficiency.

Complete tasks in less time to free up hours for personal activities and rest.

3) Ignoring the need for breaks.

• Take regular breaks to rejuvenate your mind.

Creativity and productivity suffer without proper rest.

4) Sacrificing personal well-being.

• Maintain a healthy work-life balance.

Ensure you don't compromise your health or relationships for work.

5) Feeling pressured to constantly produce.

• Quality over quantity.

6) Neglecting hobbies and interests.

• Engage in activities you love outside of work.

This helps to keep your mind fresh and inspired.

7) Failing to set boundaries.

• Set clear work hours and stick to them.

This helps to prevent overworking and ensures you have time for yourself.

8) Not delegating tasks.

• Delegate when possible.

Sharing the workload can enhance productivity and give you more free time.

9) Overlooking the importance of sleep.

• Prioritize sleep for better performance.

A well-rested mind is more creative and effective.

10) Underestimating the impact of overworking.

• Recognize the long-term effects.

👉WhatsApp Channel: https://whatsapp.com/channel/0029VaI5CV93AzNUiZ5Tt226

👉Telegram Link: https://t.me/addlist/ID95piZJZa0wYzk5

Like for more ❤️

All the best 👍 👍
❤4👍1
🚀 𝐁𝐞𝐜𝐨𝐦𝐞 𝐚𝐧 𝐀𝐈 𝐄𝐧𝐠𝐢𝐧𝐞𝐞𝐫 𝐢𝐧 𝟐𝟎𝟐𝟔

🎯 Choose Your Learning Track:

💻 Java Full Stack + AI Engineering
🌐 MERN Full Stack + AI Engineering

Placement Highlights: ₹41 LPA highest package | ₹7.4 LPA average package | 2,000+ students placed | 500+ hiring partners

🔗 𝗕𝗼𝗼𝗸 𝗙𝗥𝗘𝗘 𝗗𝗲𝗺𝗼 𝗖𝗹𝗮𝘀𝘀 :- https://pdlink.in/4fWJVID

⚡ AI is creating new career opportunities—start building the skills companies need in 2026!
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
🤖 New Powerful AI Model: GigaChat 3.5 Reasoning

This open-source LLM actually thinks before it answers! Perfect for complex coding, math, and reasoning prompts.

✅ Built on GigaChat 3.5 Ultra: explores multiple step-by-step reasoning paths

✅ Automated verification reinforces correct answers, enabling self-correction

✅ Autonomously decides when to call external tools or revise earlier steps

✅ Highly efficient: Linear attention uses 37% fewer tokens than DeepSeek V4 Flash Preview

📈 Massive benchmark gains over non-reasoning versions:
• IFBench: 44 → 77
• Natural Plan: 64 → 80
• LiveCodeBench v6: 56 → 85

🔗 Open-sourced under MIT license. Weights on Hugging Face: fp8 | bf16
❤1