DEV Community: Vigneshwaran V

Understanding Vite, Components, and NPM - React

Vigneshwaran V — Wed, 15 Jul 2026 19:45:39 +0000

Vite

Vite (pronounced "veet") is a French word meaning "fast" or "quickly". In web development, Vite is a modern frontend build tool created by Evan You, the creator of Vue.js. It provides a faster and more efficient development experience by offering instant server startup, fast Hot Module Replacement (HMR), and optimized production builds. Vite is commonly used with frameworks such as React, Vue, Svelte, and others.

Before tools like Vite, developers used Create React App (CRA) to set up React projects. However, CRA can be slower for large applications. Vite solves this problem by offering faster startup times and instant updates during development.

Why Use Vite?

Faster project creation
Instant server startup
Fast Hot Module Replacement (HMR)
Optimized production builds
Easy configuration

Hot Module Replacement (HMR)
Suppose you change

<h1>Hello React</h1>

<h1>Hello Vignesh</h1>

As soon as you save the file, Vite updates the page without a full refresh.

This is called Hot Module Replacement (HMR).

Creating a React Project Using Vite

npm create vite@latest

Select:

Framework: React
Variant: JavaScript

Then run:

cd project-name
npm install
npm run dev

Vite starts a development server and provides a local URL where you can view your React application.

Basic Vite React Project Structure

my-app/
│
├── node_modules/
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── index.html

main.jsx

Entry point of the React application

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

App.jsx
Your main component

function App() {
  return <h1>Hello React</h1>;
}

export default App;

What is NPM?

NPM (Node Package Manager) is the default package manager for Node.js. It helps developers install, manage, update, and share packages (libraries) that are used in JavaScript and React applications.

When creating a React project with Vite, NPM is used to install all the required dependencies and run project scripts.

Why Do We Use NPM?
NPM makes development easier by allowing developers to,

Install third-party libraries and frameworks
Manage project dependencies
Update packages to newer versions
Run project scripts and commands
Share reusable code with the JavaScript community.

Common NPM Commands
Install all project dependencies

npm install

Start the development server

npm run dev

Install a specific package

npm install axios

Create a production build

npm run build

Creates an optimized production build of the application.

What is a Package?

A package is a reusable piece of code published to the NPM registry.

What is the NPM Registry?
The NPM Registry is a large online database that stores millions of JavaScript packages and libraries. It acts as a central repository where developers can publish, share, and download packages for use in their projects.
When you run a command like:

npm install react

NPM connects to the registry, downloads the React package, and installs it into your project.

How It Works

Developer
    ↓
npm install react
    ↓
NPM Registry
    ↓
Downloads React Package
    ↓
Installed in Project

Why is the NPM Registry Important?

Provides access to millions of open-source packages.
Allows developers to reuse existing code instead of building everything from scratch.
Makes package installation and updates simple.
Enables developers to publish their own packages for others to use.

The NPM Registry is an online repository that stores and distributes JavaScript packages, allowing developers to install, share, and manage dependencies in their projects.

Examples

React
Axios
Express
Lodash

You can install them using NPM:

npm install react
npm install axios

package.json
NPM uses a file called package.json to store project information and dependencies.
Example

{
  "name": "react-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}

This file helps NPM know which packages are required for the project.

NPM is an essential tool in modern JavaScript development. It simplifies dependency management, helps run project scripts, and provides access to millions of open-source packages, making application development faster and more efficient.

What is Component

A Component is a reusable and independent piece of UI (User Interface) in a React application. Components allow developers to break a large user interface into smaller, manageable, and reusable parts.

In React, a component is typically a JavaScript function whose name starts with a capital letter and returns JSX to describe the UI that should be rendered.

For example, a website may contain

Navbar
Sidebar
Footer
Product Card
Login Form
Instead of writing all the code in one file, React lets us create each part as a separate component.

Example

function Header() {
    return <h1>Welcome to React</h1>;
}

export default Header;

This Header component can be used anywhere in the application,

function App() {
    return (
        <div>
            <Header />
            <Header />
        </div>
    );
}

Why Do We Use Components?

Reusability – Create once, use multiple times.
Maintainability – Easier to manage and update code.
Readability – Keeps code clean and organized.
Scalability – Helps build large applications efficiently.

Types of Components

1. Functional Components (Most commonly used)

function Welcome() {
    return <h1>Hello React</h1>;
}

2. Class Components (Older approach)

class Welcome extends React.Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

Difference Between Functional Components and Class Components
Both Functional Components and Class Components are used to create UI in React. The main difference is in how they are written and how they manage state and lifecycle features.

A Component is a reusable, independent piece of UI in React that helps build applications by dividing the interface into smaller and manageable parts.

References

https://www.jspanther.com/blog/what-is-vite/
https://blog.stackblitz.com/posts/what-is-vite-introduction/
https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://www.geeksforgeeks.org/reactjs/reactjs-components/

Let's Learn React

Vigneshwaran V — Wed, 15 Jul 2026 18:28:35 +0000

React.js is a free, open-source JavaScript library used for building interactive user interfaces (UIs), primarily for single-page applications. Maintained by Meta and a global developer community, it allows developers to create fast, scalable front-end web applications by managing how data is displayed on the screen.

With React, we create websites using components , which are reusable pieces of UI.

Example
Instead of writing the same HTML multiple times,

<header>My Website</header>
<header>My Website</header>
<header>My Website</header>

In React

function Header() {
    return <header>My Website</header>;
}

Now you can reuse

wherever needed.

Why Do We Need React When We Already Have JavaScript?
JavaScript can build websites, but as applications become larger, managing everything becomes difficult.
Imagine building:

Amazon
Instagram
Netflix
LinkedIn
Using only HTML, CSS, and JavaScript.
here we face some problems with our JS:

1. Too Much DOM Manipulation

In JavaScript

document.getElementById("name").innerText = "Vignesh";

For a large application, you'll write hundreds or thousands of such DOM updates.
React handles DOM updates automatically.

2. Code Becomes Difficult to Maintain

Without React

// Navbar code
// Sidebar code
// Footer code
// Product code
// Cart code

Everything grows into large files.
React divides the UI into small reusable components:

<Navbar />
<Sidebar />
<Product />
<Cart />
<Footer />

This makes code cleaner.

3. Reusability

Without React
You copy and paste UI repeatedly.
Example: ** some applications have the same navbar or sidebar, for that you need to copy that sections or that div to all your pages in your application like(home page, products, cart, orders, wishlist).
**With React

<Navbar />
<Sidebar />

Create once, use anywhere.

Better Performance

React uses a Virtual DOM.

Instead of updating the entire webpage, React updates only the changed part.
This improves performance.
What is Virtual DOM?
React creates a lightweight copy of the real DOM called the Virtual DOM.

Main Features of React

1. Component-Based Architecture
React applications are built using components.

function Navbar() {
    return <h1>Navbar</h1>;
}

Benefits

Reusable
Maintainable
Easy to test

2. JSX
JavaScript XML
It allows us to write HTML-like code inside JavaScript.

function App() {
    return <h1>Hello React</h1>;
}

Without JSX

React.createElement("h1", null, "Hello React");

JSX is easier to read.

3. Virtual DOM
React updates only necessary elements.

Result

Faster rendering
Better performance

4. One-Way Data Flow
Data flows

Parent → Child

Example

<Child name="Vishnu" />

This makes applications easier to understand and debug.

5. State Management
State stores data that can change.

const [count, setCount] = useState(0);

When state changes

setCount(1);

React automatically updates the UI.
No manual DOM manipulation needed.

6. Declarative Programming
In JavaScript

let p = document.getElementById("msg");
p.innerText = "Hello";

In React

<p>{message}</p>

Just update the data

setMessage("Hello");

React updates the UI automatically.

7. Reusable Components
Create once

function Card() {
    return <h2>Product</h2>;
}

Use many times

<Card />
<Card />
<Card />

React is a JavaScript library used to build fast, reusable, and interactive user interfaces using components, JSX, state management, and a Virtual DOM for efficient rendering.

Referneces

https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_intro.asp

Async & Await in JS

Vigneshwaran V — Mon, 13 Jul 2026 09:43:55 +0000

async and await are JavaScript keywords that provide a cleaner, more readable way to handle asynchronous operations without relying on complex Promise chains (.then() and .catch()). They make asynchronous code look and behave more like traditional synchronous code, which simplifies writing and maintaining your applications.
Async
async (Asynchronous): Placed before a function declaration to turn it into an asynchronous function. An async function always returns a Promise. If you return a normal value, JavaScript automatically wraps it inside a resolved Promise.
Await
await (Wait for resolution): Used inside an async function to pause code execution until a Promise resolves or rejects. It allows you to assign the resolved value of a Promise directly to a variable.

We use async/await to make asynchronous code look and behave more like normal synchronous code, making it easier to read and maintain.

We use async/await to execute multiple dependent asynchronous operations in a simple top-to-bottom manner. It allows us to wait for the result of one Promise before using it in the next step, making the code easier to read and manage.

Without async/await (using Promise)

   <script>
        function getUserById(id){
            console.log("Got User id: ",id);

            return new Promise((resolve,rejcet)=>{
                setTimeout(()=>{
                    resolve({id:id, name: 'vicky'});
                },1000)
            })
        }

        function getSubcriptions(id){
            console.log("Got User Subscriptions for: ",id);

            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    resolve([
                        {id:1, title:'netfilx'},
                        {id:2, title:'hotstar'},
                        {id:3, title:'AmazonPrime'}
                    ]);
                },2000)
            })
        }

        function calculateTotal(subcriptions){
            console.log("Subscriptions: ",subcriptions);

            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    resolve(subcriptions.length * 100);
                },3000)
            })
        }

        getUserById(1)
        .then(getSubcriptions)
        .then(calculateTotal)
        .then(cost =>{
            console.log("total Cost: ",cost);
        })
    </script>

Ouput

Got User id:  1
promise.html:22 Got User Subscriptions for:  {id: 1, name: 'vicky'}
promise.html:36 Subscriptions:  (3) [{…}, {…}, {…}]
promise.html:49 total Cost:  300

With async/await (using Promise)

    <script>
        function getUserById(id) {
            console.log("Got User id: ", id);

            return new Promise((resolve, rejcet) => {
                setTimeout(() => {
                    resolve({ id: id, name: 'vicky' });
                }, 1000)
            })
        }

        function getSubcriptions(id) {
            console.log("Got User Subscriptions for: ", id);

            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve([
                        { id: 1, title: 'netfilx' },
                        { id: 2, title: 'hotstar' },
                        { id: 3, title: 'AmazonPrime' }
                    ]);
                }, 2000)
            })
        }

        function calculateTotal(subcriptions) {
            console.log("Subscriptions: ", subcriptions);

            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(subcriptions.length * 100);
                }, 3000)
            })
        }

        async function displayTotalCost() {
            try {
                //call the promise one by one 
                const userInfo = await getUserById(1);
                const subcriptions = await getSubcriptions(userInfo);
                const total = await calculateTotal(subcriptions);

                console.log("total Cost: ", total);
                console.log("Everything is Fetched...");
            } catch (error) {
                console.error("Catch-block: ",error);
            }

        }

        displayTotalCost();
    </script>

Output

Got User id:  1
promise_With_Async.html:24 Got User Subscriptions for:  {id: 1, name: 'vicky'}
promise_With_Async.html:38 Subscriptions:  (3) [{…}, {…}, {…}]
promise_With_Async.html:54 total Cost:  300
promise_With_Async.html:55 Everything is Fetched...

In our example:

Get the user details.
Get that user's subscriptions.
Calculate the total cost using those subscriptions.
Display the result.
Each step depends on the previous step, so await is useful.

Why use async/await here?

1. Better Readability
Without async/await

getUserById(1)
    .then(userInfo => {
        return getSubcriptions(userInfo);
    })
    .then(subscriptions => {
        return calculateTotal(subscriptions);
    })
    .then(total => {
        console.log(total);
    });

With async/await

const userInfo = await getUserById(1);
const subscriptions = await getSubcriptions(userInfo);
const total = await calculateTotal(subscriptions);

2. Handles Dependent Operations Easily
Your operations depend on each other:

User
  ↓
Subscriptions
  ↓
Total Cost

You cannot calculate the total before getting subscriptions.
await naturally enforces this order.

const userInfo = await getUserById(1);
const subscriptions = await getSubcriptions(userInfo);
const total = await calculateTotal(subscriptions);

3. Easier Error Handling
A single try...catch can handle errors from all three Promises.

try {
    const userInfo = await getUserById(1);
    const subscriptions = await getSubcriptions(userInfo);
    const total = await calculateTotal(subscriptions);
} catch(error) {
    console.log(error);
}

Without async/await, you'd usually handle errors with .catch().
4. Code Looks Synchronous
Although each function takes time:

getUserById       -> 1 second
getSubcriptions  -> 2 seconds
calculateTotal   -> 3 seconds

the code looks like:

step1();
step2();
step3();

which is easier for us to understand.

In this example, async/await is used because each operation depends on the result of the previous operation. It makes the asynchronous workflow (Get User → Get Subscriptions → Calculate Total) easier to read, maintain, and handle errors compared to Promise chaining with .then().

References
https://www.geeksforgeeks.org/javascript/async-await-function-in-javascript/
https://www.w3schools.com/js/js_async_await.asp

Promise in Js

Vigneshwaran V — Thu, 09 Jul 2026 07:34:13 +0000

A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation. It acts as a temporary placeholder for a value that is not available yet, allowing you to write asynchronous code that resembles synchronous logic.

Think of it like ordering food online:

Pending → Order placed, waiting for preparation.
Fulfilled → Food delivered successfully.
Rejected → Order failed or canceled.

JavaScript uses Promises to handle tasks that take time, such as:

Fetching data from an API
Reading files
Database operations
Timers (setTimeout)

A Promise is a placeholder for a value that will be available now, later, or never.

Why Do We Use Promises?

JavaScript executes code line by line (single-threaded).
Some operations take time:

Fetching student details from a server
Loading marks
Loading attendance
Loading fee information

Without Promises, we would use nested callbacks, leading to Callback Hell.

Understanding with One Real Example

Imagine a Student Portal.
We need:

Student Profile
Student Marks
Student Attendance
Each request takes time.

Callback Hell

function getProfile(callback) {

    setTimeout(() => {
        console.log("Profile Loaded");
        callback();
    }, 1000);

}

function getMarks(callback) {

    setTimeout(() => {
        console.log("Marks Loaded");
        callback();
    }, 1000);

}

function getAttendance(callback) {

    setTimeout(() => {
        console.log("Attendance Loaded");
        callback();
    }, 1000);

}

getProfile(() => {

    getMarks(() => {

        getAttendance(() => {

            console.log("Student Dashboard Ready");

        });

    });

});

Ouput

Profile Loaded
Marks Loaded
Attendance Loaded
Student Dashboard Ready

Problem:

getProfile
   ↓
getMarks
   ↓
getAttendance
   ↓
Dashboard

As tasks increase, nesting becomes messy.

Promise Version

Convert each operation into a Promise.

function getProfile() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Profile Loaded");
        }, 1000);

    });

}

function getMarks() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Marks Loaded");
        }, 1000);

    });

}

function getAttendance() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Attendance Loaded");
        }, 1000);

    });

}

//Promise Chaining

//Tasks depend on each other.

getProfile()
.then(result =>{
    console.log(result);
    return getMarks();
})
.then(result=>{
    console.log(result);
    return getAttendance();
})
.then(result=>{
    console.log(result);
    console.log("Student Dashboard Ready");
})

Output

Profile Loaded
Marks Loaded
Attendance Loaded
Student Dashboard Ready

Much cleaner than Callback Hell.

see the below example code and how its working in all the static functions of Promise.

function getProfile() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Profile Loaded");
        }, 1000);

    });

}

function getMarks() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Marks Loaded");
        }, 1000);

    });

}

function getAttendance() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Attendance Loaded");
        }, 1000);

    });

}

Promise.all()

Use when ALL tasks must succeed.
Example:
Profile, Marks, and Attendance can load simultaneously.

Promise.all([
    getProfile(),
    getMarks(),
    getAttendance()
])
.then(results => {

    console.log(results);

});

Output:

[ "Profile Loaded", "Marks Loaded", "Attendance Loaded" ]

Rule

All Success → Success
One Failure → Entire Promise Fails

Example:

Promise.all([
    getProfile(),
    Promise.reject("Marks Server Down"),
    getAttendance()
])
.then(result=>{
    console.log(result);
})
.catch(error => {

    console.log(error);

});

Output

Marks Server Down

Promise.allSettled()

Use when you want every result, even failed ones.

Promise.allSettled([
    getProfile(),
    Promise.reject("Marks Server Down"),
    getAttendance()
])
.then(results => {

    console.log(results);

});

Output

[
  { status: "fulfilled", value: "Profile Loaded"},
  { status: "rejected", reason: "Marks Server Down"},
  { status: "fulfilled", value: "Attendance Loaded"}
]

Rule

Success + Failure
      ↓
Return Everything

Useful for dashboards where some widgets can fail.

Promise.race()

Use when you only care about the FIRST response.
Suppose data comes from multiple servers.

const server1 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 1"), 3000)
    );

const server2 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 2"), 1000)
    );

const server3 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 3"), 2000)
    );

Promise.race([
    server1,
    server2,
    server3
])
.then(result => {

    console.log(result);

});

Output

Server 2

Rule

First Settled Wins

Success or failure doesn't matter.

Promise.any()

Use when you need the FIRST SUCCESS.

const server1 =
    Promise.reject("Server 1 Failed");

const server2 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 2 Success"), 2000)
    );

const server3 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 3 Success"), 3000)
    );

Promise.any([
    server1,
    server2,
    server3
])
.then(result => {

    console.log(result);

});

Output

Server 2 Success

Rule

Ignore Failures
Return First Success

Only fails if ALL promises fail.

These are static methods of the Promise object that help you work with multiple promises at the same time.

References

https://www.geeksforgeeks.org/javascript/javascript-promise/
https://www.w3schools.com/js/js_promise.asp
https://www.programiz.com/javascript/promise

Closure in JavaScript

Vigneshwaran V — Wed, 08 Jul 2026 16:22:15 +0000

A closure in JavaScript is the combination of a function bundled together with references to its surrounding state, known as the lexical environment. In simpler terms, a closure allows an inner function to remember and access variables from its outer (parent) function's scope, even after the outer function has completely finished executing.

Every time a function is created in JavaScript, a closure is automatically created alongside it.

Why is Closure Used?

Preserve data between function calls
Create private variables
Avoid polluting the global scope
Implement function factories
Maintain state in asynchronous operations

Example

function bankAccount() {
    let balance = 1000;

    return {
        deposit(amount) {
            balance += amount;
            console.log(`Balance: ${balance}`);
        },

        withdraw(amount) {
            balance -= amount;
            console.log(`Balance: ${balance}`);
        },
        getbalance(){
            console.log("Balance: ",balance);
        }
    };
}

const account = bankAccount();

account.deposit(500);   // Balance: 1500
account.withdraw(200);  // Balance: 1300
console.log(account.balance);  //undefined (it is a private variable)
account.getbalance(); // Balance: 1300

Output

Balance: 1500
Balance: 1300
undefined
Balance: 1300

Advantages of Closures

1. Data Privacy
Variables can be hidden from outside access.

function secret() {
    let password = "1234";

    return function () {
        console.log(password);
    };
}

2. Maintain State
A function can remember previous values.

function createCounter() {
    let count = 0;

    return function () {
        return ++count;
    };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

3. Avoid Global Variables
Without closure:

let count = 0;

With closure:

function counter() {
    let count = 0;
}

Keeps variables local and prevents accidental modification.
4. Function Factories
Closures can generate customized functions.

function multiplyBy(num) {
    return function (value) {
        return value * num;
    };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Here, each returned function remembers its own num.

Closure means a function "remembers" the variables of its parent function even after the parent function has completed execution.

Closures provide

Access to parent scope variables.
Variables remain alive after the parent function ends.
Data privacy (private variables).
State management.
Less use of global variables.
Function factories.
Useful for callbacks, timers, and event handlers.

Lexical Scoping

Closures rely on lexical scoping, which means a function’s scope is determined by where it is defined, not where it is executed.
A function retains access to the scope where it was defined.
Inner functions can access outer function variables.
Enables closures to “remember” their environment.

A closure is a function that remembers and accesses variables from its outer scope even after the outer function has finished executing, enabling data privacy, state preservation, and function customization.

References

https://www.w3schools.com/js/js_function_closures.asp
https://www.geeksforgeeks.org/javascript/closure-in-javascript/

Math Functions in Js

Vigneshwaran V — Tue, 07 Jul 2026 02:45:47 +0000

In JavaScript, mathematical functions are provided as static methods on the built-in Math object. Because it is a static namespace rather than a constructor, you call these functions directly as Math.methodName() without instantiating it.

We use Math only on Number data type and not on BigInt

The Math Object

The JavaScript Math object allows you to perform mathematical tasks.
The Math object is static.
All methods and properties can be used without creating a Math object first.

Math Properties (Constants)

The syntax for any Math property is : Math.property.
JavaScript provides 8 mathematical constants that can be accessed as Math properties:

This example uses math object properties to return their values.

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Output

Math.E: 2.718281828459045

Math.PI: 3.141592653589793

Math.SQRT2: 1.4142135623730951

Math.SQRT1_2: 0.7071067811865476

Math.LN2: 0.6931471805599453

Math.LN10: 2.302585092994046

Math.LOG2E: 1.4426950408889634

Math.Log10E: 0.4342944819032518

Math Constants

Constants are fixed values provided by the Math object.
1. Math.PI
Returns the value of π (Pi).
Definition: The ratio of a circle's circumference to its diameter.

console.log(Math.PI);

Output

3.141592653589793

Example

let radius = 5;
let area = Math.PI * radius * radius;

console.log(area);

Output

78.53981633974483

2. Math.E
Returns Euler's number.
Definition: The base of natural logarithms.

console.log(Math.E);

Output

2.718281828459045

3. Math.SQRT2
Returns the square root of 2.

console.log(Math.SQRT2);

Output

1.4142135623730951

4. Math.SQRT1_2
Returns the square root of 1/2.

console.log(Math.SQRT1_2);

Output

0.7071067811865476

5. Math.LN2
Returns the natural logarithm of 2.

console.log(Math.LN2);

Output

0.6931471805599453

Example
To verify that ln(2) equals Math.LN2:

console.log(Math.log(2));
console.log(Math.LN2);

Output

0.6931471805599453
0.6931471805599453

6. Math.LN10
Returns the natural logarithm of 10.

console.log(Math.LN10);

Output

2.302585092994046

Example

console.log(Math.log(10));
console.log(Math.LN10);

Output

2.302585092994046
2.302585092994046

7. Math.LOG2E
Returns the base-2 logarithm of E.

console.log(Math.LOG2E);

Output

1.4426950408889634

8. Math.LOG10E
Returns the base-10 logarithm of E.

console.log(Math.LOG10E);

Output

0.4342944819032518

Math Methods

The syntax for Math any methods is : Math.method(number)

1. Math.abs()

Returns the absolute (positive) value of a number.

console.log(Math.abs(-25));

Output

2. Math.round()

Rounds a number to the nearest integer.

console.log(Math.round(4.6)); // 5
console.log(Math.round(4.4)); // 4

3. Math.ceil()

Rounds a number upward to the nearest integer.

console.log(Math.ceil(4.1));

Output

4. Math.floor()

Rounds a number downward to the nearest integer.

console.log(Math.floor(4.9));

Output

5. Math.trunc()

Removes the decimal part and returns only the integer portion.

console.log(Math.trunc(4.99));

Output

6. Math.random()

Returns a random number between 0 (inclusive) and 1 (exclusive).

console.log(Math.random());

Output

0.735621

Generate Random Number Between 0 and 9

let num = Math.floor(Math.random() * 10);
console.log(num);

Generate Random number from 1 to 10

let num = Math.floor(Math.random() * 10) + 1;
console.log(num);

7. Math.max()

Returns the largest value from a list of numbers.

console.log(Math.max(10, 20, 30, 40));

Output

8. Math.min()

Returns the smallest value from a list of numbers.

console.log(Math.min(10, 20, 30, 40));

Output

9. Math.pow()

Raises a number to a specified power.

console.log(Math.pow(2, 3));

Output

Modern Alternative

console.log(2 ** 3);

10. Math.sqrt()

Returns the square root of a number.

console.log(Math.sqrt(64));

Output

11. Math.cbrt()

Returns the cube root of a number.

console.log(Math.cbrt(27));

Output

12. Math.sign()

Returns whether a number is positive, negative, or zero.

console.log(Math.sign(20));  // 1
console.log(Math.sign(-20)); // -1
console.log(Math.sign(0));   // 0

13. Math.exp()

Returns e raised to the given power.

console.log(Math.exp(2));

Output

7.38905609893065

Example

console.log(Math.exp(1)); // same as Math.E

14. Math.log()

Returns the natural logarithm (base e).

console.log(Math.log(Math.E));

Output

15. Math.log2()

Returns the base-2 logarithm.

console.log(Math.log2(8));

Output

Because

2 ** 3 = 8

16. Math.log10()

Returns the base-10 logarithm.

console.log(Math.log10(1000));

Output

Because

10 ** 3 = 1000

17. Math.sin()

Returns the sine of an angle (in radians).

console.log(Math.sin(Math.PI / 2));

Output

18. Math.cos()

Returns the cosine of an angle (in radians).

console.log(Math.cos(0));

Output

19. Math.tan()

Returns the tangent of an angle (in radians).

console.log(Math.tan(Math.PI / 4));

Output

20. Math.hypot()

Returns the square root of the sum of squares of its arguments.
Returns the hypotenuse length using the Pythagorean theorem.

console.log(Math.hypot(3, 4));

Output

Example

let width = 6;
let height = 8;

console.log(Math.hypot(width, height));

Output

These are all some most frequently used methods:

Math.random();       //Generate random values
Math.floor();        //Round down
Math.ceil();         //Round up
Math.round();        //Nearest integer
Math.max();          //Find largest value
Math.min();          //Find smallest value
Math.abs();          //Get positive value
Math.sqrt();         //Square root
Math.pow();          //Exponents
Math.trunc();        //Remove decimals

These are the methods you'll use most often in real-world JavaScript projects.

Reference
https://www.w3schools.com/jS/js_math.asp
https://www.geeksforgeeks.org/javascript/javascript-math-object/
https://www.programiz.com/javascript/library/math

JavaScript DOM CRUD Operations: Creating, Updating, and Removing Elements & Attributes

Vigneshwaran V — Fri, 03 Jul 2026 10:11:05 +0000

Introduction to DOM Manipulation

The Document Object Model (DOM) is a programming interface provided by the browser that represents an HTML document as a tree-like structure. Every HTML element, attribute, and piece of text becomes an object that JavaScript can access and manipulate.
Using DOM manipulation, We can:

Access HTML elements
Create new elements
Update existing content
Add or remove attributes
Delete elements dynamically
Build interactive web applications
For example, when you click a button and the webpage updates without refreshing, JavaScript is usually manipulating the DOM behind the scenes.

1. Accessing Elements

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

These are the main DOM element selection (accessing) methods in JavaScript.
For accessing Element using DOM please refer the below link.
https://dev.to/vigneshwaran_v/javascript-html-dom-api-1d58
Before modifying an element, we must first access it from the DOM.

2. Creating Elements

Creating elements means generating new HTML elements dynamically using JavaScript.

createElement()

Creates a new HTML element.
Syntax

document.createElement("tagName");

Example

const heading = document.createElement("h1");

heading.innerText = "Welcome to My Website";

console.log(heading);

Output

<h1>Welcome to My Website</h1>

Note: The element is created in memory and will not appear on the page until it is added to the DOM.

3. Adding Elements

After creating an element, it must be inserted into the webpage.

append()

Adds content at the end of a parent element.
Example

const container = document.getElementById("container");

const p = document.createElement("p");
p.innerText = "New Paragraph";

container.append(p);

Paragraph is added as the last child of that Container.

appendChild()

Adds a single node as the last child of a parent element.
Example

const list = document.getElementById("list");

const li = document.createElement("li");
li.innerText = "Apple";

list.appendChild(li);

Adds the list item at the end.

prepend()

Adds content at the beginning of a parent element.
Example

const container = document.getElementById("container");

const h1 = document.createElement("h1");
h1.innerText = "Welcome";

container.prepend(h1);

Heading appears before all existing children.

before()

Inserts an element before another element.
Example

const para = document.getElementById("para");

const heading = document.createElement("h2");
heading.innerText = "Article Title";

para.before(heading);

Heading appears before the paragraph.

after()

Inserts an element after another element.
Example

const para = document.getElementById("para");

const button = document.createElement("button");
button.innerText = "Read More";

para.after(button);

Button appears after the paragraph.

insertBefore()

Inserts a new element before a specified child element.
Example

const ul = document.getElementById("list");

const newItem = document.createElement("li");
newItem.innerText = "Mango";

const firstItem = ul.children[0];

ul.insertBefore(newItem, firstItem);

Mango becomes the first list item.

Use appendChild() when adding one element node.
Use append() when you want to add multiple elements or text in a single statement.
append() Adding multiple Element

<div id="container"></div>

const container = document.getElementById("container");

const h1 = document.createElement("h1");
h1.innerText = "Title";

const p = document.createElement("p");
p.innerText = "Paragraph";

container.append(h1, p);

Output

<div id="container">
    <h1>Title</h1>
    <p>Paragraph</p>
</div>

You cannot do this with appendChild().

4. Updating Elements

Updating elements means changing the content of existing HTML elements.

innerText

Returns or updates only the visible text.
Example

<p id="text">Hello World</p>

<script>
document.getElementById("text").innerText = "Welcome";
</script>

Output

Welcome

textContent

Returns or updates all text content, including hidden text.
Example

<p id="text">Hello World</p>

<script>
document.getElementById("text").textContent = "JavaScript DOM";
</script>

Output

JavaScript DOM

innerHTML

Returns or updates HTML content inside an element.
Example

<div id="box"></div>

<script>
document.getElementById("box").innerHTML =
"<h2>Welcome</h2><p>This is a paragraph.</p>";
</script>

Output

Welcome
This is a paragraph.

Note: innerHTML can add HTML tags, while innerText and textContent add only plain text.

5. Working with Attributes

Attributes provide additional information about HTML elements.

setAttribute()

Adds or updates an attribute.
Example

const image = document.getElementById("photo");

image.setAttribute("src", "image.jpg");

Output

<img src="image.jpg">

getAttribute()

Gets the value of an attribute.
Example

const image = document.getElementById("photo");

console.log(image.getAttribute("src"));

Output

image.jpg

removeAttribute()

Removes an attribute.
Example

const image = document.getElementById("photo");

image.removeAttribute("src");

Output

<img>

hasAttribute()

Checks whether an attribute exists.
Example

const image = document.getElementById("photo");

console.log(image.hasAttribute("src"));

Output

true

setAttribute() does not append values to an existing attribute. It sets the attribute to the exact value you provide.

Syntax

element.setAttribute(attributeName, value);

With id

Example

<p id="para">Hello</p>

const p = document.getElementById("para");

p.setAttribute("id", "message");

Output

<p id="message">Hello</p>

The old id="para" is replaced by id="message".

Since an element should have only one ID, the previous ID is overwritten.

With class

Example

<p class="text">Hello</p>

const p = document.querySelector("p");

p.setAttribute("class", "heading");

Output

<p class="heading">Hello</p>

The old class text is removed and replaced with heading.

Multiple Classes

Suppose you have:

<p class="text">Hello</p>

p.setAttribute("class", "text active");

Ouput

<p class="text active">Hello</p>

Now the element has two classes:

text
active
But notice that you're still replacing the entire class attribute value with "text active".

If You Want to Add a Class Without Removing Existing Ones
**Use classList.add()**
Example

<p class="text">Hello</p>

p.classList.add("active");

Output

<p class="text active">Hello</p>

Here the existing class text remains, and active is added.

setAttribute() replaces the entire attribute value. It does not merge or append automatically. For classes, classList is usually the better choice when you want to add or remove classes dynamically.

We can do the same things simply without using these functions.
Changing an ID

<p id="para">Hello</p>

const p = document.getElementById("para");

p.id = "message";

Output

<p id="message">Hello</p>

Removing an ID

p.id = "";

Output

<p>Hello</p>

Changing a Class

<p class="text">Hello</p>

p.className = "heading";

Output

<p class="heading">Hello</p>

Adding Multiple Classes

p.className = "text active";

Output

<p class="text active">Hello</p>

Removing All Classes

p.className = "";

Output

<p>Hello</p>

For common attributes (id, class, src, href, value), developers usually use the property approach because it's shorter and easier to read. setAttribute() and removeAttribute() are more useful when working with custom attributes.

6. Removing Elements

Removing elements means deleting HTML elements from the DOM.

remove()

Removes an element from the webpage.
Example

<p id="message">This message will be removed.</p>

<script>
const msg = document.getElementById("message");

msg.remove();
</script>

The paragraph is completely removed from the webpage.

DOM CRUD Operations Summary

CRUD stands for Create, Read, Update, and Delete.

Example CRUD Flow

// Create
const p = document.createElement("p");

// Update
p.innerText = "Hello DOM";

// Add to page
document.body.appendChild(p);

// Delete
p.remove();

DOM Manipulation is one of the most important concepts in JavaScript because it allows developers to interact with and modify web pages dynamically. By learning how to access, create, add, update, and remove elements, you can build interactive applications such as to-do lists, calculators, form validators, and many other modern web projects. Mastering these DOM methods is a strong foundation for learning advanced JavaScript frameworks and front-end development.

References

https://www.freecodecamp.org/news/the-javascript-dom-manipulation-handbook
https://www.w3schools.com/js/js_htmldom_html.asp
https://www.w3schools.com/jsref/met_node_appendchild.asp

JavaScript HTML DOM API

Vigneshwaran V — Fri, 03 Jul 2026 08:17:48 +0000

What is API?

An API (Application Programming Interface) is a set of rules that allows two software programs to communicate with each other.
Think of it like a waiter in a restaurant:

You (the user) place an order.
The waiter (API) takes your order to the kitchen.
The kitchen (server/application) prepares the food.
The waiter (API) brings the food back to you.
You don't need to know how the kitchen works—you just use the waiter to get what you need.
Real-world example
Suppose you use a weather app:
You open the app and search for "New York."
The app sends an API request to a weather service.
The weather service processes the request and sends back the current temperature and forecast.
The app displays the information.

Simply, an API is a messenger that enables different software systems to communicate and exchange information.

What is HTML DOM API?

The HTML DOM API is a collection of methods, properties, and objects provided by the browser that allows JavaScript to interact with and manipulate an HTML document.

What is DOM?

DOM (Document Object Model) is a tree-like representation of an HTML page.
For Example

<body>
    <h1 id="title">Hello</h1>
    <button>Click Me</button>
</body>

The browser converts it into a DOM tree:

Document
  |
  └── html
       |
       └── body
            |
            ├── h1
            |    └── "Hello"
            |
            └── button
                 └── "Click Me"

What is the DOM API?

The browser provides JavaScript with APIs to access and modify this DOM tree.
Examples:
1. Finding an element

const heading = document.getElementById("title");

Here:

document is a DOM object.
getElementById() is a DOM API method.
2. Changing text

heading.innerText = "Welcome";

Output

<h1 id="title">Welcome</h1>

Why is it called an API?
Because the browser exposes a set of functions and properties that JavaScript can use.

We use:

document.getElementById(); // DOM API

DOM = the browser's representation of the HTML document.
DOM API = the methods and properties the browser provides to access and modify that DOM using JavaScript.

That's why methods like getElementById(), querySelector(), createElement(), and properties like innerText, src, and style are all considered part of the HTML DOM API.

good way to think about it.

The communication is actually:

JavaScript
     │
     ▼
DOM API (provided by browser)
     │
     ▼
DOM Tree (HTML document)
     │
     ▼
Browser updates the webpage

For example:

<h1 id="title">Hello</h1>

When JavaScript runs:

document.getElementById("title").innerText = "Welcome";

Here's what happens:

JavaScript calls the DOM API method getElementById().
The browser's DOM API searches the DOM tree for the element whose id is "title".
It returns a reference of that < h1 > element to the JavaScript.
JavaScript changes its innerText property.
The browser updates the page and displays:

<h1 id="title">Welcome</h1>

So yes, JavaScript does not directly communicate with HTML source code. Instead:

HTML → converted into a DOM tree by the browser.
Browser exposes the DOM API.
JavaScript uses the DOM API.
DOM API manipulates the DOM tree.
Browser reflects those changes on the webpage.
That's why methods like:

document.getElementById()
document.querySelector()
document.createElement()
element.remove()
element.setAttribute()

are called DOM APIs—they are functions provided by the browser for JavaScript to work with HTML documents.

The browser provides the DOM API to JavaScript. JavaScript uses this API to access and modify the DOM representation of the HTML document, which changes the structure, content, or properties of HTML elements on the webpage.

There are several ways to access HTML elements using the DOM API.

1. getElementById()
Accesses an element by its id.

<h1 id="title">Hello</h1>

const element = document.getElementById("title");

Returns a single element.

2. getElementsByClassName()
Accesses elements by their class name.

<p class="text">One</p>
<p class="text">Two</p>

const elements = document.getElementsByClassName("text");

Returns an HTMLCollection (similar to an array).

console.log(elements[0]); // Access the first paragraph
console.log(elements[1]); // Access the second paragraph

3. getElementsByTagName()
Accesses elements by tag name.

<p>Hello</p>
<p>World</p>

const paragraphs = document.getElementsByTagName("p");

console.log(paragraphs[0]); // First paragraph
console.log(paragraphs[1]); // Second paragraph

Returns an HTMLCollection.

HTMLCollection

4. querySelector()
Accesses the first element that matches a CSS selector.

<p class="text">One</p>
<p class="text">Two</p>

const element = document.querySelector(".text");

Returns only the first matching element.
You can use:

document.querySelector("#title"); // id
document.querySelector(".text");  // class
document.querySelector("p");      // tag

5. querySelectorAll()
Accesses all elements matching a CSS selector.

<p class="text">First</p>
<p class="text">Second</p>
<p class="text">Third</p>

const elements = document.querySelectorAll(".text");

Returns a NodeList.

NodeList(3) [p.text, p.text, p.text]

You can expand it:

NodeList(3)
  0: <p class="text">First</p>
  1: <p class="text">Second</p>
  2: <p class="text">Third</p>

Accessing elements
Just like an array:

console.log(elements[0]); // First <p>
console.log(elements[1]); // Second <p>
console.log(elements[2]); // Third <p>

elements.forEach(element => {
    console.log(element);
});

Checking the type

const elements = document.querySelectorAll(".text");

console.log(elements);
console.log(elements.length);

Output:

NodeList(3)
3

6. document.getElementsByName()
getElementsByName() is a DOM API method that selects all HTML elements that have a specified name attribute and returns them as a collection.

<input type="text" name="username">
<input type="text" name="username">

const inputs = document.getElementsByName("username");

console.log(inputs);

Output

NodeList(2)

console.log(inputs[0]); // First input
console.log(inputs[1]); // Second input

Which one is most used?

Nowadays developers mostly use:

document.querySelector();
document.querySelectorAll();

because they work with CSS selectors, making them very flexible.
Examples:

document.querySelector("#title");
document.querySelector(".btn");
document.querySelector("div p");
document.querySelectorAll(".card");

References

https://www.w3schools.com/js/js_htmldom_methods.asp
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

SDLC

Vigneshwaran V — Tue, 30 Jun 2026 19:23:13 +0000

SDLC?

The Software Development Life Cycle (SDLC) is a structured, step-by-step process used by engineering teams to plan, build, test, and deploy high-quality software. Its primary goal is to minimize risks, control costs, and ensure the final product meets customer and business requirements.

It helps teams deliver high-quality software on time, within budget, and according to user requirements.

Why is SDLC important?

Software development can be challenging to manage due to changing requirements, technology upgrades, and cross-functional collaboration. The software development lifecycle (SDLC) methodology provides a systematic management framework with specific deliverables at every stage of the software development process. As a result, all stakeholders agree on software development goals and requirements upfront and also have a plan to achieve those goals.

Here are some benefits of SDLC:

Increased visibility of the development process for all stakeholders involved
Efficient estimation, planning, and scheduling
Improved risk management and cost estimation
Systematic software delivery and better customer satisfaction

How does SDLC work?

The software development lifecycle (SDLC) outlines several tasks required to build a software application. The development process goes through several stages as developers add new features and fix bugs in the software.

The details of the SDLC process vary for different teams. However, we outline some common SDLC phases below.

SDLC Phases with Examples

1. Requirements Gathering

What?
Requirements Gathering is the process of understanding the needs of the customer or client and identifying what they want the software to accomplish. The requirements provided by the client are collected, analyzed, and documented so that the development team can build the software according to their expectations.

Why?
This phase is important because it ensures that the development team builds the right product according to the customer's needs. Proper requirements gathering helps avoid misunderstandings, reduces the chances of rework, minimizes project risks, and provides a clear foundation for all subsequent phases of the SDLC.

Who?

Client/Customer
Business Analyst (BA)
Product Owner

How?

Meetings
Discussions
Requirement Documents

Example

A restaurant company wants a food delivery application.

They provide requirements such as:

Users can register and login.
Users can search restaurants.
Users can add food to cart.
Users can pay online.
Users can track orders.

Outcome

Software Requirement Specification (SRS) Document
Clearly Defined Project Requirements

2. Planning

What?
Planning is the phase where the project team creates a detailed roadmap for developing the software. Based on the gathered requirements, the team determines the project scope, timeline, budget, resources, technologies, and overall strategy needed to successfully complete the project.
Why?
This phase helps ensure that the project is completed efficiently within the allocated time and budget. It allows the team to estimate costs, allocate resources, identify potential risks, define project milestones, and establish a clear execution plan before development begins.
Who?

Project Manager
Team Leads
Business Analyst
How?
Create project schedule
Estimate budget
Allocate resources
Assign team members
Define milestones
Identify risks
Select technologies

Example

For the food delivery application:
The Project Manager plans:

Project Duration: 6 Months

- Team:

2 Frontend Developers
2 Backend Developers
2 Testers
1 UI/UX Designer
Budget: ₹10 Lakhs
Technology Stack:
React (Frontend)
Node.js (Backend)
MySQL (Database)
Potential Risks:
Requirement changes
Delays in development
Budget overruns
Outcome
Project Plan
Resource Allocation Plan
Budget Estimation
Risk Management Plan
Project Schedule and Timeline

3. Design

Design is the phase where the requirements are transformed into a technical blueprint that guides developers during implementation. It defines how the system will function, how different components will interact, how the database will be structured, and how users will interact with the application.
Why?
The design phase provides a clear structure for the software before coding begins. It helps developers understand the architecture, reduces development errors, improves maintainability, and ensures that the final product meets both functional and technical requirements.
Who?

Software Architect
System Designer
UI/UX Designer
Database Designer
How?
Create system architecture
Design user interfaces
Design database schema
Design APIs
Create technical specifications

Example

For the food delivery application:
UI Screens:

Login Page
Home Page
Restaurant Listing Page
Cart Page
Payment Page

Database Tables:

Users
Restaurants
Orders
Payments Architecture:

Mobile/Web App
        ↓
Backend API
        ↓
Database

Outcome

High-Level Design (HLD)
Low-Level Design (LLD)
UI Mockups/Wireframes
Database Design Documents
API Design Documents

4. Development (Coding)

Development is the phase where developers write the actual source code based on the design documents. The application's features and functionalities are implemented using programming languages, frameworks, and tools.
Why?
This phase converts the software design into a working application. It is where the actual product is built and all business requirements are implemented.
Who?

Frontend Developers
Backend Developers
Full-Stack Developers How?
Write source code
Develop frontend components
Develop backend services
Integrate APIs
Connect database
Perform code reviews

Example

Frontend Development:

Login Form
Restaurant Listing
Cart Interface
Backend Development:
User Authentication
Order Management
Payment Processing
Outcome
Working Software Modules
Source Code
Integrated Application Components

5. Testing

Testing is the process of verifying and validating the software to ensure that it functions correctly and meets the specified requirements. Testers identify defects, bugs, and performance issues before the software is released.
Why?
Testing ensures software quality, reliability, security, and performance. It helps prevent defects from reaching end users and ensures that the application works as expected.
Who?

QA Engineers
Test Engineers
Automation Testers
Developers (Unit Testing) How?
Unit Testing
Integration Testing
System Testing
Performance Testing
User Acceptance Testing (UAT)

Example

Testing the food delivery application:

Test Cases:

User Registration
User Login
Add to Cart
Online Payment
Order Tracking

Bug Found:

Payment fails for transactions above ₹5000.

Developers fix the issue and retest it.

Outcome

Tested Software
Bug Reports
Test Cases
Test Summary Reports

6. Deployment

Deployment is the process of releasing the tested software into the production environment where real users can access and use it.
Why?
The software must be deployed so that customers can start using the application and gain value from it.
Who?

DevOps Engineers
System Administrators
Deployment Team
How?
Configure servers
Deploy application files
Configure cloud services

Example

The food delivery application is deployed to:

Production Server
Google Play Store
Apple App Store

Users can now:

Download the application
Place food orders
Make online payments Outcome
Live Production Application
Available to End Users
Deployment Documentation

7. Maintenance

Maintenance is the phase where the software is continuously monitored, supported, improved, and updated after deployment. Bugs are fixed and new features are added based on user feedback and business requirements.
Why?
No software remains perfect forever. Maintenance ensures that the application continues to function efficiently, remains secure, adapts to changing business needs, and provides a good user experience.
Who?

Support Team
Developers
Maintenance Engineers
DevOps Engineers How?
Monitor application performance
Fix bugs
Release updates
Improve security
Add new features
Optimize performance

Example

Users request:

Dark Mode
Coupon System
Faster Restaurant Search Issues Found:
App crashes on some Android devices.
Search results are slow. The team releases updates and fixes. Outcome
Bug Fixes
Feature Enhancements
Security Updates
Improved User Experience
Updated Software Versions

Complete SDLC Flow

Requirements Gathering
        ↓
Planning
        ↓
Design
        ↓
Development
        ↓
Testing
        ↓
Deployment
        ↓
Maintenance

Project: Food Delivery Application

Requirements => Gather customer needs.
Planning => Estimate budget, timeline, and resources.
Design => Create UI, architecture, and database design.
Development => Build the application.
Testing => Verify functionality and fix bugs.
Deployment => Release to users.
Maintenance => Fix issues and add new features.

SDLC is not just writing the code and produce the output, it contains these much of process is divided into 7 phases and from client requirement to deployment to maintenance, here we also consider both technical and non technical factors liked include budget planing and time scheduling and also resource allocation to complete one whole software development

Reference

https://aws.amazon.com/what-is/sdlc/
https://www.ibm.com/think/topics/sdlc
https://www.geeksforgeeks.org/software-engineering/software-development-life-cycle-sdlc/

Mini Projects Using DOM Js - 1

Vigneshwaran V — Tue, 30 Jun 2026 04:16:49 +0000

JavaScript Mini projects today I have done some mini-projects using DOM in javascript.

1. Change the Text

the first mini project is changing the text of the webpage with the help of DOM, here I use the DOM to access the Element by GetElementById() method to change the text by innerText property.

Code

<body>
    <h1 id="names">Kamalesh😎</h1>
    <p>click the below button to change the text</p>
    <button onclick="changeName()">Change</button>
    <script>
        let name=document.getElementById("names");
        function changeName(){
            if(name.innerText=="Kamalesh😎"){
                name.innerText="Vignesh😇";
            }
            else{
                name.innerText="Kamalesh😎";
            }
        }
    </script>
</body>

Output

Click the Link to see the Output

https://vcode-cefc5c.gitlab.io/js/textchange.html

2. Light On/Off Toggle

In this mini project also I use the same DOM to access and modify the element but here I change the Attribute of the Element, I changed the source of the image with the help of src property here I change the image.
Code

<body>
    <img id="bulb" src="bulb_off.jpg" alt="img not found">
    <button id="btn" onclick="on()">ON</button>

    <script>
        let bulb=document.getElementById("bulb");
        let btn=document.getElementById("btn");
        function on() {
            if(btn.innerText=="ON"){
                bulb.src="bulb_on.jpg";
                btn.innerText="OFF";
                btn.style.backgroundColor="firebrick";
                btn.style.border="2px solid rgb(98, 18, 18)";
            }
            else{
                bulb.src="bulb_off.jpg";
                btn.innerText="ON";
                btn.style.backgroundColor="rgb(94, 178, 34)";
                btn.style.border="2px solid rgb(31, 98, 18)";
            }
        }

    </script>
</body>

Output

Click the Link to see the Output

https://vcode-cefc5c.gitlab.io/js/light.html

3. CounterApp

This the CounterApp is used to count anything with the Help of three buttons are increment, decrement, and reset but here I write three function for all the three buttons and its triggered when user click the button for that I write Onclick event handler that triggered when user click the buttons. here all the three function shares the single value is known as counter value.

Code

<body>
    <div id="container">
        <h1>Counter-App</h1>
        <div id="core">
            <button id="sub" onclick="sub()">-</button>
            <span id="counter">0</span>
            <button id="add" onclick="add()">+</button>
        </div>
        <button id="reset" onclick="reset()">Reset</button>
    </div>
    <script>
        let counts = document.getElementById("counter");
        let count = counts.innerText;
        function add() {
            count++;
            counts.innerText = count;
        }
        function sub() {
            if (count > 0) {
                count--;
                counts.innerText = count;
            }
        }
        function reset() {
            count = 0;
            counts.innerText = count;
        }
    </script>
</body>

Output

Click the Link to see the Output

https://vcode-cefc5c.gitlab.io/js/counterApp.html

4. Character Count

This is mini project is a Character counter which count how many Character you write in the input field or in the textarea then it shows the count as a output. for this I use one textarea and another one div to shows the output, is done with the help of
input.value.replace(/\s/g,"").length ** **.value return the value inside the element which we target .replce is a String method in js is used to replace a part of string with another value.
Code

<body>
    <div>
        <h1>Live Character Counter</h1>
        <textarea id="inpt" oninput="valueCount()"></textarea>
        <div id="oupt">Characters: <span id="counter">0</span></div>
    </div>

    <script>
        let input=document.getElementById("inpt");
        let counter=document.getElementById("counter");
        function valueCount(){
            let count=input.value.replace(/\s/g,"").length;
            counter.textContent=count;
        }
    </script>
</body>

Output

Click the Link to see the Output

https://vcode-cefc5c.gitlab.io/js/characterCount.html

5. Show/Hide Password

Here I create a password hide and show feature using Js DOM with the help of getElementById() to access and modify the elements Attribute from text to password, and password to text and also I use function and Onclick event to handle that button click by these way I create it.

Code

<body>
    <div id="container">
        <h1>Show and Hide Password</h1>
        <input type="password" id="txtbox" placeholder="Enter password">
        <button id="btn" onclick="show()">Show</button>
    </div>

    <script>
        let txt = document.getElementById("txtbox");
        let btn = document.getElementById("btn");
        function show() {
            if (btn.textContent == "Show") {
                txt.type = "text";
                btn.textContent = "Hide";
            }
            else {
                txt.type = "password";
                btn.textContent = "Show";
            }
        }
    </script>
</body>

Output

Click the Link to see the Output

https://vcode-cefc5c.gitlab.io/js/hidePassword.html

Concepts Used

DOM (Document Object Model)
getElementById()
innerText and textContent
value property
src and type attributes
Functions
Variables
Conditional statements (if...else)
Event handling (onclick, oninput)
String methods (replace())
Regular Expressions (/\s/g)
DOM element styling with JavaScript

What I Learned

By building these mini projects, I gained hands-on experience in selecting elements, updating content, modifying attributes, handling user interactions, and responding to events in real time. These projects strengthened my understanding of how JavaScript works with the DOM and gave me more confidence in creating interactive web applications.

Conclusion

These mini projects may look simple, but they helped me understand how JavaScript interacts with HTML through the DOM. While building them, I learned how to access elements, modify content and attributes, handle events, and create dynamic user experiences without reloading the page.

Every project taught me something new and improved my confidence in JavaScript. I'm excited to continue building more projects, exploring new concepts, and sharing my learning journey with you all.

Thank you for reading my blog! 😊

JavaScript DOM

Vigneshwaran V — Sun, 28 Jun 2026 13:17:46 +0000

The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to access and manipulate web page content, structure, and styles dynamically.

DOM stands for Document Object Model.
It represents an HTML document as a tree of objects (nodes).
The browser automatically creates the DOM when a web page loads.
JavaScript uses the DOM to access and manipulate HTML elements.
The DOM represents every HTML element as an object. These objects contain properties, methods, and attributes (stored as name-value pairs), allowing JavaScript to access and manipulate the web page dynamically.
The DOM allows JavaScript to change content, attributes, styles, and structure of a web page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello Vicky</h1>
    <p>Welcome to DOM</p>
    <button>Click Me</button>
</body>
</html>

The browser converts it into a DOM Tree like this:

Document
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │       │
    │       └── "My Page"
    │
    └── body
        │
        ├── h1
        │   │
        │   └── "Hello Vicky"
        │
        ├── p
        │   │
        │   └── "Welcome to DOM"
        │
        └── button
            │
            └── "Click Me"

Understanding the relationships

body
├── h1
├── p
└── button

Here body is the parent node.
h1, p, and button are child nodes of body.
h1, p, and button are siblings of each other.

A DOM Tree is a hierarchical structure where each HTML element is a node connected through parent-child and sibling relationships, allowing JavaScript to navigate and manipulate the page.

We use the DOM (Document Object Model) because it allows JavaScript to interact with and modify a web page after it has loaded.

Without the DOM, HTML would just be a static document.

Example for DOM

This the Example code shows how the Dom will Actually access and modify the HTML elements.

<!DOCTYPE html>
<html>
<body>

    <h1 id="heading">Welcome</h1>

    <button onclick="changeText()">
        Change Text
    </button>

    <script>
        function changeText() {
            document.getElementById("heading").textContent = "Welcome Vicky";
        }
    </script>

</body>
</html>

Modify the Text

document.getElementById("heading").textContent = "Welcome Vicky";

textContent is a property of the DOM element.
Assigning a new value updates the text inside the element.

Before:

<h1 id="heading">Welcome</h1>

After button click:

<h1 id="heading">Welcome Vicky</h1>

Why do we use the DOM?

The DOM allows JavaScript to access and manipulate HTML elements dynamically. For example, we can select an element using getElementById() and change its content using the textContent property without reloading the page.

Example

document.getElementById("heading").textContent = "Welcome Vicky";

Here document represents the web page.
getElementById() selects the element.
textContent modifies the text inside that element.
This makes web pages interactive and dynamic.

The DOM is a tree-like representation of an HTML document that allows JavaScript to access, modify, create, and delete web page elements dynamically.

References

https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/javascript/how-to-manipulate-dom-elements-in-javascript/

Code On JVM (My First JAVA Meetup)

Vigneshwaran V — Sat, 27 Jun 2026 18:49:42 +0000

Today I attended My first Java Meetup and there I learned a lot of things from the professionals who take the session, they provide more info about the code and how the code actually works in backend and how we write a good code to avoid complex problems.

Community

They are Strong community with lot of professionals, students, and java enthusiasts, they are very motivated and well organised community who make Monthly Meetups to discuss about the technology and how the java works in current tech-world.

Session

The Session was taken by Mahati ChandraMohan, she is a senior software engineer at PAYPAL and she have 14Years of Experience.
She take the Session very clearly as even a student can also understand what she will convey to us, like that much clarity she gave to each and everyone who attend the Meetup.

What she actually taught

She tells one thing clearly that a good developer developes a good code.
good code => means not the code works well today, is the code which works for long time without any complexcity or without create any problem, which is adaptable to future integration of new features.

Design Patterns

She taught something like Design Pattern is nothing but the design which we used to write our code is known as Design Patterns.
She tell that Around 23 Design Patters are there but she taught 3 Design Patterns in a simple manner and which is more understandable to all.
1. Creational Pattern
2. Structural pattern
3. Behavioral pattern
These are all the Patterns she taught today.
design pattern are the design, the way of writing efficient and good code which allow us make changes and add features without any problem, which means the clear code allow us to do anything around it but still its working well.
If we use these Design Patterns to write a code then our code also a good one and we also a good developer who able to create a scalable application, and which adaptable to add new features and works well for long years.

Example:

Bad Design (Without Design Pattern)

class PaymentProcessor {
  processPayment(method, amount) {

    if (method === "UPI") {
      console.log(`Paid ₹${amount} using UPI`);
    }

    else if (method === "CreditCard") {
      console.log(`Paid ₹${amount} using Credit Card`);
    }

    else if (method === "PayPal") {
      console.log(`Paid ₹${amount} using PayPal`);
    }

    else {
      console.log("Invalid Payment Method");
    }
  }
}

const payment = new PaymentProcessor();

payment.processPayment("UPI", 500);
payment.processPayment("CreditCard", 1000);

Here, every time a new payment method is added, we must modify the existing code.
Problems
Imagine tomorrow your client says:

Add Google Pay
Add PhonePe
Add Apple Pay
You have to keep editing:

if(method==="GooglePay") { ... }
else if(method==="PhonePe") { ... }
else if(method==="ApplePay") { ... }

Good Design (Strategy Design Pattern)
Each payment method becomes a separate strategy.
Step 1: Create Payment Strategies

class UPIPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using UPI`);
  }
}

class CreditCardPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using Credit Card`);
  }
}

class PayPalPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using PayPal`);
  }
}

Step 2: Payment Processor

class PaymentProcessor {

  constructor(paymentMethod) {
    this.paymentMethod = paymentMethod;
  }

  processPayment(amount) {
    this.paymentMethod.pay(amount);
  }

}

Step 3: Use It

const upi = new UPIPayment();
const card = new CreditCardPayment();
const paypal = new PayPalPayment();

const payment1 = new PaymentProcessor(upi);
payment1.processPayment(500);

const payment2 = new PaymentProcessor(card);
payment2.processPayment(1000);

const payment3 = new PaymentProcessor(paypal);
payment3.processPayment(1500);

Output

Paid ₹500 using UPI
Paid ₹1000 using Credit Card
Paid ₹1500 using PayPal

Why is this better?
Suppose you need to add PhonePe.
Just create a new class:

class PhonePePayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using PhonePe`);
  }
}

Use it:

const phonepe = new PhonePePayment();

const payment = new PaymentProcessor(phonepe);

payment.processPayment(2000);

Note:

No changes to PaymentProcessor
No huge if-else chain
Easy to extend
Easy to test

Design Pattern Used

This is the Strategy Pattern.
She tells like this the good developer developes the code which is more efficient and scalable and also adaptable to future integrations.

Quiz

They also conduct Quiz About the JAVA, for students and professional they participated. If they score well they also rewarded by gifts and they also asked some funny questions in that Quiz.

Grateful to Mahati ChandraMohan for an insightful and well-structured session that made complex concepts easy to understand. Special thanks to our trainers for continuously encouraging us to participate in meetups and expand our knowledge.