Forem: Nanthini Ammu

JS Functions

Nanthini Ammu — Thu, 09 Apr 2026 07:28:43 +0000

Function :

Reusable blocks of code designed to perform specific tasks
Function run when it is called.

Example :


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

greet(); 

Output : Hello!

Variables(let) inside function are private.

function test() {
  let x = 10;
}

console.log(x); //error

Functions with Parameters :

Parameters allow to pass values to a function.
Parameters are listed inside the parentheses in the function definition.

Parameter : Variable in function definition
Argument : Actual value passed to function


function add(a,b) {   //  'a,b' is Parameter
  console.log(a+b);
}

add(5,6);      // "5,6" is Argument


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

greet("Varun");

Output : Hello Varun

Defautlt Parameter :

Default parameters allow to assign a default value to a function parameter.
If no argument is passed, default value is used.
Always keep default parameters at the end.

function display(name = "You"){

    console.log(name);
}

display("Varun");
display();

Output : 
Varun
You

Multiple Defautlt Parameters :

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

console.log(add(5, 3)); // 8
console.log(add(5));    // 5
console.log(add());     // 0

Return Values :

A function can return a value back to the code that called it.
When a function reaches a return statement, the function stops executing.The value after the return keyword is sent back to the caller.


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

let result = add(5, 3);
console.log(result); 

Outpu : 8

Function Types

Function Declaration.
Function Expression.
Arrow function.

Function Declaration :

The traditional way to define a named function. It is hoisted, meaning it can be called before its definition in the code.


let result = add(5, 3);
console.log(result); 

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

Function Expression :

It is a function stored in a variable.
After a function expression has been stored in a variable, the variable can be used as a function.
It is a function without a name. It ends with a semicolon.
This is not hoisted.As function expressions can not be called before they are defined.


const multiply = function(a, b) {
  return a * b;
};
console.log(multiply(4, 3));

Arrow Function :

It allows a simple syntax for function expressions.
Can create it without function, return keywords and curly brackets.
It can be used when the function body contains only one statement.
Parentheses are required for zero or multiple parameters.
It is not hoisted.


const multiply = (a,b)=> a*b;
console.log(multiply(1,2));

//Can also do this


const operator = (a,b) => {
    console.log(a+b); 
    console.log(a*b);
    console.log(a/b);
    console.log(a%b)
};
operator(1,2);

Excercise 2

Nanthini Ammu — Tue, 07 Apr 2026 08:10:06 +0000

21) Least Common Multiple

let number1 = 8
let number2 = 10

let minNumber = (number1<number2?number1:number2);
let maxNumber = (number1>number2?number1:number2);

while(true)
{

if(number2%minNumber == 0)
{
    document.write(parseInt(number2));
    break;
}

number2 = number2+maxNumber;

}

Output : 40

22) 2 power 5

let number = 2;
let power = 5;

document.write(number**5);

Output : 32

25) Fibonacci Series

let firstNumber = 0
let secondNumber = 1
let str = "";

str = firstNumber+","+secondNumber+","

for(let i =0; i<=10; i++)
{
    total = firstNumber+secondNumber; 
        str = str+total+","

    firstNumber = secondNumber; 
    secondNumber = total;
}
document.write(str.slice(0,-1));

26) Swapping two numbers

let firstNumber = 3;
let secondNumber = 5;
let temp = 0;

temp = firstNumber;
firstNumber = secondNumber;
secondNumber = temp

document.write("firstNumber : "+firstNumber+"<br>");
document.write("secondNumber: "+secondNumber);

27) Swapping without third variable

let firstNumber = 3;
let secondNumber = 5;

document.write("Before Swapping firstNumber : "+firstNumber+"<br>");
document.write("Before Swapping secondNumber : "+secondNumber+"<br>");

firstNumber = firstNumber+secondNumber; //8
secondNumber = firstNumber - secondNumber; // 3
firstNumber = firstNumber - secondNumber; //5

document.write("After Swapping firstNumber : "+firstNumber+"<br>");
document.write("After Swapping secondNumber : "+secondNumber+"<br>");

28) Fibonacci without using third variable

let firstNumber = 0;
let secondNumber = 1;

document.write(firstNumber+",");
document.write(secondNumber+",");

for(let i=0;i <=10; i++)
{

    firstNumber = firstNumber+secondNumber; //0+1 =1 
    document.write(firstNumber+","); //1 
    secondNumber = firstNumber+secondNumber;  // 1+1 = 2
    document.write(secondNumber+",");


}
Output : 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597,2584,4181,6765,10946,17711,28657,

30) First 10 Prime Numbers

let count = 1;
let str = "";

        for (let i = 2; i <= 100; i++) {
            let isPrime = true;

            for (let j = 2; j < i; j++) {
                if (i % j == 0)
                    isPrime = false
            }
            if (isPrime && count<=10){
                str = str+i+",";
                count++;
            }


        }

        document.write(str.slice(0,-1));

Output : 2,3,5,7,11,13,17,19,23,29

29) Odd Positions - Even Positions

let oddPositions = "";
let evenPositions = "";
for(let i = 1;i<=100;i++)
{
if(i%2 == 0)
evenPositions = evenPositions+i+",";
else
oddPositions = oddPositions+i+",";
}

document.write("Odd Positions : "+oddPositions.slice(0,-1)+"<br>");
document.write("Even Positions : "+evenPositions.slice(0,-1));

Output : 
Odd Positions : 1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99
Even Positions : 2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74,76,78,80,82,84,86,88,90,92,94,96,98,100

31) Sum of Digits until it becomes single digit

let number = 984567;
let total;
let temp =0;
while(number>10)
{
 total = 0;
while(number>0)
{

 total = total+ (number%10);
 number = parseInt(number/10);
}
    number = total;
}
    document.write(total)

Output : 3

32) Printing 5! 4! 3! 2! 1!

let printFactorial;
for(let i=5; i>=1; i--)
{
    printFactorial = 1;
for(let j = 1; j<=i; j++)
{

printFactorial = printFactorial*j;

}
document.write(`Factorial of ${i} :`+ printFactorial+"<br>");
}

Output : 
Factorial of 5 :120
Factorial of 4 :24
Factorial of 3 :6
Factorial of 2 :2
Factorial of 1 :1

33) Printing 110 29 38 47

let number = 10;

for(let i=1; i<=10; i++)
{

document.write(`${i} * ${number} : `+i*number+"<br>");
number--;

}

34) Printing 1 11 121

let number = 11;
for(let i=0; i<=5; i++)
{
document.write((number**i) + " ");

}

Output : 1 11 121 1331 14641 161051

35) Printing 1 8 27 64

let power = 3;
for(let i =1; i<=5; i++)
{
    document.write(i**power+" ");
}

Output : 1 8 27 64 125

36) Printing 1 4 9 16 25 36 49 64 81 100

for(let i =1; i<=10; i++)
{
    document.write(i*i+" ");
}

Printing 1 4 27 256

for(let i =1; i<=5; i++)
{
    document.write(i**i+" ");
}

38) Square Root of a Number

let number = 16
for(let i =2; i<=number; i++)
{
    if(number%i ==0 && number == i*i)
    {
    document.write(i);
    break;
    }
}
Output : 4

39) Spy Number

let number = 1124
let addition =0;
let multiplication = 1;
while(number>0)
{
addition = addition+(number%10);
multiplication = multiplication*(number%10);
number = parseInt(number/10);
}
if(addition ==multiplication )
document.write("Given number is a Spy number. Addition of digit is "+addition+ ".Multiplication of Digit is "+multiplication+".");
else
document.write("Given number is not a Spy number");

Output : Given number is a Spy number. Addition of digit is 8.Multiplication of Digit is 8.

40) Prime no.s in a fibonacci series

let firstNumber = 0
let secondNumber = 1
let str = "";
let primeNumber = "";
let isPrime;

str = firstNumber+","+secondNumber+","


for(let i =0; i<=10; i++)
{
    isPrime = true;
    total = firstNumber+secondNumber; 
    str = str+total+","

        for(let j =2; j<total; j++)
        {
        if(total%j ==0){
            isPrime = false;
            break;}
        }
        if(isPrime)
        primeNumber = primeNumber+total+" ";

    firstNumber = secondNumber; 
    secondNumber = total;
}

document.write("Fibonacci Series : ")
document.write(str.slice(0,-1));
document.write("<br>")
document.write("Primt Number in Fibonacci Series : ")
document.write(primeNumber);

Output : 

Fibonacci Series : 0,1,1,2,3,5,8,13,21,34,55,89,144
Primt Number in Fibonacci Series : 1 2 3 5 13 89

Looping Programs Excercise

Nanthini Ammu — Mon, 06 Apr 2026 06:34:18 +0000

1) 1 1 1 1 1

for(let i=1;i<=5;i++)
{
    document.write(1+" ");

}

Output :  1 1 1 1 1

2) 1 2 3 4 5

for(let i=1;i<=5;i++)
{
    document.write(i+" ");

}

Output : 1 2 3 4 5

3) 1 3 5 7 9

for(let i=1;i<=10;i+=2)
{
  document.write(i+" ");

}

Output : 1 3 5 7 9

4) 3 6 9 12 15

for(let i=3;i<=15;i+=3)
{
  document.write(i+" ");

}

Output : 3 6 9 12 15

5) Multiples of 3 and 5

let str = "";

for(let i=3;i<=100;i++)
{
    if(i%3 ==0 && i%5 ==0)
        str += i+", ";

}
document.write("Multiplies of 3 and 5 upto 100 : "+ str.slice(0,-2));

Output : 

Multiplies of 3 and 5 upto 100 : 15, 30, 45, 60, 75, 90

6) Multiples of 3 or 5

let str = "";

for(let i=3;i<=100;i++)
{
    if(i%3 ==0 || i%5 ==0)
        str += i+", ";

}
document.write("Multiplies of 3 or 5 upto 100 : "+ str.slice(0,-2));

Output : 

Multiplies of 3 or 5 upto 100 : 3, 5, 6, 9, 10, 12, 15, 18, 20, 21, 24, 25, 27, 30, 33, 35, 36, 39, 40, 42, 45, 48, 50, 51, 54, 55, 57, 60, 63, 65, 66, 69, 70, 72, 75, 78, 80, 81, 84, 85, 87, 90, 93, 95, 96, 99, 100

7) Divisors of given number

let number = 20;
let str = "1, ";

for(let i=2;i<number;i++)
{
    if(number%i==0)
    str+= i+", ";

}

str += number;
document.write(`Divisors of given number ${number} is : `+str);

8) Count of Divisors of given number

let number = 20;
let count = 2;

for(let i=2;i<number;i++)
{
    if(number%i==0)
       count++;

}

document.write(`Count of Divisors of given number ${number} is : `+count);

9) Prime Number - number greater than 1 whose only divisors are 1 and itself.

for(let i=2 ; i<100 ;i++)
{
    let isPrime = true;
    for(let j=2 ; j<i ; j++){

    if(i%j ==0)
        isPrime = false;
    }

    if (isPrime)
    document.write(i+" ");

}

Output : 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97

10) Reverse Printing a number

let number = 23497;
let revisedNumber =0;
let remainder = 0; 

while(number>0)
{

    remainder = (number%10);
    revisedNumber = revisedNumber*10+remainder;
    number = parseInt(number/10);
}

 document.write(revisedNumber);

Output :  79432

11) Count of Digits

let number = 23497;
let count = 0;

while(number>0)
{
    number = parseInt(number/10);
    count++;
}

document.write(count);

Output : 5

12) Sum of Digits

let number = 23497;
let sumOfNumbers =0;
let remainder = 0; 

while(number>0)
{

    remainder = (number%10);
    sumOfNumbers +=remainder;
    number = parseInt(number/10);
}

 document.write(sumOfNumbers);

Output : 25

14) Palindrome -an integer that remains the same when its digits are reversed

let originalNumber = 101;
let number = originalNumber
let reverseNumber =0;
let remainder = 0; 

while(number>0)
{


    remainder = (number%10);
    reverseNumber = (reverseNumber*10)+remainder;
    number = parseInt(number/10);

}

if(originalNumber === reverseNumber)
    document.write(`${reverseNumber} is a palindrome number`);
else
    document.write(`${reverseNumber} is not a palindrome number`);

15) Armstrong Number -integer that equals the sum of its own digits, each raised to the power of the total number of digits

let originalNumber = 407;
let number2 = originalNumber;
let digitCount = findDigitCount(153);
let sumOfDigit = 0;

function findDigitCount(originalNumber)
{
    let number = originalNumber;
    let digit = 0;
    while(number>0)
    {
        number = parseInt(number/10);
        digit++;
    }

    return digit;
}


function findPowerOfDigit(value,digitCount)
{

    return value**digitCount;
}


while(number2>0)
{

    sumOfDigit = sumOfDigit+findPowerOfDigit(number2%10,digitCount);
    number2 = parseInt(number2/10);

}


if(sumOfDigit === originalNumber)
document.write(`Given number ${originalNumber} is an Armstrong Number`);
else
document.write(`Given number ${originalNumber} is not an Armstrong Number`);

16) Neon Number - the sum of digits of square of the number is equal to the number.

for(let i=0;i<=100;i++)
{
let sumOfDigit = 0;
let no = i**2;
while(no>0)
{
 sumOfDigit = sumOfDigit + (no%10);
 no = parseInt(no/10);

}
if (i == sumOfDigit)
document.write(`${i} is a Neon Number <br>`)
}

17) Strong Number - number whose sum of the factorial of its digits is equal to the original number.

Factorial of a Number : the product of all positive integers less than or equal to the number.

let origNumber = 145;
let number = origNumber;
let remainder = 0
let total = 0;


while(number>0)
{
 total = total+findFactorial(number%10);

 number = parseInt(number/10);
}

function findFactorial(remainder)
{
let factorialofNumber = 1;
    for(let i = remainder; i>=2;i--)
    {

    factorialofNumber =  factorialofNumber*i;
    }
    return factorialofNumber;

}
if(origNumber == total)
document.write(`Given number ${origNumber} is a Strong Number`);
else
document.write(`Given number ${origNumber} is not a Strong Number`);

18) Addition of first n numbers

let number = 15;
let total = 0;
for(let i=1; i<=number;i++)
{
total+= i;
}

document.write(total);

19) Factorial

let number = 6;
let factorialNumber = 1;
for(let i=1; i<=number;i++)
{
factorialNumber = factorialNumber*i;
}

document.write(factorialNumber);

20) Greatest Common Divisor

let number1 = 30;
let number2 = 15;
let GCD = 0;

for (let i = 2;i <= (number1<number2?number1:number2) ; i++)
{
if(number1%i ==0 && number2%i ==0)

GCD = i;
}

document.write(GCD);

if else scenarios 1

Nanthini Ammu — Fri, 03 Apr 2026 09:28:28 +0000

    //  1)Shopping Discount System
    // You have:
    // amount
    // isMember(boolean)  
    // A user buys products worth amount.
    // if amount ≥ 5000 => 20% discount
    // if amount ≥ 2000 => 10% discount
    // otherwise => no discount
    // members get extra 10% discount
    // Print final price after discount.

        let amount = 5000;
        let discount = 0;
        isMember = true;

        if(amount>=5000){
            discount=isMember ? 30 : 20;
        }else if(amount>=2000){
            discount=isMember ? 20 : 10;
        }else{
            discount= 0;
        }
        let finalAmount = amount - (amount * discount / 100);
        console.log(`Final amount to be paid: ${finalAmount} after applying a discount of ${discount}%`);

//  2)Login Access Check
//     you have:
//         username
//         password
//         isBlocked(boolean)
//     allow login only if:
//         username is "admin"
//         password is "1234"
//         user is not blocked
//     otherwise print appropriate message.

let username = "admin";
let password = "1234";
let isBlocked = false;

if(username==="admin" && password==="1234" && !isBlocked){
    console.log("Login successful");
}
else if(username==="admin" && password==="1234" && !isBlocked){
    console.log("User is blocked");
}
else if(username!=="admin"){
    console.log("Incorrect username");
}
else if(username==="admin" && password!=="1234"){
    console.log("Incorrect password");
}

// 3)Traffic Signal System
//     Signal color variable:
//         red = stop
//         yellow = get ready
//         green = go
//     print action based on color.

let signalColor = "Red";
if(signalColor.toLowerCase() === "Red".toLowerCase()){
    console.log("Stop");
}
else if(signalColor.toLowerCase() === "Yellow".toLowerCase()){
    console.log("Get ready");   
}
else if(signalColor.toLowerCase() === "Green".toLowerCase()){
    console.log("Go");
}    
else{
    console.log("Invalid signal color");   
 }

// 4)ATM Withdrawal
//     User has:
//         balance
//         withdrawAmount
//     Rules:
//         If withdrawAmount > balance = "Insufficient funds"
//         If withdrawAmount ≤ 0 = "Invalid amount"
//         Else => deduct and show remaining balance



let balance = 5000;
let Withdrawal = 2000;

if(Withdrawal>balance){
    console.log("Insufficient funds" )
}else if(Withdrawal<=0)
    console.log("Invalid amount")
else{
    console.log(`Amount after Withdrawal: ${balance-Withdrawal}`)
}

// 5)Mobile Data Usage
//     User has used data GB out of limit GB.
//     If usage ≥ 100% = "Limit exceeded"
//     If usage ≥ 80% => "Warning: nearing limit"
//     Else = "Usage normal"

    let dataUsed = 80; // in GB

    if (dataUsed >= 100) {
        console.log("Limit exceeded");
    } else if (dataUsed >= 80) {
        console.log("Warning: nearing limit");
    } else {
        console.log("Usage normal");
    }

        // 6)Electricity Bill
        //     Units consumed:
        //         0-100 => 5/unit
        //         101-300 => 7/unit
        //         300+  10/unit
        //     Calculate total bill.



        let unitsConsumed = 90;
        let unitPrice = 0;

        if (unitsConsumed > 0 && unitsConsumed <= 100) {
            unitPrice = 5;

        } else if (unitsConsumed >= 101 && unitsConsumed <= 300) {
            unitPrice = 7;

        } else if (unitsConsumed >= 301) {
            unitPrice = 10;
        }

        console.log(`Total Bill Value is ${unitsConsumed * unitPrice}`);

Truthy vs Falsy Values, Explicit Type Conversion

Nanthini Ammu — Fri, 03 Apr 2026 07:26:45 +0000

Truthy vs Falsy Values:

Falsy Values :

"",'' String with zero length
false- boolean keyword
0 number zero, -0 negative zero, 0n bigint zero.
NaN-Not a Number
null
undefined- Variable that has been declared but not assigned with a value.

Truthy Values :

Everything else Truthy.

function isFalsy(value) {
    if(value) {
        console.log ("The value is truthy.");
    } else {
        console.log ("The value is falsy.");
    }
}

isFalsy(false); //falsy value
isFalsy(0);     //falsy value
isFalsy(-0);    //falsy value
isFalsy(0n);    //falsy value
isFalsy(null);  //falsy value
isFalsy(undefined); //falsy value
isFalsy(NaN);    //falsy value
isFalsy("");    //falsy value
isFalsy('');    //falsy value
isFalsy(``);    //falsy value
isFalsy(1);     //truthy value
isFalsy(-1);    //truthy value
isFalsy(0.1);   //truthy value
isFalsy(-0.1);  //truthy value
isFalsy(1n);    //truthy value
isFalsy("false"); //truthy value
isFalsy("0");    //truthy value 
isFalsy("null"); //truthy value
isFalsy("undefined"); //truthy value
isFalsy("NaN");  //truthy value

Explicit Type Conversion :

It is used to manually convert a value from one data type to another using build-in functions.

Converting to String :

string(value)
.toString(value)

let a = 10;
console.log(typeof a); // number
console.log(typeof String(a)); // string
console.log(typeof a.toString()); // string

Converting to Number :

Number(value)
parseInt(value)
parseFloat(value)
Using unary +

let a ="10";
let b ="10.5";
console.log(typeof a); // string
console.log(typeof Number(a)); // number
console.log(typeof parseInt(a)); // number
console.log(typeof parseFloat(b)); // number


console.log(5+"10"); // string concatenation, result is "5" + "10" = "510"

// If one value is a string, + becomes string concatenation, not addition. Only + behaves differently , others (-, *, /) convert to numbers.

// Using unary + we can convert string to numeric.
console.log(5+ +"10"); // numeric addition, +"10" converts "10" to 10, result is 5 + 10 = 15


console.log(5-"10"); // numeric subtraction, "10" is converted to 10, result is 5 - 10 = -5
console.log(5*"10"); // numeric multiplication, "10" is converted to 10, result is 5 * 10 = 50
console.log(5/"10"); // numeric division, "10" is converted to 10, result is 5 / 10 = 0.5

Converting to Boolean :

Converts a value to true or false based on its truthiness
- Falsy values (become false): 0, "" (empty string), null, undefined, NaN, and false.
- Truthy values (become true): Everything else, including "0", "false", "null", "undefined", "NaN".

JS Operators

Nanthini Ammu — Thu, 02 Apr 2026 11:54:15 +0000

Arithmetic Operator:

Used for basic math operations.
- Addition +
- Subtraction -
- Multiplication *
- Division /
- Modulus (remainder) %
- Power **

let a = 20;
let b = 4;

// Addition (+)
let addition = a + b;
console.log("Addition (20 + 4):", addition);         // 24

// Subtraction (-)
let subtraction = a - b;
console.log("Subtraction (20 - 4):", subtraction);   // 16

// Multiplication (*)
let multiplication = a * b;
console.log("Multiplication (20 * 4):", multiplication); // 80

// Division (/)
let division = a / b;
console.log("Division (20 / 4):", division);         // 5

// Modulus / Remainder (%)
let modulus = a % b;
console.log("Modulus (20 % 4):", modulus);           // 0

// Exponentiation (**)
let exponentiation = a ** b;
console.log("Exponentiation (20 ** 4):", exponentiation); // 160000

Comparison Operators:

Used to compare value. Returns true or false.

let a = 10;
let b = 20;
let c = "10";

// Equal to (==)  - compares value only (type conversion allowed)
console.log("Equal to (10 == 20):", a == b);         // false
console.log("Equal to (10 == '10'):", a == c);       // true  (type coercion)

// Strict Equal to (===)  - compares value and type
console.log("Strict Equal (10 === 10):", a === 10);  // true
console.log("Strict Equal (10 === '10'):", a === c); // false (different types)

// Not Equal to (!=)  - compares value only
console.log("Not Equal (10 != 20):", a != b);        // true
console.log("Not Equal (10 != '10'):", a != c);      // false (type coercion)

// Strict Not Equal to (!==)  - compares value and type
console.log("Strict Not Equal (10 !== 20):", a !== b);  // true
console.log("Strict Not Equal (10 !== '10'):", a !== c); // true (different types)

// Greater than (>)
console.log("Greater Than (10 > 20):", a > b);       // false
console.log("Greater Than (20 > 10):", b > a);       // true

// Less than (<)
console.log("Less Than (10 < 20):", a < b);          // true
console.log("Less Than (20 < 10):", b < a);          // false

// Greater than or Equal to (>=)
console.log("Greater or Equal (10 >= 10):", a >= 10); // true
console.log("Greater or Equal (10 >= 20):", a >= b);  // false

// Less than or Equal to (<=)
console.log("Less or Equal (10 <= 20):", a <= b);    // true
console.log("Less or Equal (20 <= 10):", b <= a);    // false

Assignment Operators :

let a = 50;
console.log("Assignment (a = 50):", a);              // 50

// Addition Assignment (+=) a = a + 10
a += 10;
console.log("Addition Assignment (a += 10):", a);    // 60

// Subtraction Assignment (-=) a = a - 5
a -= 5;
console.log("Subtraction Assignment (a -= 5):", a);  // 55

// Multiplication Assignment (*=) a = a * 2
a *= 2;
console.log("Multiplication Assignment (a *= 2):", a); // 110

// Division Assignment (/=) a = a / 5
a /= 5;
console.log("Division Assignment (a /= 5):", a);     // 22

// Modulus Assignment (%=) a = a % 8
a %= 8;
console.log("Modulus Assignment (a %= 8):", a);      // 6

// Exponentiation Assignment (**=) a = a ** 3
a **= 3;
console.log("Exponentiation Assignment (a **= 3):", a); // 216

Logical Operator:

// Logical AND (&&) - returns true only if both operands are true
console.log("AND (true && true):", a && a);          // true
console.log("AND (true && false):", a && b);         // false
console.log("AND (false && false):", b && b);        // false

// Logical OR (||) - returns true if at least one operand is true
console.log("OR (true || false):", a || b);          // true
console.log("OR (false || false):", b || b);         // false
console.log("OR (true || true):", a || a);           // true

// Logical NOT (!) - reverses the boolean value
console.log("NOT (!true):", !a);                     // false
console.log("NOT (!false):", !b);                    // true

Type of Operator :

Returns the data type of a value as a string.

console.log("typeof 42:", typeof 42);                      // number
console.log("typeof 3.14:", typeof 3.14);                  // number
console.log("typeof 'hello':", typeof "hello");            // string
console.log("typeof true:", typeof true);                  // boolean
console.log("typeof undefined:", typeof undefined);        // undefined
console.log("typeof 9007199254740991n:", typeof 9007199254740991n); // bigint

Increment & Decrement :

//  Post-Increment (a++) 
// Uses the current value first, then increments by 1
let a = 5;
console.log("Initial a:", a);                        // 5
let postInc = a++;
console.log("postInc = a++ (value used):", postInc); // 5  (old value returned)
console.log("a after a++:", a);                      // 6  (incremented after)

// Pre-Increment (++a) 
// Increments first, then uses the new value
let b = 5;
console.log("Initial b:", b);                      // 5
let preInc = ++b;
console.log("preInc = ++b (value used):", preInc);   // 6  (incremented before returning)
console.log("b after ++b:", b);                      // 6

// Post-Decrement (a--) 
// Uses the current value first, then decrements by 1
let c = 10;
console.log("Initial c:", c);                      // 10
let postDec = c--;
console.log("postDec = c-- (value used):", postDec); // 10 (old value returned)
console.log("c after c--:", c);                      // 9  (decremented after)

//  Pre-Decrement (--a) 
// Decrements first, then uses the new value
let d = 10;
console.log("Initial d:", d);                      // 10
let preDec = --d;
console.log("preDec = --d (value used):", preDec);   // 9  (decremented before returning)
console.log("d after --d:", d);    //9

Java Script Variables and Data Types

Nanthini Ammu — Thu, 02 Apr 2026 09:33:01 +0000

Variables:

Variables are containers for storing data values.
Variables must be defined with unique names.
Variable name can contain Letters (a–z, A–Z), Digits (0–9), Underscore _, and Dollar sign $.
Variable name can't start with number.
Javascript is case sensitive.So let name and let Name both are different variables.
Don't use reserved keywords for variable names.
Use camelCase. Ex userName , totalAmount.
For contstant variables ise upper_case.Ex const MAX_LIMIT = 100;
For boolean use is or has. Ex isLoggedIn,hasPermission.

Data Types :

Primitive data types:

String : Text wrpped in quotes.
Number : Integers and Decimals.
BigInt : Used for integers larger than the safe limit of the Number type. Created by appending n to an integer
Boolean : Yes or No.
Undefined : Variable declared but value not yet assigned.
Null : empty.

Symbol :

Non Primitive data types:

Object, Array, Functions, Dates, RegExp.

How to declare variables:

JS has 3 keywords.
- var(old way – avoid),let(modern & recommended) and constconstant – cannot change.

Direct Assignment :
let city = "Chennai";

Declare first, assign later :

let country;
country = "India";

Reassign value :

let score = 10;
score = 20;

What is Scope?

Scope defines where a variable can be accessed in the code.
There are mainly 2 types. Function Scope(Function Level) and Block Scope(Block Level).

What is Block Level ?

A block is anything inside { } like if condition,loop, and function.
let and const follow block scope.

if (true) {
  let y = 20;
  console.log(y); // Works
}

console.log(y); // Error

What is Function Level?

A variable declared inside a function can be used only inside that function.
var follows function scope.

function test() {
  var x = 10;
  console.log(x); // Works
}

test();
console.log(x); //  Error (x is not accessible here)

var ignores block scope. if (true) { var a = 100; }

console.log(a); // Works.
Even though a is declared inside {}, it is accessible outside.

What is Hoisting?

Hoisting means JS moves declarations to the top of their scope before execution. So we can use a variable before we even declare it. Instead of an error, we get undefined.

Hoisting with var :

console.log(x); // undefined
var x = 10;

Why no error?
JavaScript internally treats it like this:

var x;
console.log(x); // undefined
x = 10;

Declaration is moved up
Value assignment stays in place

Hoisting with let and const :

console.log(y); // ReferenceError
let y = 20;

This happens because of Temporal Dead Zone (TDZ) - The time between
variable declaration and initialization.

Why var should not be used?

Lack of Block Scope. This can leak variables outside blocks.

if (true) {
  var x = 10;
}

console.log(x); // 10 (unexpected!)

Hoisting Issues. This hides bugs.

console.log(a); // undefined
var a = 5;

Can be redeclared. var allows us to redeclare the same variable name multiple times in the same scope without an error. This can lead to accidentally overwriting values. let and const will throw a SyntaxError if we try to redeclare them.

var name = "Arun";
var name = "Raj"; // no error

CSS Part 3

Nanthini Ammu — Fri, 27 Mar 2026 14:00:16 +0000

Display Property (block, inline, inline-block):

It controls how an element is shown on the page.

Block:

Element takes full width.
Starts on a new line.

<div>Block 1</div>
<div>Block 2</div>

div {
    display: block;
    background-color: lightblue;
}

Inline:

Elements stays in same line.
Takes only required width.

<span>Span 1</span>

span {
    display: block;  
    background-color: lightgreen;
}

CSS Part 2

Nanthini Ammu — Fri, 27 Mar 2026 06:25:55 +0000

Descendant Selectors:

Selects all elements inside another element (any level).
It selects both direct child and nested child.

<div>
    <p>This is paragraph 1</p>
    <section>
        <p>This is paragraph 2</p>
    </section>
</div>

div p {
    color: red;
}
Both paragraphs become red.
Because both are inside `<div>`.

Child Selectors:

Selects only direct children.

<div>
    <p>This is direct child</p>
    <section>
        <p>This is nested child</p>
    </section>
</div>

div > p {
    color: blue;
}
 First paragraph alone -This is direct child, becomes blue.

CSS Colors:

Used to change text color.

p{
  color:red;
}

CSS Background:

Used to style background of elements.

Background Color:

div {
    background-color: lightblue;
}

Background Image:

div {
    background-image: url("image.jpg");
}

Background Repeat:

div {
    background-repeat: no-repeat;
}

Background Size:

div {
    background-size: cover;
}

Background Position:

div {
    background-position: center;
}

CSS Fonts:

It is used to control how text looks.

Font Family:

Changes the style of font.

p {
    font-family: Arial, sans-serif;
}

Font Weight:

It controls thickness.

p {
    font-weight: bold;
}

Font Style:

It makes text italic.

p {
    font-style: italic;
}

letter-spacing, word-spacing, and text-transform:

p {
letter-spacing: 3px;
word-spacing: 8px;
text-transform: uppercase; 
}

CSS Text Styling:

p {

    color : green;                /* Text color*/
    text-align: center;           /* Text Alignment*/
    text-decoration: underline;   /* Text Decoration*/
    text-transform: uppercase;    /* Text Transform */
    word-spacing: 10px;           /* Word Spacing */
    letter-spacing: 2px;           /* Letter Spacing */
}

CSS Box Model (margin, border, padding, content):

Content:

Actual text or image.

Padding:

Space between content and border.

Border:

Line around padding.

Margin:

Space outside the border.

<div class="box">Text inside a box</div>

.box {
     width: 200px; 
    height: 200px;
    padding: 50px;  
    border: 5px solid green; 
    text-align: center; 
    background-color: gray;
    color: white;
    margin: 20px; 

}

CSS Part 1

Nanthini Ammu — Thu, 26 Mar 2026 11:28:25 +0000

What is CSS?

It is used to style and design webpages.
HTML creates the structure(like headings, text, images) css makes it look beautiful(colors,layout,font,spacing).
Basic CSS structure consist of selector, Property, and value.
- Selector - What to style.
- Property - What to change.
- Value - How to change.

Important Rule:

Each property ends with ;
Properties are inside { }
Selector comes before { }

In the below example

p → selector
color → property
red → value

Example:

<html>
    <head>
        <style>
/* css styling part */
        p {
        color: blue;
        font-size: 20px;
        }
        </style>
    </head>
    <body>

        <p>This is HTML</p>
    </body>
</html>

Three main ways to add CSS to a HTML page:

Inline CSS.
- CSS is written inside the HTML Tag.

<p style="color: red; font-size: 20px;">This is HTML</p>

Internal CSS.
- CSS is written inside <style> tag in <head>.

<head>
  <style>
    p {
      color: blue;
      font-size: 20px;
    }
  </style>
</head>

External CSS.
- CSS is written in a separate file.

Step 1 : Create a CSS file

p {
  color: blue;
  font-size: 20px;
}

Step 2: Link it in HTML

<head>
  <link rel="stylesheet" href="style.css">
</head>

Element Selectors:

An Element Selector is used to select HTML elements by their tag name and apply styles to them.
It applies style to all elements of that tag type.

p{
    color: green;
    font-size: 20px;
}
h1{
    color: blue;
    font-size: 30px;
}

ID Selectors(#id):

An ID Selector is used to style one specific element using its unique id.
Starts with #.

<p id="para1">This is a paragraph.</p>

<style>
    #para1{
        color: green;
        font-size: 20px;
    }
</style>

Class Selector(.class):

It is used to style multiple elemets using the same class name.
Starts with .(dot).

<p  class="text">This is a second paragraph.</p>
<h1 class="text">This is a heading</h1>

.text {
  color: blue;
  font-size: 20px;
}

Attribute Selector:

Attribute selectors target HTML elements based on the presence or value of their attributes.

`[attribute]` :

Selects all elements that contain that attribute

<input type="text" id="name" name="name">
<input type="age" id="age" name="age">

input[type] {
    color: blue;
    border: 2px solid;
    font-size: 20px;
}     

------------

<input type="text" required>
input[required] {
  border: 2px solid red;
}

------------
<input type="text" placeholder="Enter name">
input[placeholder] {
  border: 1px dashed blue;
}

`[attribute="val"]`:

Selects elements where the attribute exactly matches the value.

<input type="text">
<input type="password">

input[type="text"] {
  border: 2px solid blue;
}
input[type="password"] {
  background-color: #f5f5f5;
}
---------------
<a href="https://google.com">Google</a>

a[href="https://google.com"] {
  color: red;
}

`[attribute~="val"]`:

Selects elements where the attribute contains a word (space-separated) that exactly matches the value.

<p class="box red"> This is a paragraph.</p> <!-- Only this line gets styled -->
<p class="boxred"> This is a paragraph.</p>

p[class~="red"]{
    color: red;
    font-size: 20px;
}

`[attribute^="val"]`:

Select elements where the attribute starts with a specific value.

<a href="https://google.com">Google</a> <!-- Only this line gets styled -->
<a href="http://example.com">Example</a>

a[href^="https"] {
  color: green;
}

`[attribute$="val"]`:

Select elements where the attribute ends with a specific value.

<a href="https://google.com">Google</a> <!-- Only this line gets styled -->
<a href="https://example.org">Example</a>

a[href$=".com"] {
  color: red;
}

`[attribute*="val"]`:

Select elements where the attribute contains a specific value anywhere inside.

<a href="https://google.com">Google</a>
<a href="https://mygooglepage.com">My Page</a>

a[href*="google"] {
  color: green;
}

`[attribute|="val"]`:

It selects elements where the attribute value is:
- exactly equal to the value, or
- starts with the value followed by a hyphen (-)

<p lang="en">Hello</p> <!-- this line gets styled -->
<p lang="en-US">Hello (US)</p> <!-- this line gets styled -->
<p lang="en*UK">Hello (UK)</p>

p[lang|="en"] {
  color: blue;
}

HTML part 3

Nanthini Ammu — Thu, 26 Mar 2026 06:17:44 +0000

Label
Button
select
Option
Textarea

Label:

It is used to tell the user what to enter in the input box.
It is best to connect label with input using for and id.
When the user click on the label, input gets focused.

Example :

<form>
    <label for="email">Email:</label>
    <input type="email" id="email"><br><br>

    <label for="password">Password:</label>
    <input type="password" id="password">
</form>

Button:

It is used to perform an action when clicked like submitting form and resetting form.

Types of button:

button
submit
reset

*Example : *

<button>Click Me</button>
<button type="button">Normal</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

select:

It is used to create drop down list.
It allows users to choose one or more options.

Example :

<label for="city">Choose City:</label>
<select id="city">
    <option>Chennai</option>
    <option>Delhi</option>
    <option>Mumbai</option>
</select>


<select name="city">
    <option value="chn">Chennai</option>
    <option value="del">Delhi</option>
</select>

Here the value is what gets sent to server.

For Multiple Selection :

<select multiple>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Option:

It is used to define items inside a dropdown.
It can have value attribute.
We can mention default selected option.
We can disable a option.

Example :

<select>
    <option value="">Select Course</option>
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js" disabled>JavaScript</option>
</select>

Textarea:

It is used to take multline input from user.

Example :

<form>
    <label for="feedback">Feedback:</label><br>

    <textarea id="feedback" name="feedback" rows="5" cols="30"
        placeholder="Enter your feedback here"></textarea><br><br>

    <button type="submit">Submit</button>
</form>

HTML Part 2

Nanthini Ammu — Tue, 24 Mar 2026 05:19:11 +0000

Span Element
Link Element
Image Element
List Element
- Unordered List
- Ordered List
- Description List
Table Element
Input Type
- Text and Basic Input
- Date and Time Inputs
- Selection Inputs
- File and Media
- Buttons
- Range & Color
Form

Span Element:

It is an inline element.
It is used to style small parts of text.
It doesn't have semantic meaning.

Example :

<p>This is <span style="color:red;">important</span> text</p>

link Element:

It is used to navigate from one page to another.

Example :

<a href="https://google.com">Go to Google</a>

To open link in new tab:

<a href="https://google.com" target="_blank">Open Google</a>

Link to another page:

<a href="about.html">About Page</a>

image Element:

It is used to dispaly image.
It is a self closing tag.

Example :

<img src="image.jpg" alt="Description">
<img src="image.jpg" width="200" height="150">
<a href="https://google.com">
    <img src="image.jpg" alt="Google">
</a>

src - Path of the image
alt - Alternative text. It is shown when the image fails to load.

list Element:

It is used to display items in an organized way.
There are 3 types of list. Unordered List<ul>, Ordered List<ol> and Description List<dl>.

Unordered List:

Used when order does not matter. Displays with bullet points by default.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>


Styling Bullet Points (square) :
<html>
    <head>
        <title>hi</title>
        <style>
            .square {
                list-style-type: square;
            }
        </style>
    </head>
    <body>
<ul class="square"> 
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

    </body>
</html>

Ordered List:

Used when order matters. Displays with numbers by default.

<ol > 
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Ordered List Types:

<ol type="A">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ol>

<ol type="a">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ol>

Description List:

Used for term and description pairs — like a dictionary.

<dl>
    <dt>Term</dt>
    <dd>Description of the term</dd>

    <dt>Another Term</dt>
    <dd>Description of another term</dd>
</dl>

Table Element:

It is used to display data in rows and columns.

Example :

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Varun</td>
        <td>6</td>
    </tr>

    <tr>
        <td>Aditya</td>
        <td>6</td>
    </tr>
</table>

input type:

It is used to take user input.
It supports multiple input types such as text, password, email, number, and more for collecting user information.

Text and Basic Input:

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="search">
<input type="tel">
<input type="url">

Date and Time Inputs:

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

Selection Inputs:

<input type="radio">
<input type="checkbox">

File and Media:

<input type="file">

Buttons:

<input type="submit">
<input type="reset">
<input type="button">
<input type="image">

Range & Color:

<input type="range">
<input type="color">

Form:

It is used to collect user data. Example Login page, Registration form.
The user input is most often sent to a server for processing.

Example :

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <br>
    <label for="age">Age:</label>
    <input type="text" id="age" name="age">
    <br>
    <br>
    <input type="submit" value="Submit">
</form>

Forem: Nanthini Ammu

JS Functions

Function :

Functions with Parameters :

Defautlt Parameter :

Multiple Defautlt Parameters :

Return Values :

Function Types

Function Declaration :

Function Expression :

Arrow Function :

Excercise 2

21) Least Common Multiple

22) 2 power 5

25) Fibonacci Series

26) Swapping two numbers

27) Swapping without third variable

28) Fibonacci without using third variable

30) First 10 Prime Numbers

29) Odd Positions - Even Positions

31) Sum of Digits until it becomes single digit

32) Printing 5! 4! 3! 2! 1!

33) Printing 1*10 2*9 3*8 4*7

34) Printing 1 11 121

35) Printing 1 8 27 64

36) Printing 1 4 9 16 25 36 49 64 81 100

Printing 1 4 27 256

38) Square Root of a Number

39) Spy Number

40) Prime no.s in a fibonacci series

Looping Programs Excercise

1) 1 1 1 1 1

2) 1 2 3 4 5

3) 1 3 5 7 9

4) 3 6 9 12 15

5) Multiples of 3 and 5

6) Multiples of 3 or 5

7) Divisors of given number

8) Count of Divisors of given number

9) Prime Number - number greater than 1 whose only divisors are 1 and itself.

10) Reverse Printing a number

11) Count of Digits

12) Sum of Digits

14) Palindrome -an integer that remains the same when its digits are reversed

15) Armstrong Number -integer that equals the sum of its own digits, each raised to the power of the total number of digits

16) Neon Number - the sum of digits of square of the number is equal to the number.

17) Strong Number - number whose sum of the factorial of its digits is equal to the original number.

Factorial of a Number : the product of all positive integers less than or equal to the number.

18) Addition of first n numbers

19) Factorial

20) Greatest Common Divisor

if else scenarios 1

Truthy vs Falsy Values, Explicit Type Conversion

Truthy vs Falsy Values:

Falsy Values :

Truthy Values :

Explicit Type Conversion :

Converting to String :

Converting to Number :

Converting to Boolean :

JS Operators

Arithmetic Operator:

Comparison Operators:

Assignment Operators :

Logical Operator:

Type of Operator :

Increment & Decrement :

Java Script Variables and Data Types

Variables:

Data Types :

Primitive data types:

Non Primitive data types:

How to declare variables:

What is Scope?

What is Block Level ?

What is Function Level?

What is Hoisting?

Why var should not be used?

CSS Part 3

Display Property (block, inline, inline-block):

33) Printing 110 29 38 47

`[attribute]` :

`[attribute="val"]`:

`[attribute~="val"]`:

`[attribute^="val"]`:

`[attribute$="val"]`:

`[attribute*="val"]`:

`[attribute|="val"]`: