DEV Community: Vairavan

DOM in JavaScript

Vairavan — Fri, 26 Jun 2026 17:53:41 +0000

What is DOM?

DOM stands for Document Object Model.

DOM is a bridge between HTML and JavaScript. It helps JavaScript to access and change HTML elements.

When a web page loads in the browser, the browser creates a DOM tree from the HTML document.

Using DOM, JavaScript can:

Change text in a webpage.
Change images.
Change styles (color, size, background, etc.).
Hide or show elements.
Add or remove HTML elements.
Respond to user actions like clicks and keyboard inputs.

What does "Document Object Model" mean?

1. What is Document?

The Document means the complete HTML page loaded in the browser.

Example:

<body>
    <h1>Hello</h1>
    <button>Click Me</button>
</body>

This entire HTML page is called a Document.

In JavaScript, we use the document object to access the webpage.

Example:

document.getElementById("name");

2. What is Object?

In JavaScript, everything inside the DOM is treated as an Object.

For example:

<h1> is an object.
<button> is an object.
<img> is an object.

Because they are objects, they have:

Properties
Methods

Example:

text.innerText = "Hello";

innerText is a property.
We are changing the object's value.

3. What is Model?

The word Model means the browser represents the HTML page in a tree structure.

Example:

<body>
    <div>
        <h1>Hello</h1>
    </div>
</body>

DOM Tree:

Document
   |
  Body
   |
  Div
   |
  H1

This structure helps JavaScript easily find and manipulate elements.

How JavaScript Accesses HTML Elements

JavaScript can access HTML elements using DOM methods.

Some commonly used methods are:

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

Example:

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

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

Now JavaScript can control this element.

What Can We Do Using DOM?

Using DOM, we can:

Change text.
Change images.
Change CSS styles.
Create new elements.
Delete elements.
Show or hide elements.
Handle button clicks.
Build interactive web applications.

What is an Event?

An Event is an action performed by the user or browser.

Examples:

Clicking a button.
Typing in an input box.
Moving the mouse.
Pressing a keyboard key.
Loading a webpage.

Common events:

onclick
onmouseover
onkeydown
onchange
onsubmit

Example:

<button onclick="showMessage()">Click</button>

function showMessage() {
    alert("Button Clicked");
}

When the user clicks the button, the function executes.

Events make webpages interactive.

Project 1: Bulb ON/OFF Project

What does this project do?

<body>
    <div id="box">
    <img id="bulb_img" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
    <button onclick="on()">ON</button>
    <button onclick="off()">OFF</button>

    </div>

<script>
     const bulb = document.getElementById('bulb_img');
     const back = document.getElementById('box')
     function on() {
        bulb.src= 'https://www.w3schools.com/js/pic_bulbon.gif';
        back.style.backgroundColor='white';

     }
     function off() {
        bulb.src= 'https://www.w3schools.com/js/pic_bulboff.gif';
        back.style.backgroundColor='rgb(0, 0, 64)';
     }



</script>    
</body>

This project turns a bulb image ON and OFF when the user clicks buttons.

It also changes the background color.

How I built this project

First, I accessed the HTML elements using DOM.

const bulb = document.getElementById('bulb_img');
const back = document.getElementById('box');

When the user clicks the ON button:

function on() {
    bulb.src = 'pic_bulbon.gif';
    back.style.backgroundColor = 'white';
}

The bulb image changes to ON.
The background color changes to white.

When the user clicks the **OFF button:**

function off() {
    bulb.src = 'pic_bulboff.gif';
    back.style.backgroundColor = 'rgb(0, 0, 64)';
}

The bulb image changes to OFF.
The background color changes to dark blue.

This project helped me understand:

getElementById()
Event handling
Changing image source
Changing CSS styles using JavaScript

Project 2: Text Changing Project

What does this project do?

<body>
    <div id="fullPage">
        <div id="box">
            <div id="textBox">
                <h1 id="name">What is Your Name?</h1>
            </div>
            <button onclick="changeText()">Click</button>
        </div>



    </div>

    <script>
        const text = document.getElementById("name")
        function changeText() {
            if (text.innerText == "What is Your Name?") {
                text.innerText = "Hi Vairavan"
            } else {
                text.innerText = "What is Your Name?";
            }


        }


    </script>

</body>

This project changes the text when the button is clicked.

Initially, the text is:

What is Your Name?

After clicking the button, the text changes to:

Hi Vairavan

If the button is clicked again, the original text appears.

How I built this project

First, I accessed the heading element.

const text = document.getElementById("name");

Next, I used an event with a button.

<button onclick="changeText()">Click</button>

When the button is clicked, JavaScript checks the current text.

function changeText() {
    if (text.innerText == "What is Your Name?") {
        text.innerText = "Hi Vairavan";
    } else {
        text.innerText = "What is Your Name?";
    }
}

This project helped me understand:

Accessing elements using DOM.
Using innerText.
Using conditions (if...else).
Handling click events.

Conclusion

DOM is one of the most important concepts in JavaScript.
It allows JavaScript to interact with HTML and CSS, making webpages dynamic and interactive.
By learning DOM, we can create many real-world projects and improve our front-end development skills.

After learning DOM basics, I am planning to build more DOM projects.

In my next blog, I will share another DOM project and explain how I built it step by step.

Stay tuned for the next blog!👋

JavaScript Array Series – Creating Own push() Method

Vairavan — Fri, 26 Jun 2026 17:00:49 +0000

In my previous blogs, I explained how the JavaScript length property works and also created my own version of the toString() method without using JavaScript's built-in methods.

Today, I continued this learning journey by creating my own version of another important array method: push().

Instead of using JavaScript's built-in push() method, I tried to understand how it works internally by implementing it manually.

What is push() Method?

The push() method is used to add a new element at the end of an array.

Example:

const arr = [1, 2, 3];

arr.push(4);

console.log(arr); // [1, 2, 3, 4]

In this blog, I did not use the built-in push() method. Instead, I created my own logic.

My Approach

const arr = [1, , 3, 4, 5];
let user = "gunalan";

arr[countOfLength()] = user;

function countOfLength() {
    let lengthDemo = 0;

    for (let count of arr) {
        lengthDemo++;
    }

    return lengthDemo;
}

console.log(arr);

How Does This Work?

Step 1: Create an Array and a New Value

const arr = [1, , 3, 4, 5];
let user = "gunalan";

Here, I created an array and a new value that needs to be added.

Step 2: Find the Length of the Array

function countOfLength() {
    let lengthDemo = 0;

    for (let count of arr) {
        lengthDemo++;
    }

    return lengthDemo;
}

I created a custom function called countOfLength().

Inside this function:

I started a variable named lengthDemo with value 0. Then I used a for...of loop to visit every element in the array.
For each iteration, I increased lengthDemo by 1.
Finally, I returned the total count.

Step 3: Add the New Value

arr[countOfLength()] = user;

After finding the length, I used that value as the new index.

For example, if the array length is 5, the new value will be added at index 5.

This is similar to how the original push() method works.

Output:

[1, empty, 3, 4, 5, "gunalan"]

What I Learned

By creating this custom push() method, I learned:

✅ How the push() method adds values to an array.

✅ How array indexes work internally.

✅ How to create custom functions.

✅ How loops can be used to recreate built-in methods.

Conclusion

Implementing JavaScript methods manually is one of the best ways to understand how JavaScript works behind the scenes.
Every day, I am trying to recreate built-in methods step by step. This process is helping me improve my JavaScript fundamentals and problem-solving skills.
I will continue this series by implementing more JavaScript methods

Stay tuned for the next blog! 👋

JavaScript Control Flow Statements

Vairavan — Thu, 25 Jun 2026 13:27:16 +0000

What are Control Flow Statements?

Control Flow Statements are used to control the order in which code executes in a program.

Using control flow statements, we can decide:

Which code should run.
Which code should be skipped.
How many times a block of code should run.

JavaScript provides different types of control flow statements.

Some common control flow statements are:

if
if...else
else if
switch
for loop
while loop

1. if Statement

The if statement executes a block of code only when the condition is true.

let marks = 80;

if (marks >= 50) {
    console.log("Pass");
}

Explanation

let marks = 80; → A variable named marks is created with the value 80.
if (marks >= 50) → Checks whether the marks are greater than or equal to 50.
Since the condition is true, "Pass" is printed.

2. if...else Statement

The if...else statement executes one block if the condition is true and another block if the condition is false.

let age = 15;

if (age >= 18) {
    console.log("Eligible to Vote");
} else {
    console.log("Not Eligible to Vote");
}

Explanation

age stores the value 15.
The condition checks whether age is greater than or equal to 18.
The condition is false, so the else block executes.
"Not Eligible to Vote" is printed.

3. else if Statement

The else if statement is used to check multiple conditions.

let score = 70;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 60) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

Explanation

score stores the value 70.
The first condition (score >= 90) is false.
The second condition (score >= 60) is true.
So, "Grade B" is printed.

4. switch Statement

The switch statement is used when we have multiple choices.

let day = 6;

switch (day) {
    case 1:
        console.log("Monday");
        break;

    case 6:
        console.log("Saturday");
        break;

    default:
        console.log("Invalid Day");
}

Explanation

day stores the value 6.
The switch checks all cases.
case 6 matches the value.
"Saturday" is printed.
break stops further execution.

5. for Loop

The for loop is used when we know how many times the code should run.

for (let i = 1; i <= 3; i++) {
    console.log("Hello");
}

Explanation

let i = 1 → Loop starts from 1.
i <= 3 → Loop runs while i is less than or equal to 3.
i++ → Increases the value of i by 1.
"Hello" is printed three times.

6. while Loop

The while loop executes as long as the condition is true.

let i = 1;

while (i <= 3) {
    console.log(i);
    i++;
}

Explanation

i starts with the value 1.
The loop checks whether i is less than or equal to 3.
The value of i is printed.
i++ increases the value by 1.
The loop stops when i becomes 4.

Today, I learned about JavaScript Control Flow Statements such as if, if...else, else if, switch, for, and while. These statements help us control the execution of code and make decisions based on different conditions.
Thank you for reading my blog. I will meet you in the next blog with another JavaScript topic. 👋

JavaScript Array Series – Custom toString() Methods

Vairavan — Thu, 25 Jun 2026 12:55:02 +0000

In my previous blog, I explained how the Array length property works and also created my own version of it without using the built-in length property.Today, I continued the same learning journey by creating my own versions of JavaScript array methods:

toString()

Instead of directly using JavaScript's built-in methods, I tried to understand the internal working of these methods by implementing them manually.

Creating My Own toString() Method

The toString() method converts an array into a string.

Example:

const arr = [1, 2, 3];

console.log(arr.toString()); // "1,2,3"

In this program, I manually converted the array into a string.

My Approach

arr = [1, 2, 3, 4, 5];
str = "";

len = countOfLength();

for (let count of arr) {
    if (count < len) {
        str = str + count + ",";
    } else {
        str = str + count;
    }
}

function countOfLength() {
    let lengthDemo = 0;

    for (let count of arr) {
        lengthDemo++;
    }

    return lengthDemo;
}

console.log(str);

How It Works

Step 1: Count the array length
len = countOfLength();

I first calculated the array length manually using a custom function.

function countOfLength() {
    let lengthDemo = 0;

    for (let count of arr) {
        lengthDemo++;
    }

    return lengthDemo;
}

This function loops through the array and counts the total number of elements.

Step 2: Loop through the array
for (let count of arr)

This loop visits every element one by one.

Step 3: Build the string
str = str + count + ",";

Each value is added to the string along with a comma.

For the last element, I avoided adding an extra comma.

Finally, the output becomes:

"1,2,3,4,5"

Building methods manually is a great way to understand how JavaScript works internally. Instead of only using built-in methods, implementing them ourselves helps improve problem-solving skills and strengthens JavaScript fundamentals.

I will continue this series by implementing more JavaScript array methods manually and share my learning journey step by step in upcoming blogs.

Stay tuned for the next part! 👋

Array & Array Methods (Basic)

Vairavan — Wed, 24 Jun 2026 11:39:27 +0000

What is Array?

An array is a non-primitive data type. You can store multiple data items and various data types within it. Since arrays are special objects in JavaScript, the typeof operator returns object meaning an array is essentially an object. You may already be aware of this.

const fruits = ["Apple", "Banana", "Orange"];

create a array in used to const variable. The reason is const protects the array variable, not the items inside. So we can still add or remove items, but we cannot replace the whole array.

After creating an array, the next step is to get the items from it. We use something called an index to access elements. An index is the position number of an item in the array. Important Rule Array index always starts from 0, not 1.

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Orange

What is Array Methods?

An array method is a built-in function that lets you add, remove, search, or change items in an array easily. You don’t need to write long code. JavaScript already gives you these tools. Methods save time and make code clean.

3 types of methods in here.

1. Methods That Add or Remove Items

These methods change the size of your array. They add new items or delete existing ones.

2. Methods That Search Items

These methods help you find something in the array. They don't change the array.

4. Methods That Reorder or Copy

These methods change the order or create copies.

I am just learning the basic methods; we can proceed with that.

Array length
Array toString()
Array at()
Array join()
Array pop()
Array push()
Array shift()
Array unshift()
Array isArray()
Array delete()
Array concat()
Array copyWithin()
Array flat()
Array slice()
Array splice()
Array toSpliced()

The W3Schools website lists several basic array methods, we can try creating each of these methods ourselves.
W3Schools Website Link :https://www.w3schools.com/js/js_array_methods.asp

Let's start with the length method.
What is length in Array?

length is an array property that tells you how many items are inside the array. It's a property, not a method. so we won't use ().

const fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.length); 
// Output: 3

Okay, now I'm going to create this Method Sorry Sorry.. Create property myself.

function lengthDemo(arr) {
    let i = 0;

    while (arr[i] != undefined) {
        i++;
    }

    return i;
}

const arr=[ 1, 2, 3, 4, 5]

console.log(lengthDemo(arr));

output : 5

At first, I did it this way. But there is a problem with this. The thing is...

const arr=[ 1, , 3, , 5]

Finding a Problem in My Array Length Program

I tried to find the length of an array without using the built-in .length property.

I wrote the following code:

function lengthDemo(arr) {
    let i = 0;

    while (arr[i] != undefined) {
        i++;
    }

    return i;
}

const arr=[ 1, , 3, , 5]

console.log(lengthDemo(arr));

output : 1

I expected the output to be 5 because the array contains five positions.

But the program returned 1.

After checking the code, I found the problem. The array contains empty slots.

[1, , 3, , 5]

JavaScript treats these empty slots as undefined.

The while loop checks whether the current element is not undefined.

When i becomes 1, arr[1] is undefined, so the condition becomes false and the loop stops immediately.

Because of this, the function returns 1 instead of 5.

*This helped me understand that arrays with empty slots can cause unexpected results. My friends helped me solve this problem. So, I found a new way. *

I wrote the following code.

let array = [1, , 3, , 5];
let lengthDemo = 0;

for (let e of array) {
    length++;
}


console.log(lengthDemo);

output : 5

console.log(typeof array[1]);

output : undefined

I wanted to understand how JavaScript handles empty spaces inside an array.

[1, , 3, , 5]

Here, index 1 and index 3 are empty.

When I executed the code:

console.log(typeof array[2]);

The output was:

number

**This is because array[2] contains the value 3, and the data type of 3 is number.

I also learned that empty slots in JavaScript arrays behave differently. If I check an empty slot like this:**

console.log(typeof array[1]);

The output will be:

undefined

This is because there is no value stored at index 1.

Another interesting thing is that the for...of loop still iterates through all positions in the array, including empty slots. Therefore, the value of length becomes 5.

Through this example, I learned that JavaScript arrays can contain empty slots, and these empty slots are treated as undefined when accessed.

Okay Guys, I will create all the methods in my own style. So, let's meet in the next blog post.

HTML

Vairavan — Mon, 01 Jun 2026 15:38:43 +0000

HTML (HyperText Markup Language) is the standard language used to create web pages. Every website starts with HTML. It helps structure the content of a webpage such as headings, paragraphs, images, links, and more.

What is HTML?

HTML is not a programming language. It is a markup language used to organize and display content on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>
</body>
</html>

HTML Document Structure

Every HTML page has a basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>

Explanation

<!DOCTYPE html> → Tells the browser this is an HTML5 document.
→ Root element of the webpage.
→ Contains page information.

→ Title shown in browser tab.<br> <body> → Visible content of the webpage.</p> <h2> <a name="headings" href="#headings" class="anchor"> </a> Headings </h2> <p><strong>HTML provides six heading tags.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1></span>Main Heading<span class="nt"></h1></span> <span class="nt"><h2></span>Sub Heading<span class="nt"></h2></span> <span class="nt"><h3></span>Smaller Heading<span class="nt"></h3></span> </code></pre></div> <p></p> <p><strong>h1 is the largest heading and h6 is the smallest.</strong></p> <h2> <a name="paragraph" href="#paragraph" class="anchor"> </a> Paragraph </h2> <p><strong>Paragraphs are created using the p tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p></span>This is a paragraph.<span class="nt"></p></span> </code></pre></div> <p></p> <h2> <a name="links" href="#links" class="anchor"> </a> Links </h2> <p><strong>Links are created using the a tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>Visit Website<span class="nt"></a></span> </code></pre></div> <p></p> <p>The href attribute contains the destination URL.</p> <h2> <a name="images" href="#images" class="anchor"> </a> Images </h2> <p><strong>Images are added using the img tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">></span> </code></pre></div> <p></p> <p>src → Image path.<br> alt → Alternative text if image fails to load.</p> <h2> <a name="lists" href="#lists" class="anchor"> </a> Lists </h2> <p><strong>Ordered List</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><ol></span> <span class="nt"><li></span>HTML<span class="nt"></li></span> <span class="nt"><li></span>CSS<span class="nt"></li></span> <span class="nt"><li></span>JavaScript<span class="nt"></li></span> <span class="nt"></ol></span> </code></pre></div> <p></p> <p><strong>Unordered List</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><ul></span> <span class="nt"><li></span>HTML<span class="nt"></li></span> <span class="nt"><li></span>CSS<span class="nt"></li></span> <span class="nt"><li></span>JavaScript<span class="nt"></li></span> <span class="nt"></ul></span> </code></pre></div> <p></p> <h2> <a name="buttons" href="#buttons" class="anchor"> </a> Buttons </h2> <p></p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><button></span>Click Me<span class="nt"></button></span> </code></pre></div> <p></p> <p><strong>Buttons allow users to interact with the webpage.</strong></p> <p>Buttons can perform different actions.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Click Me<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"reset"</span><span class="nt">></span>Reset<span class="nt"></button></span> </code></pre></div> <p></p> <p>button → General button<br> submit → Sends form data<br> reset → Clears form fields</p> <h2> <a name="forms" href="#forms" class="anchor"> </a> Forms </h2> <p><strong>Forms are used to collect user information.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><form></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Enter Name"</span><span class="nt">></span> <span class="nt"></form></span> </code></pre></div> <p></p> <p></p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><form></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"></form></span> </code></pre></div> <p></p> <p><strong>Input Elements</strong></p> <p>Input elements allow users to enter data.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span><span class="nt">></span> </code></pre></div> <p></p> <p><strong>Common Types:</strong></p> <ol> <li>text</li> <li>email</li> <li>password</li> <li>number</li> <li>date</li> <li>checkbox</li> <li>radio</li> </ol> <h2> <a name="div-tag" href="#div-tag" class="anchor"> </a> Div Tag </h2> <p><strong>The div tag is a block-level container used to group HTML elements together. It helps organize the webpage structure.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><div></span> <span class="nt"><h1></span>Welcome<span class="nt"></h1></span> <span class="nt"><p></span>This is a div container.<span class="nt"></p></span> <span class="nt"></div></span> </code></pre></div> <p></p> <h2> <a name="span-tag" href="#span-tag" class="anchor"> </a> Span Tag </h2> <p><strong>The span tag is an inline container used to style or group small parts of text.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p></span>Hello <span class="nt"><span></span>World<span class="nt"></span></p></span> </code></pre></div> <p></p> <h2> <a name="semantic-tags" href="#semantic-tags" class="anchor"> </a> Semantic Tags </h2> <p><strong>Semantic tags describe the meaning of the content.</strong></p> <p><strong>Semantic Tags</strong></p> <ul> <li>header</li> <li>nav</li> <li>section</li> <li>article</li> <li>footer </li> </ul> <div class="highlight"><pre class="highlight html"><code><span class="nt"><header></header></span> <span class="nt"><nav></nav></span> <span class="nt"><section></section></span> <span class="nt"><article></article></span> <span class="nt"><footer></footer></span> </code></pre></div> <p></p> <p><strong>Header Tag</strong></p> <p>The header tag represents the top section of a webpage.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1></span>My Website<span class="nt"></h1></span> <span class="nt"></header></span> </code></pre></div> <p></p> <p><strong>Footer Tag</strong></p> <p>The footer tag represents the bottom section of a webpage.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><footer></span> <span class="nt"><p></span>Copyright 2026<span class="nt"></p></span> <span class="nt"></footer></span> </code></pre></div> <p></p> <p><strong>Navigation Bar</strong></p> <p>The <nav> tag contains navigation links.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><nav></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>About<span class="nt"></a></span> <span class="nt"></nav></span> </code></pre></div> <p></p> <p><strong>Section Tag</strong></p> <p>The section tag groups related content.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><section></span> <span class="nt"><h2></span>About Us<span class="nt"></h2></span> <span class="nt"><p></span>Information about the company.<span class="nt"></p></span> <span class="nt"></section></span> </code></pre></div> <p></p> <p><strong>Benefits:</strong></p> <ul> <li>This structure makes websites easier to understand</li> <li>Better readability</li> <li>Better SEO</li> <li>Better accessibility</li> </ul> <h2> <a name="tables" href="#tables" class="anchor"> </a> Tables </h2> <p><strong>Tables are used to display data in rows and columns.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><table></span> <span class="nt"><tr></span> <span class="nt"><th></span>Name<span class="nt"></th></span> <span class="nt"><th></span>Age<span class="nt"></th></span> <span class="nt"></tr></span> <span class="nt"><tr></span> <span class="nt"><td></span>Surya<span class="nt"></td></span> <span class="nt"><td></span>22<span class="nt"></td></span> <span class="nt"></tr></span> <span class="nt"></table></span> </code></pre></div> <p></p> <p><strong>Important table tags:</strong></p> <p><strong>Tag - Purpose</strong></p> <ul> <li>table-Creates a table</li> <li>tr-Table row</li> <li>th-Table heading</li> <li>td-Table data</li> <li>thead-Table header</li> <li>tbody-Table body</li> <li>tfoot-Table footer</li> </ul> <h2> <a name="common-attributes" href="#common-attributes" class="anchor"> </a> Common Attributes: </h2> <ul> <li>id</li> <li>class</li> <li>href</li> <li>src</li> <li>alt</li> <li>title</li> <li>style</li> </ul> <h2> <a name="id-attribute" href="#id-attribute" class="anchor"> </a> ID Attribute </h2> <p><strong>The id attribute uniquely identifies an element.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1</span> <span class="na">id=</span><span class="s">"title"</span><span class="nt">></span>Hello<span class="nt"></h1></span> </code></pre></div> <p></p> <p><strong>Rules:</strong></p> <ul> <li>Must be unique.</li> <li>One element should have one unique ID.</li> </ul> <h2> <a name="class-attribute" href="#class-attribute" class="anchor"> </a> Class Attribute </h2> <p><strong>The class attribute groups multiple elements.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text"</span><span class="nt">></span>Paragraph 1<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text"</span><span class="nt">></span>Paragraph 2<span class="nt"></p></span> </code></pre></div> <p></p> <ul> <li>Multiple elements can share the same class.</li> </ul>

JavaScript

Vairavan — Fri, 29 May 2026 13:00:02 +0000

JavaScript is one of the most popular programming languages in web development. It is mainly used to make websites interactive and dynamic. With JavaScript, we can create things like buttons, animations, calculators, login forms, games, and much more.

Variables

Variables used to store data in JavaScript.

JavaScript has 3 ways to create variables:

var
let
const

var

var has global scope and it is the old way of declaring variables.

var a = 10;
console.log(a);
output:
10

let

let has block scope. It can only be accessed inside { }.

Example:

let a = 10;

{
  let a = 20;
  console.log(a); // 20
}

console.log(a); // 10

OutPut :
10

const

const is used for constant values. Its value cannot be reassigned.

const c = 30;
console.log(c);

OutPut:
30                 ✅

const weekdays = 7;

weekdays = 10;     ❌ Error

OutPut:

TypeError: Assignment to constant variable

But if the value is an array or object, we can change values inside it.👍

Data Types

JavaScript has different data types.

1.Primitive Data Types

These store single values.

Number
String
Boolean
Null
Undefined

Example:

let age = 20;
let name = "Surya";
let Student = true;
let salary =null;
let a

2.Non-Primitive Data Types

These can store multiple values.

Array
Object

Operators

Operators are symbols that help us perform calculations, comparisons, and logical operations in JavaScript.

1. Arithmetic Operators

Operator Meaning

{ + } Add
{ - } Subtract
{ * } Multiply
{ / } Divide
{ % } Remainder

Example:

let a = 10;
let b = 5;

console.log(a + b);
output:
15
console.log(a - b);
output:
5

2.Comparison Operators

*comparison of Two values *

Operator Meaning

{ == } Equal
{ === } Strict Equal
{ != } Not Equal
{ > } Greater Than
{ < } Less Than

Example:

let a = 10;
let b = 5;

console.log(a > b);

Output:
true

3.Logical Operators

Logical operators are used to combine two or more conditions.

Operator Meaning

{ && } AND → both conditions must be true
{ || } OR → any one condition can be true
{ ! } NOT → changes true to false and false to true

Example:

Use &&

let age = 20;

console.log(age > 18 && age < 30);

Output:

true

let age = 20;

console.log(age < 18 && age < 30);

Output:

false

Use ||

let age = 20;

console.log(age > 18 || age < 30);

Output:

true

let age = 20;

console.log(age < 18 || age < 30);

Output:

true

Increment Operator ++

Used to increase Value.

Two Type of increment operators

++a--- Pre-increment
a++--- Post-increment

Example:

let a = 5;

a++;

console.log(a);

Output:

6

let a = 5;
let b = a;

a++;


console.log(a);
console.log(b);

Output:

6
5

Decrement Operator --

Used to decrease value

Two Type of Decrement operators

--a ---Pre-decrement
a-- ---Post-decrement

Example:

let a = 5;

a--;

console.log(a);

Output:

4

Arrays

Array is used to Store Multiple Values in a Single Variable [].

Example:

const marks = [79, 70, 93, 100];

 index:       0   1   2    3

console.log(marks[1]); 

 Output:
 70

Multiple Data Types in One Array

Arrays can store different data types together.

const values = [10, true, "abc", 50];

Changing Array Values with const

Call the index Num when Change the Value.

When using const, you cannot reassign the whole array.

But you can change values inside the array.

const marks = [10, 20, 0, 11, 5];

marks[2] = 99;

console.log(marks);

Functions

A function is a reusable block of code.

It runs only when the function is called.

Function Declaration

function add(no1, no2) {

}

add(5, 10);

Arrow Function

Arrow function is a shorter way to write functions.

const add = (no1, no2) => no1 + no2;

add(10, 15);

Return Value

The return keyword sends a value back from the function.

function add(no1, no2) {
  return no1 + no2;
}

let result = add(5, 7);

console.log(result);

OutPut:

 12

Hoisting

Hoisting means JavaScript moves declarations to the top before running the code.

-Functions are hoisted ✅
-let and const variables are not hoisted ❌

let result = add(5, 7);

console.log(result);

function add(no1, no2) {
  return no1 + no2;
}

Objects

An object stores data in key : value pairs.

  const laptop = {
  brand: "HP",
  price: 35000,
  model: "HP05"
};

console.log(laptop.brand);
console.log(laptop.price);

Objects with Functions

Objects can also contain functions.

const obj = {

  type: "object",

  state: "active",

  behavior: function() {
    console.log("Object is working");
  }

};

obj.behavior();

Day 2 of Python Learning 🐍

Vairavan — Tue, 26 May 2026 19:02:48 +0000

Last day, we learned terminal basics, conditional statements, how to use Boolean datatype in Python, and what dynamic type is. Today, we will see some more things that I learned in Python.
I learned was Control Flow Statements.

Control Flow Statement

Control Flow Statements are used to control the execution flow of a program type of three.

1.Condition Statements
2.Lopping Statements
3.Jump Statements

Today we are going to learn two statements.😁
One is Conditional Statements, and another one is Looping Statements.

Condition Statements

Condition statement means checking a condition and running the code based on that condition.

Condition Statement key words

if
else
elif 🤔

In JavaScript, I used else if.
In Python, we use elif for the same purpose. ( else + if = elif 😜 )

a =10
b =20
c =21
if a>=b and a>=c:
    print(a)
elif b>=a and b>=c:
    print(b)
elif c>=a and c>=b:
    print (c)

OutPut:
   c

First I created three variables and assigned values to them.
Then I used an if-elif condition statement to check which value is greater.
Used to (ex) a>=b and a>=c, b>=a and b>=c, c>=a and c>=b
Finally the program prints the largest number.📈

Looping Conditions

A looping condition is used to repeat a block of code again and again until the condition becomes false. two Type of Looping Conditions is Here
For Loop Condition and While Loop Conditions. but I Today only Learn in While Loop Condition.

While Loop

It is used to run the code until the condition becomes false.
I was create a while loop conditions by 4 task. see the task easy to Understand in while loop condition..

Task no: 1) 5 4 3 2 1

count =5
while count>=1:
    print(count, end=" ")
    count-=1
Output :
5 4 3 2 1
------------------------------

Task no: 2) 10 8 6 4 2

loop=10
while loop>= 2:
    print(loop, end=" ")
    loop-=2
Output :
10 8 6 4 2

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

Task no3) 15 12 9 6 3

count1 =15
while count1>=3:
    print(count1,end=" ")
    count1-=3
Output :
15 12 9 6 3

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

Task no:4) 25 20 15 10 5

count2 =25
while count2>=5:
    print(count2,end=" ")
    count2-=5
Output :
25 20 15 10 5

EX :

Task no 1
Full program flow:

Create a Variable and Initialization starting value. count = 5
Used a while Loop condition and Check the Condition. while count>=1:
print the Count. print( Count )
value decrease. count-=1 meaning count=5 > > 5 - 1 = 4 > > count =4
again condition check. count value = 4 again print and again decrement the count.
When the condition becomes false the loop stops. [ex] count is 0 >=1.

And I use All print inside end=" "

what is this end=""🤔

end="" is used to control what comes after the print output.
Normally print moves to the next line.😒

OutPut:

5
4              
3
2
1

But using end="" we can print output in the same line.😃

OutPut :

5 4 3 2 1

We can use space, star, dash, or other symbols inside end="".😯

end="*",end="_"

OutPut :

5*4*3*2*1

5_4_3_2_1

I will continue my Python journey tomorrow...👋

Day 1 Python Learning 🐍

Vairavan — Tue, 26 May 2026 09:41:37 +0000

Today I Started learning python programming language.
I learned some basic concepts about python and terminal commands

Python is a Interpreter and dynamically typed programming language.
Python automatically Understands the datatype.
Interpreter means a code is Executed Line by Line..

EX :

x=10
x="HI"

OutPut:
HI

Terminal Commands

I Learn How to use Terminal Cmd :

" ls " -used to show file and folders
" cd " -used to change folder
" cd .. " -used to one step back file are folder
" --version " -used to check the versions (ex) python --version output :3.14.3 *up arrrow -used to access previous commands

Conditional Statements

Conditional Statements used to Make Decisions in Programming

EX :

a=10
b=5
if a>b:
    print(a)
else:
    print(b)

OutPut:
a

if the condition is true, python executes the if
otherwise, it executes the else block.

I Learn One Important of Boolean Datatype in Python

I used to js in boolean datatype true and false.
Python also true, false but used to first letter must be Capital.

EX :

true, false ❌
True, False ✅

Today was my first day learning Python.
I learned terminal basics, conditional statements, How to use Boolean Datatype in Python, and What is dynamic type.
I am excited to learn more about Python and programming.