DEV Community: Niladri Banerjee

Day 4: Learning JavaScript by Step By Step

Niladri Banerjee — Wed, 29 Oct 2025 13:08:34 +0000

Intro to JS
In JavaScript, var, let, and const are keywords used to declare variables.

var:
Scope: var declarations are function-scoped or globally-scoped. This means a variable declared with var is accessible throughout the entire function it's declared in, or globally if declared outside any function.
Hoisting: var declarations are hoisted, meaning their declarations are moved to the top of their containing scope during compilation. However, their assignments are not hoisted. This can lead to unexpected behavior if you try to use a var variable before its assignment.
Reassignment and Redeclaration: var variables can be reassigned and redeclared within the same scope without error.

let:
Scope: let declarations are block-scoped. This means a variable declared with let is only accessible within the block (e.g., if statement, for loop, or any {} block) where it's defined.
Hoisting: let declarations are also hoisted, but they are in a "temporal dead zone" until their declaration line is executed. This prevents using a let variable before its declaration, leading to a Reference Error.
Reassignment and Redeclaration: let variables can be reassigned but cannot be redeclared within the same scope.

const:
Scope: const declarations are also block-scoped, similar to let.
Hoisting: Like let, const declarations are hoisted but are in a temporal dead zone until declared.
Reassignment and Redeclaration: const variables cannot be reassigned or redeclared after their initial assignment. This makes them suitable for values that should remain constant throughout the program. However, if a const variable holds an object or array, the properties or elements of that object/array can be modified, but the const variable itself cannot be reassigned to a different object or array.

Datatypes in JS

let a = 123; // number
let b = "Hello World"; // string
let c = true; // boolean
let d = null; // null
let e; // undefined
let f = { name: "Niladri", age: "26"}; // object
let g = [1,2,3,4,5]; // array

console.log("Value of a:", a, "Type of a:", typeof a);
console.log("Value of b:", b, "Type of b:", typeof b);
console.log("Value of c:", c, "Type of c:", typeof c);
console.log("Value of d:", d, "Type of d:", typeof d);
console.log("Value of e:", e, "Type of e:", typeof e);
console.log("Value of f:", f, "Type of f:", typeof f);
console.log("Value of g:", g, "Type of g:", typeof g);


let v1 = 12;
console.log("Values of v1:",v1);
console.log("Values of v1:",(v1+1));
v2 = "12";
console.log("Values of v2: ",v2);
console.log("See what happens:",(v2+1)) // concatenation occurs because v2 is a string 
console.log("Mathematical result:", (Number(v2) + 1)); // Output: 13 explisit conversion from string to number.
console.log("Mathematical result:", (parseInt(v2) + 1)); // Output: 13 explisit conversion from string to number.
console.log("Mathematical result:", (v1.toString() + 1)); // Output: "121" explicit conversion from number to string.


let a1 = "100"; // string
console.log("Type of a1:", typeof a1);
console.log("Value of the variable: ", a1);
console.log("Value of the variable: ", Number(a1)); // explicit conversion from string to number
console.log("Type after conversion:", typeof Number(a1));


let a2= "Niladri"; // string
console.log("Type of a1:", typeof a2)
console.log("Value of the variable: ", a2)
console.log("Value of the variable: ", Number(a2));// explicit conversion from string to number //NAN
// NaN stands for Not a Number because a2 is assigned by the string "Niladri" which cannot be converted to a number.
console.log("Type after conversion:", typeof Number(a2));

Output

Value of a: 123 Type of a: number
Value of b: Hello World Type of b: string
Value of c: true Type of c: boolean
Value of d: null Type of d: object
Value of e: undefined Type of e: undefined
Value of f: { name: 'Niladri', age: '26' } Type of f: object
Value of g: [ 1, 2, 3, 4, 5 ] Type of g: object
Values of v1: 12
Values of v1: 13
Values of v2:  12
See what happens: 121
Mathematical result: 13
Mathematical result: 13
Mathematical result: 121
Type of a1: string
Value of the variable:  100
Value of the variable:  100
Type after conversion: number
Type of a1: string
Value of the variable:  Niladri
Value of the variable:  NaN
Type after conversion: number

=== Code Execution Successful ===

Operation in JS

const a = 10;
const b = 5;

// Addition
const sum = a + b;
console.log("Addition:", sum); //15
//increment
let C = 10;
console.log("Value of C ", C);//10
console.log("Value of C++", C++); //10 // Post increment
console.log("Value of C after C++", C)// 11
console.log("Value of ++C", ++C); // 12 // Pre increment
console.log("Value of C after ++C", C); //12
//decrement
let d = 10;
console.log("Value of d ", d);//10
console.log("Value of d--", d--); //10 // Post decrement
console.log("Value of d after d--", d)// 9
console.log("Value of --d", --d); // 8 // pre increment
console.log("Value of d after --d", d); //8
//Exponantial
C = 2; d = 3;
const result = C ** d; // 2 ^ 3 = 8
console.log("Exponantial", result);
//shortcut operator
C = C + d; 
console.log("C+b = ", C); // 5
C += d;
console.log("shortcut", C); // 8

// logical operators

const g = true;
const f = true;
const result1 = g && f;
console.log("result1 :: g && f", result1); // true when both are true
const result2 = g || f;
console.log("result2 :: g || f", result2); // false when both are false
console.log(!g); // Not operator


// = Assignment
//== Equals to
// !== Not equals to
// === Strict equals
// !=== Not strict equals

let j = 5, k = "5"; // values are sae but not the datatypes

console.log("Equals ", j == k); // true because both values are same and this neglates the datatype.
console.log ("Strict Equals ",  j === k); // False because both are different datatypes.
console.log("Not Equals ", j != k); // not equals to

Output

Addition: 15
Value of C  10
Value of C++ 10
Value of C after C++ 11
Value of ++C 12
Value of C after ++C 12
Value of d  10
Value of d-- 10
Value of d after d-- 9
Value of --d 8
Value of d after --d 8
Exponantial 8
C+b =  5
shortcut 8
result1 :: g && f true
result2 :: g || f true
false
Equals  true
Strict Equals  false
Not Equals  false

=== Code Execution Successful ===

If-Else in JS

let candidateage = 75;

if (candidateage >= 18) {
    if (candidateage > 80) {
        console.log("This candidate is very experienced and too old to vote comfortably");
    } 
    else if (candidateage >= 60) {
        console.log("This candidate is a senior citizen");
    } 
    else {
        console.log("This is a young citizen to vote");
    }

    console.log("This candidate can vote :>");
} 
else {
    console.log("This candidate cannot vote.");
}


candidateage = 75; //nested ternary operator

console.log(
    candidateage >= 18
        ? candidateage > 80
            ? "This candidate is very experienced and too old to vote comfortably"
            : candidateage >= 60
                ? "This candidate is a senior citizen"
                : "This is a young citizen to vote"
        : "This candidate cannot vote."
);

Output

This candidate is a senior citizen
This candidate can vote :>
This candidate is a senior citizen

=== Code Execution Successful ===

Switch Case

let candidateage = 75;

switch (true) {
    case (candidateage < 18):
        console.log("This candidate cannot vote.");
        break;

    case (candidateage >= 18 && candidateage < 60):
        console.log("This is a young citizen to vote");
        break;

    case (candidateage >= 60 && candidateage <= 80):
        console.log("This candidate is a senior citizen");
        break;

    case (candidateage > 80):
        console.log("This candidate is very experienced and too old to vote comfortably");
        break;

    default:
        console.log("Invalid age input.");
}

Output

``
This candidate is a senior citizen

=== Code Execution Successful ===
``

Loops in jS

for (let i = 1; i <= 5; i++) {
    console.log("For Loop Count:", i);
}

i = 1;
while (i <= 5) {
    console.log("While Loop Count:", i);
    i++;
}

let j = 1;
do {
    console.log("Do While Loop Count:", j);
    j++;
} while (j <= 5);


for (let k = 1; k <= 5; k++) {
    if (k === 3) {
        continue; // Skip 3
    }
    console.log("Continue Example:", k);
}


for (let m = 1; m <= 5; m++) {
    if (m === 3) {
        break; // Stop loop when m = 3
    }
    console.log("Break Example:", m);
}

Output

For Loop Count: 1
For Loop Count: 2
For Loop Count: 3
For Loop Count: 4
For Loop Count: 5
While Loop Count: 1
While Loop Count: 2
While Loop Count: 3
While Loop Count: 4
While Loop Count: 5
Do While Loop Count: 1
Do While Loop Count: 2
Do While Loop Count: 3
Do While Loop Count: 4
Do While Loop Count: 5
Continue Example: 1
Continue Example: 2
Continue Example: 4
Continue Example: 5
Break Example: 1
Break Example: 2

=== Code Execution Successful ===

*Array *

let StudentArray = ["abc", "xyz", "hjk", 123, true, function dummyfunc() {console.log ("Dummy function");}, {name: "Niladri", age: 26}]; 

console.log(StudentArray[4]);
for(let i=0; i < StudentArray.length; i++)
{
    console.log("StudentArray[",i,"] element is -> ", StudentArray[i]);
}

output

true
StudentArray[ 0 ] element is ->  abc
StudentArray[ 1 ] element is ->  xyz
StudentArray[ 2 ] element is ->  hjk
StudentArray[ 3 ] element is ->  123
StudentArray[ 4 ] element is ->  true
StudentArray[ 5 ] element is ->  [Function: dummyfunc]
StudentArray[ 6 ] element is ->  { name: 'Niladri', age: 26 }

=== Code Execution Successful ===

let array1= [1,2,3,4,5,6];
console.log (array1);

let array2 = array1; // only the reference will be shared.
console.log(array2);

array2[2] = 10; // change the array1 too for the reference
console.log(array2);
console.log(array1);

output

[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 10, 4, 5, 6 ]
[ 1, 2, 10, 4, 5, 6 ]

=== Code Execution Successful ===

console.log(array2.indexOf(10)); // indexOf(element of array) gives the exact index number.

let StudentArray = [
    "abc",
    "xyz",
    "hjk",
    123,
    true,
    function dummyfunc() {
        console.log("Dummy function");
    },
    { name: "Niladri", age: 26 }
];

console.log(StudentArray[4]);  // prints: true

for (let i = 0; i < StudentArray.length; i++) 
{
    console.log("StudentArray[", i, "] element is ->", StudentArray[i] , StudentArray.indexOf(StudentArray[i]));
}

Output

true
StudentArray[ 0 ] element is -> abc 0
StudentArray[ 1 ] element is -> xyz 1
StudentArray[ 2 ] element is -> hjk 2
StudentArray[ 3 ] element is -> 123 3
StudentArray[ 4 ] element is -> true 4
StudentArray[ 5 ] element is -> [Function: dummyfunc] 5
StudentArray[ 6 ] element is -> { name: 'Niladri', age: 26 } 6

Check if the element is in the array or not.
_includes() _-> This function will help to understand that the element is in the array or not.
This will return Boolean values ( True for element present, False for the element not present )

console.log(StudentArray.includes("abc"));

Output
true
Push new element in array

StudentArray.push("Laptop"); // add data to the end of the array
console.log(StudentArray);

Output

[
  'abc',
  'xyz',
  'hjk',
  123,
  true,
  [Function: dummyfunc],
  { name: 'Niladri', age: 26 },
  'Laptop'
]

Now If we want to add a new element at the start of the array then we need unshift()

StudentArray.unshift("Desktop");
console.log(StudentArray);

Output

[
  'Desktop',
  'abc',
  'xyz',
  'hjk',
  123,
  true,
  [Function: dummyfunc],
  { name: 'Niladri', age: 26 }
]

Delete the end object of the array we have pop() function which will delete the last element.

let array = [1,2,3,4,5,6,7,8,9,10];
array.pop(); // Correctly calls pop() on 'array'
console.log(array);

Output

[
  1, 2, 3, 4, 5, 6, 7, 8, 9
]

Delete the first object of the array we have shift() function which will delete the first element.

let array = [1,2,3,4,5,6,7,8,9,10];
array.shift(); // Correctly calls shift() on 'array'
console.log(array);

Output

[
  2, 3, 4,  5, 6, 7, 8, 9, 10
]

Sort the array using sort() function,

let array = [7,8,12,45,12,334,2,678];
array.sort((a, b) => a - b); // Uses a comparison function for numerical sort
console.log(array);

Output

[2, 7, 8, 12, 12, 45, 334, 678]

Function

 //Function Def

function Addition (r , k) // Named function
{
    const result = r + k;
    console.log("Print result::", result);
}

//Function Call
Addition(10,12);

// Anonymous function and the / Function expression

//Anonymous Function Def

let Addition = function  (r , k) // No proper def
{
    const result = r + k;
    console.log("Print result::", result);
    return result;
}

//Anonymous Function Call
console.log(Addition(10,12));

Nested Function

function AddSquare (x,y)
{
    x = Square (x);
    y = Square(y);
    function Square (num)
    {
        return num * num;
    }
    return (x+y);
}

console.log(AddSquare(2,2));

Advanced Function in Js

//Named function
function greet ()
{
    console.log("Hey everyone !!");
}
greet();

// Anonymous function
let c2 = function ()
{
    console.log ("Hello everyone!!");
}
c2();

// Arrow Function 

const c3 = ()=> 
{
    console.log("Hello Hello guys !!");
}
c3();

// Arrow function parameter

const c4 = (count) => 
{
    console.log("Hey there !!",count);
}
c4(2);


// Can write arrow function easily 

const c5 = (count) => count + 1; // automatically return
console.log(c5(5));
console.log(c5(9));

Output
Hey everyone !! Hello everyone!! Hello Hello guys !! Hey there !! 2 6 10

Function return as object

// Function that calculates sum and difference
const calculate = (a, b) => {
    const sum = a + b;
    const difference = a - b;

    // Returns a single object containing both results
    return { 
        total: sum, 
        remainder: difference 
    };
};

// Use object destructuring to unpack the results
const { total, remainder } = calculate(10, 4);

console.log(`Sum is: ${total}`); // Output: Sum is: 14
console.log(`Difference is: ${remainder}`); // Output: Difference is: 6

Output

Sum is: 14
Difference is: 6

=== Code Execution Successful ===

Call Back function

Using arrow method

let calculation = (a, b, operation) => 
{
    return operation (a,b);
}

console.log (calculation (2,3,(n1,n2) =>
{
    return n1 + n2;
}));

Using Anonymous method

let calculation = (a, b, operation) => 
{
    return operation (a,b);
}

console.log (calculation (2,3, function (n1,n2)
{
    return n1 + n2;
}));

Output
Result will be 5 for both.

/**
 * Higher-Order Function: 'calculate'
 * This function accepts two numbers (a, b) and a function (operation), 
 * and executes the 'operation' function using the numbers.
 */
const calculate = (a, b, operation) => {
    return operation(a, b);
}

// --- Method 1: Anonymous Function Callback (Addition) ---
// The function is defined directly inside the 'calculate' call.
const summation = calculate(2, 3, function(n1, n2) {
    return n1 + n2
});

console.log(`Sum (Anonymous Function): ${summation}`); // Output: 5


// --- Method 2: Named Function Callback (Subtraction) ---
// The function is defined separately with a name and then passed by reference.
function sub(a, b) {
    return a - b
}
const subtraction = calculate(2, 3, sub);

console.log(`Difference (Named Function): ${subtraction}`); // Output: -1


// --- Method 3: Arrow Function Callback (Multiplication) ---
// The function is defined using concise arrow function syntax.
const mul = (a, b) => a * b;
const multiplication = calculate(2, 3, mul);

console.log(`Product (Arrow Function): ${multiplication}`); // Output: 6


// --- Alternative: Inline Calculation (Same as Method 1) ---
// The result can also be logged directly without using an intermediate variable.
console.log(`Inline Division: ${calculate(10, 5, (x, y) => x / y)}`); // Output: 2

Array iteration

let arr = [2,3,4,5,6,-7,-8,-9];

arr.forEach((num,index) =>
{
    console.log("Element: ", num , "Index : ", index);
});

Output

Element:  2 Index :  0
Element:  3 Index :  1
Element:  4 Index :  2
Element:  5 Index :  3
Element:  6 Index :  4
Element:  -7 Index :  5
Element:  -8 Index :  6
Element:  -9 Index :  7

=== Code Execution Successful ===

Call Back Hell

/**
 * Asynchronous Callback Chaining (Callback Hell Demo)
 * * This example simulates three sequential asynchronous tasks 
 * using setTimeout to delay execution. Each function takes a 
 * callback that is responsible for starting the next task.
 */

// --- 1. First Task: Get Candies ---
function getCandies(callback1) {
    // Simulate an async operation that takes 3 seconds (3000ms)
    setTimeout(() => {
        const candies = "🍬";
        console.log("In our getCandies method, received:", candies);

        // Pass the result to the next function (callback1)
        callback1(candies);

        // Note: Returning 'candies' here would not work due to setTimeout's asynchronous nature.
    }, 3000);
}

// --- 2. Second Task: Hand Over Keys ---
function handOverKeys(candies, callback2) {
    // Simulate an async operation that takes 3 seconds (3000ms)
    setTimeout(() => {
        const keys = candies + "🔑"; // Append the key to the candies
        console.log("In our handOverKeys method, received:", keys);

        // Pass the cumulative result to the next function (callback2)
        callback2(keys);
    }, 3000);
}

// --- 3. Third Task: Onboarding ---
function onboarding(keys, callback3) {
    // Simulate an async operation that takes 3 seconds (3000ms)
    setTimeout(() => {
        const onboarded = keys + "📋"; // Append the clipboard/onboarded symbol
        console.log("In our onboarding method, received:", onboarded);

        // Pass the final result to the final callback (callback3)
        callback3(onboarded);
    }, 3000);
}


// ------------------------------------------------------------------
// --- Execution: Creating the Callback Chain (The "Pyramid") ---
// ------------------------------------------------------------------

console.log("Start of execution. All tasks will take 3 seconds each.");

getCandies((candies) => {
    // After 3 seconds (Task 1 finishes), this callback runs
    handOverKeys(candies, (keys) => {
        // After 6 seconds (Task 2 finishes), this nested callback runs
        onboarding(keys, (onboarded) => {
            // After 9 seconds (Task 3 finishes), this innermost callback runs
            console.log("-----------------------------------------");
            console.log("✅ Final Result: Welcome to our restaurant! You have the following items:", onboarded);
            console.log("-----------------------------------------");
        })
    })
});

// The next line runs immediately, before any of the asynchronous functions
console.log("Execution queue started. Waiting for results...");

Output

Start of execution. All tasks will take 3 seconds each.
Execution queue started. Waiting for results...
In our getCandies method, received: 🍬
In our handOverKeys method, received: 🍬🔑
In our onboarding method, received: 🍬🔑📋
-----------------------------------------
✅ Final Result: Welcome to our restaurant! You have the following items: 🍬🔑📋
-----------------------------------------

=== Code Execution Successful ===

Promises in Js

/**
 * Asynchronous Promise Chaining (Cleaner Code)
 * * This example refactors the previous sequential tasks to use Promises, 
 * which makes the asynchronous flow linear and much easier to read.
 * * Each function now returns a Promise that resolves when the task is complete.
 */

// --- 1. First Task: Get Candies (Returns a Promise) ---
function getCandies() {
    // Return a Promise that resolves after 3 seconds
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const candies = "🍬";
            console.log("In our getCandies method, received:", candies);
            // On success, resolve the promise with the result
            resolve(candies);
        }, 3000);
    });
}

// --- 2. Second Task: Hand Over Keys (Returns a Promise) ---
function handOverKeys(candies) {
    // Function now takes the result from the previous step as a regular argument
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const keys = candies + "🔑"; 
            console.log("In our handOverKeys method, received:", keys);
            // Resolve the promise with the new cumulative result
            resolve(keys);
        }, 3000);
    });
}

// --- 3. Third Task: Onboarding (Returns a Promise) ---
function onboarding(keys) {
    // Function takes the result from the previous step as a regular argument
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const onboarded = keys + "📋"; 
            console.log("In our onboarding method, received:", onboarded);
            // Resolve the promise with the final result
            resolve(onboarded);
        }, 3000);
    });
}


// ------------------------------------------------------------------
// --- Execution: Creating the Promise Chain (.then() structure) ---
// ------------------------------------------------------------------

console.log("Start of execution. All tasks will take 3 seconds each.");

getCandies()
    // Task 1: getCandies runs. When it resolves, the result (candies) is passed here.
    .then(candies => {
        // Start Task 2 and return its promise to continue the chain
        return handOverKeys(candies);
    })
    // Task 2: handOverKeys runs. When it resolves, the result (keys) is passed here.
    .then(keys => {
        // Start Task 3 and return its promise to continue the chain
        return onboarding(keys);
    })
    // Task 3: onboarding runs. When it resolves, the final result (onboarded) is passed here.
    .then(onboarded => {
        // Final action after all promises have successfully resolved
        console.log("-----------------------------------------");
        console.log("✅ Final Result: Welcome to our restaurant! You have the following items:", onboarded);
        console.log("-----------------------------------------");
    })
    // Single .catch handles any error (rejection) from any step above
    .catch(error => {
        console.error("An error occurred during the process:", error);
    });


// This line still runs immediately, as before.
console.log("Execution queue started. Waiting for results...");

Output

Start of execution. All tasks will take 3 seconds each.
Execution queue started. Waiting for results...
In our getCandies method, received: 🍬
In our handOverKeys method, received: 🍬🔑
In our onboarding method, received: 🍬🔑📋
-----------------------------------------
✅ Final Result: Welcome to our restaurant! You have the following items: 🍬🔑📋
-----------------------------------------

=== Code Execution Successful ===

*Try with Async-Await *

/**
 * Asynchronous Async/Await Chaining (Most Readable Code)
 * * This example uses the ES8 'async/await' keywords to handle the Promise 
 * chain, resulting in code that looks synchronous and is highly readable.
 */

// --- 1. First Task: Get Candies (Returns a Promise) ---
function getCandies() {
    // Return a Promise that resolves after 3 seconds
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const candies = "🍬";
            console.log("In our getCandies method, received:", candies);
            // On success, resolve the promise with the result
            resolve(candies);
        }, 3000);
    });
}

// --- 2. Second Task: Hand Over Keys (Returns a Promise) ---
function handOverKeys(candies) {
    // Function now takes the result from the previous step as a regular argument
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const keys = candies + "🔑"; 
            console.log("In our handOverKeys method, received:", keys);
            // Resolve the promise with the new cumulative result
            resolve(keys);
        }, 3000);
    });
}

// --- 3. Third Task: Onboarding (Returns a Promise) ---
function onboarding(keys) {
    // Function takes the result from the previous step as a regular argument
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const onboarded = keys + "📋"; 
            console.log("In our onboarding method, received:", onboarded);
            // Resolve the promise with the final result
            resolve(onboarded);
        }, 3000);
    });
}


// ------------------------------------------------------------------
// --- Execution: Creating the Async/Await Flow (Synchronous look) ---
// ------------------------------------------------------------------

// We define an async function to use the 'await' keyword inside it.
async function startProcess() {
    console.log("Start of execution. All tasks will take 3 seconds each.");
    console.log("Execution queue started. Waiting for results...");

    try {
        // 1. Wait for getCandies() to resolve (3 seconds)
        const candies = await getCandies(); 

        // 2. Wait for handOverKeys() to resolve (3 seconds)
        const keys = await handOverKeys(candies);

        // 3. Wait for onboarding() to resolve (3 seconds)
        const onboarded = await onboarding(keys);

        // Final action after all steps are complete (Total 9 seconds)
        console.log("-----------------------------------------");
        console.log("✅ Final Result: Welcome to our restaurant! You have the following items:", onboarded);
        console.log("-----------------------------------------");

    } catch (error) {
        // Error handling for any rejected promise in the chain
        console.error("An error occurred during the process:", error);
    }
}

// Call the async function to start the chain
startProcess();

Same output.

DOM MANIPULATION

DOM - Document object model

Selection: The JavaScript uses document.getElementById() to grab references to the button (incrementButton) and the text element (counterDisplay).

State: The counter variable holds the current value, which is the application's state.

Event Listener: The line button.addEventListener('click', () => { ... }); waits for the user to click the button.

Manipulation: Inside the listener, two key manipulations happen:

The state (counter) is updated: counter++.

The visual DOM is updated: display.textContent is changed to show the new value.

This pattern (Select, Listen, Manipulate) is the foundation of all web interactivity! Let me know if you'd like to add more features, like a "Reset" button!

Algorithm Problem 1

Niladri Banerjee — Mon, 13 Oct 2025 16:53:42 +0000

Let's document this solving carefully.

Given:
We need to find the smallest integer 𝑛 such that

That is, when the quadratic algorithm becomes faster than the exponential one.

This is the Brute Force solution.

But then I ask to myself is there any other way to solve this issue?

Then I found the Lambert W function method.

Before solving this issue I have to work on the basics.

Exponential function:

Then domain of this function is all real numbers (R) and the Range of this equation is Positive Real number.
For all Real numbers of n, the value of this equation is always positive.
Domain: (-∞ , ∞)
Range: (0,∞)

Inverse function:

This is a natural log
ln of zero is -∞ and all negative number is undifined.
Domain: (0,∞)
Range: (-∞ , ∞)

Exponential Lambert function:

Domain: (-1,∞)
Range: [ -e^-1 , ∞)

Inverse of Lambert function:

Domain: [ -e^-1 , ∞)
Range: (-1,∞)

This function is interesting There is a dip then the growth at -1.

Solve :

*1: Prerequisites *

*2: Solving *

*3: Solving *

Solving this problem is easy but when you ask the questions after solving from there the real learning will start. Here we use Lambert equation, Newton Method for approximation. This is the beginning of learning.

Day 3: Practicing HTML + CSS by building a website Named "Bella Vista- an Italian Restaurant"

Niladri Banerjee — Sun, 12 Oct 2025 14:45:55 +0000

Website link -> https://bellavistanil.netlify.app/

## Header Section ##

## Code Section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bella vista - Authentic Italian restaurant serving traditional Italian cuisine in the heart of the city."></meta>
    <title>Bella Vista Resturant - Authentic Italian Cuisine</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

*Explain : *

This is the first section of the HTML code where the HTML foundation has been stored.

-> This line tells that the language is used to build this web page is English and will display on the web server accordingly.

-> This is the meta tag which tells that the width of the webpage will adoptable by the width of the device on which that device is handled. initial scale =1.0 helps to zoom in and out properly.

-> This will helps us to find this web page on the search engine (SEO). This relevant keywords will help to map with browsing search. This is the description of the webpage which will align with the browser user who wants to see an Italian restaurant.

## Code Section:

    <header class=""header>
        <div class ="container">
            <nav class="navbar">
                <div class="logo">
                    <h1>Bella Vista</h1>
                    <span class="tagline">Authentic Italian Cuisine</span>
                </div>

                <ul class = "nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>"

    </header>

*Explain : *

In this header part of the design I created a header class in that class I created a div container, to containerized the all navigation items in one div. In that container I have created a navbar class and give one div for logo and just add an unordered list. All list items are hyperlinked so that in website when we press that button we can navigate towards that part.

## Code Section:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*Explain : *
*{} -> for the universal, means it will apply for all the elements.
margin:0 and padding:0 will set clearly because every browser has it's default. This will protect from that. box-sizing: border-box is very useful it includes width and the height in the paddings and the borders.

## Code Section:

body
{
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header
{
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1000;
}

*Explain : *
This is the design where the container design is set and giving z-index higher value is for the more visibility on the top.

## Code Section:

.navbar
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1
{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.logo tagline
{
    font-size: 0.9 rem;
    opacity: 0.8;
}

.nav-links
{
    display:flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a
{
    color: white;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-links a:hover
{
    color: #f39c12;
    background-color: rgba(255, 255, 255, 0.1);
}

*Explain : *

in this section I design the nav bar , nav objects and the hover. When it will be touched by the arrow it will glow for the border-radius: 4px; transition: background-color 0.3s ease; and color: #f39c12; background-color: rgba(255, 255, 255, 0.1);

## Hero Section ##
## Code Section:

Welcome to Bella Vista

Experience the taste of Italy in every bite.

View Menu
Make Reservation

    </section>
</main>

*Explain : *

This will be the html portion where the basic hero section blocks will create. Creating the section name home so that #home will easily navigate here. Then creates a hero-buttons class to give the buttons as needed.

## Code Section:

.hero
{
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("1.jpg") center/cover;
    margin-top: 80px;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:white;
}


.hero content h2
{
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 300;
    letter-spacing: 2px;

}

.hero content p
{
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero buttons
{
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn
{
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary
{
    background-color: #e74c3c;
    color: white;
    border: none;
}
.btn-primary:hover
{
    background-color: #c0392b;
    transform: translate(-2px);
}

.btn-secondary
{
    background-color: transparent;
    color: white;
    border: 2px solid white;
}
.btn-secondary:hover
{
    background-color: white;
    color: #2c3e50;
    transform: translate(2px);
}

*Explain : *
1️⃣ .hero {
height: 100vh; /* full screen height /
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("1.jpg") center/cover;
margin-top: 80px; / space below navbar /
display:flex; / centers content vertically */
align-items: center;
justify-content: center;
text-align: center;
color:white;
}
Purpose: Creates a fullscreen hero section with a dark overlay over the background image.
The display:flex and align-items:center center everything vertically and horizontally.
2️⃣ .hero-content h2 and .hero-content p

These style the main headline and description inside your hero.

.hero-content h2 {
font-size: 3.5rem; /* large heading /
margin-bottom: 1rem;
font-weight: 300;
letter-spacing: 2px; / spacing between letters */
}

.hero-content p {
font-size: 1.2rem; /* smaller than heading /
margin-bottom: 2rem;
max-width: 600px; / limit text width /
margin-left: auto;
margin-right: auto; / center text block */
}

3️⃣ .hero-buttons
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}

Purpose: Aligns both “View Menu” and “Make Reservation” buttons side-by-side with a 1rem gap between them.

4️⃣ .btn, .btn-primary, .btn-secondary

These define the common button design and their color variations.

.btn {
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}

→ Adds spacing, rounded corners, hover transition.

.btn-primary
.btn-primary {
background-color: #e74c3c;
color: white;
border: none;
}
.btn-primary:hover {
background-color: #c0392b;
transform: translate(-2px);
}

→ Red button with a darker red hover effect and a small movement on hover.

.btn-secondary
.btn-secondary {
background-color: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background-color: white;
color: #2c3e50;
transform: translate(2px);
}

→ White-outlined button that fills with white and dark text when hovered.

## Code Section:

        <section id="menu" class="menu">
            <div class="container">
                <h2 class="section-title">Our Menu</h2>
                <p class="section-subtitle">Discover our carefully crafted dishes</p>
            </div>

            <div class="menu-items">
                <div class="menu-item">
                    <h3>Margherita Pizza</h3>
                    <p>Classic pizza with fresh tomatoes, mozzarella, and basil.</p>
                    <span class="price">$12.99</span>
                </div>

                <div class="menu-item">
                    <h3>Spaghetti Carbonara</h3>
                    <p>Traditional pasta with eggs, cheese, pancetta, and pepper.</p>
                    <span class="price">$14.99</span>
                </div>

                <div class="menu-item">
                    <h3>Lasagna</h3>
                    <p>Layers of pasta, meat sauce, and cheese baked to perfection.</p>
                    <span class="price">$15.99</span>
                </div>

                <div class="menu-item">
                    <h3>Tiramisu</h3>
                    <p>Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cheese.</p>
                    <span class="price">$6.99</span>
                </div>
            </div>
        </section>

*Explain : *

I’ve designed the menu section with clear headings and neatly organized items to make it easy to read and visually appealing. However, I realized I missed a few closing tags, like the one for .menu-items, which could cause display or validation issues. I could also improve accessibility by using a <ul> and <li> structure instead of multiple <div>s. To enhance the overall look, I plan to use a CSS grid layout that arranges the menu items evenly, with proper spacing, rounded corners, and soft shadows, so the section looks modern and stays responsive on all devices.

## Code Section:

/* ===== MENU SECTION ===== */
.menu {
    background-color: #faf9f6;
    color: #333;
    padding: 80px 20px;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

/* Title & Subtitle */
.menu .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.menu .section-subtitle {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 50px;
}

/* Menu Grid Layout */
.menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Individual Menu Item */
.menu-item {
    background: #fff;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Hover Effect */
.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Dish Name */
.menu-item h3 {
    font-size: 1.3rem;
    color: #111;
    margin-bottom: 10px;
}

/* Description */
.menu-item p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Price */
.menu-item .price {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #2e8b57;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
}

/* Responsive Adjustment */
@media (max-width: 600px) {
    .menu .section-title {
        font-size: 2rem;
    }

    .menu .section-subtitle {
        font-size: 1rem;
    }
}

*Explain : *

This CSS creates an elegant and clean layout for the menu section. It uses a soft off-white background with dark text for clear readability and centers all content for balance. The menu title and subtitle are styled with modern typography, while the dishes are arranged in a responsive grid that adapts to different screen sizes. Each menu item appears inside a white card with rounded corners, gentle shadows, and a smooth hover effect that lifts the card slightly for a premium feel. The dish name and description are neatly formatted, and the price is highlighted in a soft green badge for visual emphasis.

## Code Section:

        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title">About Us</h2>
                <p class="section-subtitle">Our Story</p>
                <p>Bella Vista was founded in 1995 with a passion for bringing authentic Italian flavors to our community. Our chefs use traditional recipes and the freshest ingredients to create dishes that transport you to Italy with every bite. Join us for a memorable dining experience.</p>
            </div>

            <div class="about-image">
                <img src="1.jpg" alt="Bella Vista Restaurant">
            </div>
        </section>

*Explain : *

This HTML code defines the “About Us” section of a restaurant website. The <section> element with the ID about and class about helps identify and style this part of the page. Inside it, there’s a container <div> that holds the section title (“About Us”), a subtitle (“Our Story”), and a paragraph describing the restaurant’s history, values, and culinary philosophy. The text highlights that Bella Vista was founded in 1995 and focuses on authentic Italian flavors made with fresh ingredients. Below the text, there’s another <div> containing an image (1.jpg) that visually represents the restaurant, making the section both informative and visually engaging.

## Code Section:

/* ===== ABOUT SECTION ===== */
.about {
    background-color: #fdfaf6;
    color: #333;
    padding: 80px 20px;
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* Container for text */
.about .container {
    max-width: 600px;
    text-align: left;
    flex: 1; /* allows text to take up space */
}

/* Section Title */
.about .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Subtitle */
.about .section-subtitle {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 20px;
}

/* Paragraph */
.about .container p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Image on right */
.about-image {
    flex: 1; /* allows image to take up space */
    text-align: center;
}

.about-image img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on image */
.about-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}

/* Responsive layout */
@media (max-width: 900px) {
    .about {
        flex-direction: column;
        text-align: center;
    }

    .about .container {
        max-width: 90%;
    }

    .about-image img {
        width: 90%;
        margin-top: 20px;
    }
}

*Explain : *

This CSS styles the “About Us” section to create a clean, elegant, and responsive layout. The main .about container uses Flexbox to place the text on the left and the image on the right, with spacing (gap: 40px) between them. The text container .container is limited in width for readability, with styled titles, subtitles, and paragraphs that use modern typography and soft colors. The image is styled with rounded corners, subtle shadows, and a hover effect that slightly enlarges it for visual interest. On screens smaller than 900px, the layout becomes vertical, stacking the text above the image, ensuring the section remains fully responsive and visually balanced on all devices.

## Code Section:

        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">Contact Us</h2>
                <p class="section-subtitle">We'd love to hear from you!</p>
                <form class="contact-form">
                    <input type="text" placeholder="Your Name" required>
                    <input type="email" placeholder="Your Email" required>
                    <textarea placeholder="Your Message" required></textarea>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
            </div>
        </section>

*Explain : *

This HTML code defines a “Contact Us” section for a website. The <section> element has the ID contact and class contact, making it easy to target with CSS or links. Inside, there’s a container <div> that holds a section title (“Contact Us”) and a subtitle (“We’d love to hear from you!”) to invite visitors to get in touch. Below the text, there is a <form> with the class contact-form containing three input fields: one for the user’s name, one for their email, and a <textarea> for their message. Each input is marked as required, ensuring the user fills it before submitting. Finally, there’s a submit button labeled “Send Message” with a class btn btn-primary for styling and easy identification. This section provides a structured and user-friendly way for visitors to contact the website owner.

Day 2: Starting of MERN stack journey from the prerequisites (CSS)

Niladri Banerjee — Sat, 11 Oct 2025 14:40:36 +0000

🗓️ Day 2: Starting My MERN Stack Journey – Mastering CSS Basics

Today marks the second step of my MERN Stack journey, where I focused on strengthening my front-end foundation through CSS — the language that brings life and design to web pages.

🌈 What I Learned

Here’s a summary of the core topics I explored today:

Introduction to CSS: Understanding inline, internal, and external stylesheets, and how CSS controls the look and feel of HTML elements.

Positions in CSS: Explored static, relative, absolute, fixed, and sticky positioning.

Box Model & Units: Learned how margin, border, padding, and content interact, and practiced using units like px, em, rem, %, and vh/vw.

Display Property: Difference between block, inline, inline-block, flex, and grid.

Colorbox & Overflow: Styled boxes with background colors, borders, and shadows while managing overflowing content with hidden, scroll, and auto.

Grid Layouts: Created responsive layouts using grid-template-columns, gap, and grid-area.

Grid Portfolio Section: Designed a simple grid-based portfolio section to visualize practical layouts.

Media Queries: Made the site responsive for different screen sizes.

Transitions & Transforms: Added smooth hover effects and rotations.

Keyframe Animations: Experimented with basic CSS animations for interactive elements.

💻 Project Work

I applied all these concepts by creating a live webpage for a mock brand:
👉 https://mernstackloundry.netlify.app/

This website was built from scratch using only HTML and CSS, focusing on layout, responsiveness, and subtle animations.

Day 1: Starting of MERN stack journey from the prerequisites (HTML)

Niladri Banerjee — Fri, 26 Sep 2025 07:06:23 +0000

Day 1: Starting My MERN Stack Journey (Prerequisites – HTML)

Today I officially started my MERN stack journey. I wanted to begin from the very basics, so I started with the prerequisites.

Here’s what I covered on Day 1:

Intro to Networking – I learned how networks actually work and how webpages are loaded when we enter a URL in the browser.
Introduction to HTML – Got to know about the structure of an HTML document and how it forms the backbone of any webpage.
Head Tag – Learned what goes inside the <head> tag, like metadata, title, and links to stylesheets or scripts.
Text Formatting – Explored how to format text using different tags like <b>, <i>, <u>, <strong>, and <em>.
Images in HTML – Practiced embedding images into a webpage using the <img> tag.
Lists in HTML – Worked with ordered lists <ol> and unordered lists <ul>.
Tables in HTML – Learned to create tables using <table>, <tr>, <td>, and <th>.
Links in HTML – Practiced creating hyperlinks with the <a> tag and linking different pages together.
Forms in HTML – Learned about different form elements like <input>, <textarea>, <select>, and how forms collect user input.
Semantic Tags in HTML – Understood the importance of semantic tags like <header>, <footer>, <section>, and <article> for better structure and SEO.
Hosting – Finally, I explored how to host a static site using GitHub Pages and Netlify.

After learning all these concepts, I decided to put them together and build my first complete webpage using only HTML. I also deployed it online so that anyone can view it.

After learning everything I build a webpage based on only HTML to practice all this portions very clearly.
This web page coves all points above.
and deploy on the Github and Netlify.
👉 You can check it out here: [https://niladri98.github.io/MERN-Stack-from-scratch/Assignment_2/]
👉 You can check it out here: [https://niladri98.github.io/MERN-Stack-from-scratch/Assingment_1/]

My Coding Odyssey Begins: From Trainee Software Engineer to Full-Stack & Beyond!

Niladri Banerjee — Thu, 18 Sep 2025 05:38:18 +0000

_*- Introduction: *
_My name is Niladri Banerjee. I completed my Master’s in Computer Science in 2022 from West Bengal, Kolkata, India. Since then, I have worked in multiple roles across different domains, which has helped me develop a diverse professional background. I began my career as a back-office computer operator, then transitioned into academic research. Later, I explored the field of Non-Destructive Testing (NDT), where I gained hands-on experience as an intern and earned certifications in methods such as Ultrasonic Testing and Radiographic Testing. Eventually, I moved into the IT sector as a Software Developer, aligning with my core expertise in computer science. This journey across varied fields has strengthened my adaptability, problem-solving ability, and technical foundation.

*- The Grand Vision: *
I am about to embark on a journey of technical exploration and growth. I will begin with web development, progressing from the basics to advanced concepts. Alongside, I will study Python from beginner to advanced levels, covering automation, scripting, and even game development. To strengthen my foundations, I will revisit core mathematics—linear algebra, calculus, and probability—and also explore emerging fields like cryptocurrency and Web 3.0 development.

Once these foundations are in place, I will step into the world of Machine Learning and Data Science, where the real challenge and growth will begin. My ultimate aspiration is to evolve into a Deep Learning expert.

This journey will serve as both my learning path and my testimony. I will maintain a daily journal documenting what I learn, the projects I build, and the challenges I encounter—so that the world can not only witness my progress but also guide me along the way.

*- Why DEV.to: *
I chose the DEV Community because it is rapidly growing, highly accessible, and offers a strong, well-structured support system for beginners. The platform is thoughtfully designed to encourage learning, sharing, and collaboration. Moreover, its wide connectivity across different platforms makes it a reliable space for me to document my journey, exchange knowledge, and build a strong professional network for the future.

*- Commitment: *
I commit myself fully to this journey of continuous learning and growth. Each day, I will dedicate time to study, practice, and document my progress with honesty and discipline. I will not shy away from challenges, but instead embrace them as opportunities to strengthen my knowledge and skills. My focus will remain on building a strong foundation, contributing to the community, and steadily progressing toward my ultimate goal of becoming a deep learning expert. This journey is not just about personal achievement, but also about sharing, helping, and growing together with others in the field of technology.

- Tags:

webdev #deeplearning #learningjourney