DEV Community: Janu Nirmal

Callback Functions

Janu Nirmal — Wed, 15 Apr 2026 16:50:16 +0000

A function which is passed as an argument to another function

Callback functions are used when we want one function to run **after another function finishes its task

Scenario -1
API call after getting response

<!DOCTYPE html>
<html>
<head>
    <title>API Call Response</title>
</head>
<body>

<script>
    // Function to simulate an API call
    function callApi(callback) {
        setTimeout(() => {
            console.log("API called");
            callback();
        }, 6000);
    }

    // Function to process the data after API call
    function processData() {
        console.log("Data getting processed");
    }

    // Passing processData function as a callback
    callApi(processData);
</script>

</body>
</html>

Output

API called
Data getting processed

Scenario 2:
Open file after downloading

<!DOCTYPE html>
<html>
<head>
    <title>Open File After Downloading</title>
</head>
<body>

<script>
    // Function to open the file
    function openFile(download) {
        console.log("File opened after downloading");
        download();
    }

    // Function to simulate downloading the file
    function downloadFile() {
        console.log("File downloading process");
    }

    // Passing downloadFile as a callback function
    openFile(downloadFile);
</script>

</body>
</html>

Output

File opened after downloading
File downloading process

Scenario 3:
**Printing of receipt after online payment**

<!DOCTYPE html>
<html>
<head>
    <title>Receipt After Online Payment</title>
</head>
<body>

<script>
    // Function to perform online payment
    function onlinePayment(bill) {
        console.log("Online payment in progress...");
        bill(); // Calling the callback function
    }

    // Callback function to print receipt
    function receiptPrint() {
        console.log("Printing of receipt");
    }

    // Passing receiptPrint as a callback
    onlinePayment(receiptPrint);
</script>

</body>
</html>

Output

Online payment
Printing of receipt

Scenario 4
Sent otp after login

<!DOCTYPE html>
<html>
<head>
    <title>Send OTP After Login</title>
</head>
<body>

<script>
    // Function to perform login
    function loginFirst(auth) {
        console.log("Login needs to be done first");
        auth(); // Calling the callback function
    }

    // Callback function to send OTP
    function otpSent() {
        console.log("OTP will be sent next");
    }

    // Passing otpSent as a callback
    loginFirst(otpSent);
</script>

</body>
</html>

Output

Login need to be done first
OTP will sent next

Scenario 5
A driver needs to be assigned after booking the cab.

<!DOCTYPE html>
<html>
<head>
    <title>Book Cab First and Then Driver Will Be Assigned</title>
</head>
<body>

<script>
    // Function to book a cab
    function bookCab(rapido) {
        console.log("Cab booked in Rapido");
        rapido(); // Calling the callback function
    }

    // Callback function to assign driver
    function driverAssign() {
        console.log("Driver is assigned now");
    }

    // Passing driverAssign as a callback
    bookCab(driverAssign);
</script>

</body>
</html>

Output

Cab booked in rapido
Driver is assigned now

Functions in Javascript

Janu Nirmal — Thu, 09 Apr 2026 08:57:41 +0000

Functions are sets of instructions. These are reusable building blocks which are used to execute a specific task whenever we need it.

Uses of function:

Syntax and explanation:

1) Function keyword — function

What it means:
This word tells the computer:
👉 "I am going to create a function."

2) Function name — sum

What it means:
This is the name of the function.
You use this name later to run the function.

3) Parameters — (x, y)

What it means:
These are inputs the function expects to receive.

Simple example:
Like a calculator asking:
👉 "Give me two numbers."

Here:
x = first number
y = second number

4) Function body — { }

What it means:
This is the working area of the function.
All instructions are written inside these curly brackets.

Simple example:
Like a kitchen where cooking happens.

5) Return keyword — return

What it means:
This sends the result back after the work is done.

Simple example:
Like giving the answer after solving a problem.

👉 "Here is your result."

6) Statement — return x + y;
What it means:
This is the actual task the function performs.

Here it means:
👉 Add x and y

Simple example:
If:

x = 4
y = 5

Result:

7) Arguments — (4, 5)
What it means:
These are the real values sent to the function.

Simple example:
Parameters are placeholders:

(x, y)

Arguments are actual numbers:

(4, 5)

8) Function call — sum(4, 5)

What it means:
This tells the function to run.

Simple example:
Like calling someone on the phone:
👉 "Sum, please do this calculation."

9) Variable — let result

What it means:
This stores the answer returned by the function.

Simple example:
Like saving the result in a box.

result = 9

Simple Real-Life Example

function like a juice machine:

Programming Term Real-Life Meaning
Function Juice machine
Parameters Fruits
Function body: Machine process
Return Juice output
Arguments Actual fruits given
Function call Pressing the button

Types of function:

1) Function Declaration

Simple Explanation
A function declaration is the normal way to create a function.

Real-Life Comparison
Like writing a recipe in advance and using it whenever needed.

Key Points
Has a name
Reusable
Can be called before it is written in code

When to Use
Use when you need a standard reusable function.

2) Function Expression

Simple Explanation
A function expression means storing a function inside a variable.

Real-Life example
Like saving a phone number in contacts.

Key Points
Stored in a variable
Must be defined before using
Very common in modern JavaScript

When to Use
Use when you want to store or pass a function.

3) Arrow Function

Simple Explanation
An arrow function is a short and modern way to write a function.

Real-Life example
Like using a shortcut instead of a long route.

Key Points
Uses => symbol
Short syntax
Easy to read

When to Use
Use for small, simple functions.

4) Anonymous Function (Yet to be discussed)

Simple Explanation
An anonymous function is a function without a name.

Real-Life example
Like a temporary worker hired for one task.

Key Points
No name
Used one time
Often used inside another function

When to Use
Use when the function is needed only once.

5) Async Function (Yet to be discussed)

Simple Explanation
An async function is used when the task takes time to finish.

Real-Life example
Like ordering food and waiting for delivery.

Key Points
Uses async
Uses await
Handles slow operations
When to Use

Use for:
API calls
File reading
Database operations

6) Constructor Function (Yet to be discussed)

Simple Explanation
A constructor function is used to create multiple objects.

Real-Life example
Like a cookie cutter that makes many cookies of the same shape.

Key Points
Uses new keyword
Creates objects
Used in Object-Oriented Programming
When to Use

Use when creating:
Users
Employees
Products
Records

Simple quick summary of the abovementioned functions

Other lists of functions which were noticed while referring to other sites:

Generator Function
Higher-Order Function
Nested Functions
Pure Functions
Default Parameter Function
Rest Parameter Function

Scenario 1:

*Function to find even or odd number *

<!DOCTYPE html>
<html>
<head>
    <title>Odd or Even</title>
</head>

<body>
    <script>
        // Declare a number
        let number = 9;

        // Function to check odd or even
        function addorEven() {
            if (number % 2 == 0) {
                return 100; // Even number
            } 
            else {
                return 200; // Odd number
            }
        }

        // Call the function
        let findoutvalue = addorEven();

        // Print the result
        console.log(findoutvalue + 20);
    </script>
</body>
</html>

Output

Scenario 2:

Function to find the biggest number

<!DOCTYPE html>
<html>
<head>
    <title>Function Demo</title>
</head>

<body>
    <script>

        // Function to find the biggest number
        function bigNumber(a, b, c) {

            if (a > b && a > c) {
                return "A is biggest";
            }

            else if (b > a && b > c) {
                return "B is biggest";
            }

            else {
                return "C is biggest";
            }

        }

        // Call the function
        let numberInput = bigNumber(10, 11, 9);

        // Print the result
        console.log("The final result of biggest number: " + numberInput);

    </script>
</body>
</html>

Output

The final result of biggest numberB is bigger

Loop Statement

Janu Nirmal — Fri, 03 Apr 2026 10:31:51 +0000

While loops execute a block of code as long as a specified condition is true.

There are two types of false statement

While loop
For loop

Syntax for loop statement

while (condition) 
{
  // code block to be executed
}

Scenario 1

<!DOCTYPE html>
<html>

<head>
    <title>Loop Statement</title>
</head>

<body>

    <script>

        let count = 1;

        while (count <= 9) {

            document.write(count + "<br>");

            count = count + 2;

        }

    </script>

</body>

</html>

Output

Scenario 2

<!DOCTYPE html>
<html>

<head>
    <title>Looping Program</title>
</head>

<body>

    <script>

        let num = 1;

        while (num <= 5) {

            document.write(num + "<br>");

            num++;

        }

    </script>

</body>

</html>

Output

Scenario 3

<!DOCTYPE html>
<html>

<head>
    <title>While Loop Statement 3</title>
</head>

<body>

    <script>

        let count = 2;

        while (count <= 10) {

            document.write(count + "<br>");

            count = count + 2;

        }

    </script>

</body>

</html>

Output

Scenario 4

<!DOCTYPE html>
<html>

<head>
    <title>Loop Statement</title>
</head>

<body>

    <script>

        let count = 5;

        while (count >= 1) {

            document.write(count + "<br>");

            count--;

        }

    </script>

</body>

</html>

Output

Scenario-based programs

Janu Nirmal — Thu, 02 Apr 2026 08:34:33 +0000

Scenario 1:

1)Shopping Discount System
Input:
amount
isMember(boolean)
Rules:
1. amount ≥ 5000 => 20% discount
2. amount ≥ 2000 => 10% discount
3. Otherwise, no discount
4. members get extra 10% discount
5. Print final price after discount.

Flow diagram:

Program code

<!DOCTYPE html>

<html>
   <title>Shopping task scenario</title>
<head>
   <body>
 <script>
   let amount = 5000;
   let ismember = true;
   let discount = 0;

   if(amount >= 5000)
   {
      discount = 20;
   }

   else if(amount >= 2000)
      {
         discount = 10;
      }

      else
      {
         discount = 0;
      }

      if(ismember)
      {
         discount = discount + 10;
      }

      let finalprice = amount - (amount * discount/100)

      document.write("Final price concluded" + finalprice)

   </script>
   </body>

</head>
</html>

Output

Final price concluded3500

Scenario 2

2)Login Access Check
Input
username
password
isBlocked(boolean)
Rules

Allow login only if:
username is "Test"
password is "pwd"
user is not blocked
Otherwise print an appropriate message.

Flow diagram

Program code

<!DOCTYPE html>
<html>
<head>
    <title>Login access scenario</title>
</head>

<body>
    <script>

        let username = "admin";
        let password = "1234";
        let isblocked = true;

        if (username == "Test") {

            if (password == "pwd") {
                document.write("User is not blocked");
            }
            else {
                document.write("Username is wrong");
            }

        }
        else {
            document.write("Password");
        }

    </script>
</body>
</html>

Output

Password

Scenario 3:

3)Traffic Signal System

Input
Signal color variable:

Rules:

red = stop
yellow = get ready
green = go

Flow diagram

Program code

<!DOCTYPE html>
<html>
<head>
    <title>Traffic Signal</title>
</head>

<body>

    <script>

        let color = "red";

        if (color == "red") {
            document.write("Stop in signal");
        }

        else if (color == "yellow") {
            document.write("Wait in signal");
        }

        else {
            document.write("Go in the signal");
        }

    </script>

</body>
</html>

Output

Stop in signal

Scenario 4

ATM Withdrawal
Inputs

balance
withdrawAmount

Rules:

If withdrawAmount > balance = "Insufficient funds"
If withdrawAmount ≤ 0 = "Invalid amount"
Else => deduct and show remaining balance

Flow diagram

Program code

<!DOCTYPE html>
<html>
<head>
    <title>Withdrawal Scenario</title>
</head>

<body>

<script>

let withdrawAmount = 200;
let balance = 2000;

if (withdrawAmount > balance) {

    document.write("Balance is insufficient");

}
else if (withdrawAmount <= 0) {

    document.write("Invalid amount");

}
else {

    let remainingBalance = balance - withdrawAmount;

    document.write(
        "Remaining balance calculated: "
        + remainingBalance
    );

}

</script>

</body>
</html>

Output

Remaining balance calculated1800

Scenario 5

**Mobile Data Usage

***Inputs*

User has used data
Used GB out of the limit GB.

Rules

If usage ≥ 100% = "Limit exceeded"
If usage ≥ 80% => "Warning: nearing limit"
Else = "Usage normal"

Flow diagram

Program code

<!DOCTYPE html>
<html>
<head>
    <title>Data Usage</title>
</head>

<body>

    <script>

        let GB = 80;

        if (GB >= 100) {

            document.write("Limit exceeded");

        }
        else if (GB >= 80) {

            document.write("Warning: nearing limit");

        }
        else {

            document.write("Usage normal");

        }

    </script>

</body>
</html>

Output

Warning: nearing limit

Scenario 6

Electricity Bill

Inputs
Units consumed

Rules

0-100 => 5/unit
101-300 => 7/unit
300+ 10/unit
Calculate the total bill.

Flow diagram

Program code

<!DOCTYPE html>
<html>
<head>
    <title>Electricity Bill</title>
</head>

<body>

    <script>

        let unitsConsumed = 200;
        let bill = 0;

        if (unitsConsumed <= 100) {

            bill = unitsConsumed * 5;

        }
        else if (unitsConsumed <= 300) {

            bill = unitsConsumed * 7;

        }
        else {

            bill = unitsConsumed * 10;

        }

        document.write("Total bill: " + bill);

    </script>

</body>
</html>

Output

Total bill1000

Scenario 7

Student Grade System

Inputs
marks

Rules:

If marks ≥ 90 → Grade A
If marks ≥ 75 → Grade B
If marks ≥ 50 → Grade C
Otherwise → Fail
Print the grade.

Flow diagram

Program code

<!DOCTYPE html>
<html>

<head>
    <title>Marks Grade</title>
</head>

<body>

    <script>

        let marks = 65;

        if (marks >= 90) {

            document.write("Grade A");

        }
        else if (marks >= 75) {

            document.write("Grade B");

        }
        else if (marks >= 50) {

            document.write("Grade C");

        }
        else {

            document.write("Failed");

        }

    </script>

</body>

</html>

Output

Grade C

Scenario 8

Age Eligibility for Voting

Inputs
age

Rules:

If age ≥ 18 → Eligible to vote
Otherwise → Not eligible
Print eligibility status.

Program code

<!DOCTYPE html>
<html>

<head>
    <title>Voting Eligibility</title>
</head>

<body>

    <script>

        let age = 10;

        if (age >= 18) {

            document.write("Concern person is eligible for voting");

        }
        else {

            document.write("Concern person is not eligible for voting");

        }

    </script>

</body>

</html>

Output

Concern person is not eligible for voting

Scenario 9

Password Strength Checker

Input
passwordLength

Rules:

If length ≥ 12 → Strong password
If length ≥ 8 → Medium password
Otherwise → Weak password
Print password strength.

Program code

<!DOCTYPE html>
<html>

<head>
    <title>Password Strength Checker</title>
</head>

<body>

    <script>

        let passwordLength = 10;

        if (passwordLength >= 12) {

            document.write("Password strength is strong");

        }
        else if (passwordLength >= 8) {

            document.write("Password strength is medium");

        }
        else {

            document.write("Password strength is weak");

        }

    </script>

</body>

</html>

Scenario - 10

Movie Ticket Pricing

Inputs
age

Rules:

If age < 5 → Free ticket
If age ≤ 18 → Ticket price = 100
If age ≤ 60 → Ticket price = 150
Otherwise → Senior citizen price = 120
Print ticket price.

Program code

<!DOCTYPE html>
<html>

<head>
    <title>Movie Ticket Booking</title>
</head>

<body>

    <script>

        let age = 10;
        let ticketFare = 0;

        if (age < 5) {

            ticketFare = 0;

        }
        else if (age <= 18) {

            ticketFare = 100;

        }
        else if (age <= 60) {

            ticketFare = 150;

        }
        else {

            ticketFare = 120;

        }

        document.write("The final ticket price is " + ticketFare);

    </script>

</body>

</html>

Output

The final ticket price is100

Scenario 11

Temperature Alert System

Inputs
temperature

Rules:

If temperature ≥ 40 → Heat alert
If temperature ≥ 30 → Warm weather
Otherwise → Normal weather
Print weather status.

Program code

<!DOCTYPE html>
<html>

<head>
    <title>Temperature Monitor System</title>
</head>

<body>

    <script>

        let temperature = 20;
        let weather = "";

        if (temperature >= 40) {

            weather = "Heat alert";

        }
        else if (temperature >= 30) {

            weather = "Warm weather";

        }
        else {

            weather = "Normal";

        }

        document.write("The weather condition is " + weather);

    </script>

</body>

</html>

Output

The wether condition isNormal

HTML - An Introduction

Janu Nirmal — Tue, 31 Mar 2026 05:09:48 +0000

Expansion of HTML: Hypertext markup languages

HTML is a markup language, and it uses a system of tags and elements to annotate text, images, and other content to tell a web browser how to display them.

Alternatives of HTML:

XML – Extensible markup language
XHTML – Extensible hypertext markup language
SGML - Standard Generalised markup language
SVG – Scalable vector Graphics
md - Markdown

Html version

Html (1.0)
Html (2.0)
Html (3.2)
Html (4.01)
XHtml (1.0)
Html (5)

Connection between JS, CSS and Html

HTML ----> Skeleton (Basic structure)
CSS -----> Skin (Styles)
JavaScript ---> Brain (Functions the program)

Save the file
File.html extension

Run the file
Double-click on the file.

Basic structure of Html

<!DOCTYPE html>: This denotes a document as HTML5 document.

: Contains metadata about the document, such as the page title (which appears in the browser tab) and links to external resources like CSS files.

: Contains all the visible content of the web page, such as text, images, and links.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Key Concepts of HTML
Element - Component of HTML. Have a opening tag and closing tag

Attributes - Class, id, style, href, src, alt, width, height, disabled

Core Structure Tags

: Encloses all visible content such as text, images, and links.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Headings (

to

): Define a hierarchy of titles, with

being the most important.

<!DOCTYPE html>
<html>
<head>
    <!-- Metadata elements go here -->
    <title>Page Title</title>
</head>

Paragraphs (

): Group blocks of text together. Lorem500 will give a paragraph with 500 characters.

<p>Sample data.</p>

Links(): Create hyperlinks to other pages or files using the href attribute.

<a href="url">Link text</a>

Images(): Embed visual media; this is a self-closing tag that does not require a .

<img src="url" alt="description">

Lists(

): Create bulleted (unordered) or numbered (ordered) lists.

<ul>
  <li>Chatgpt</li>
  <li>Claude</li>
  <li>Gemini</li>
</ul>

Divisions(

): A generic container used to group elements for styling.

<div>
  <h1>Heading</h1>
  <p>Paragraph</p>
</div>

Forms(

, , ): Enable user interaction and data submission.

<form action="/submit_page.php" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

Media(,): Embed sound or movie content directly into the page.

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Tables (

, ,

): Organise data into rows and columns.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data A</td>
    <td>Data B</td>
  </tr>
</table>

Semantic tags clearly describe the meaning and purpose of the content they contain to both the browser and the developer.

Purpose of semantic tags

Accessibility
SEO (Search Engine Optimisation)
Readability and Maintenance

Standalone tags - Need to discuss

DEV Community: Janu Nirmal

Callback Functions

Functions in Javascript

Loop Statement

Scenario-based programs

HTML - An Introduction

to

): Define a hierarchy of titles, with

being the most important. <!DOCTYPE html> <html> <head>  <title>Page Title</title> </head>

being the most important.

`<!DOCTYPE html> <html> <head>  <title>Page Title</title> </head>`