DEV Community: dharanidharan

JavaScript-Loops & Strings

dharanidharan — Mon, 27 Jul 2026 13:07:48 +0000

Loops

Imagine you had to write console.log() 100 times just to print numbers 1 to 100. Sounds exhausting, right? That's exactly the problem loops solve — they let you repeat a task without repeating your code.

1. The for Loop

The most common loop. It's perfect when you know exactly how many times you want to repeat something.

example

for (let i = 1; i <= 5; i++) {
console.log(i);
}
// Output: 1 2 3 4 5

Here's what's happening:
let i = 1 — start counting at 1
i <= 5 — keep going while this is true
i++ — add 1 after each round

2. The while Loop

Use this when you don't know in advance how many times you'll loop ,you just know the condition that should keep it going.

example

let count = 1;
while (count <= 5) {
console.log(count);
count++;
}

It checks the condition before running, so if the condition is false right away, the loop never runs at all.

4. The for...of Loop

Great for looping through arrays (or any iterable) when you just want the values.

example
const fruits = ["apple", "banana", "mango"];
for (const fruit of fruits) {
console.log(fruit);
}

Reference

w3schools.com

Strings

A string is just text — a name, a sentence, a URL, anything wrapped in quotes. It's one of the first data types you'll use in JavaScript, so let's cover the basics.

example
let text = "John Doe";

String Methods

length – Find string length.
toUpperCase() – Convert to uppercase.
toLowerCase() – Convert to lowercase.
trim() – Remove extra spaces.
charAt() – Get a character by index.
indexOf() – Find the position of a character or word.
includes() – Check if text exists.
slice() – Extract part of a string.
replace() – Replace text.
split() – Convert a string into an array.

Reference

w3schools.com

JavaScript Part-2

dharanidharan — Wed, 15 Jul 2026 15:10:32 +0000

Operators

An operator is a symbol or keyword that tells JavaScript to perform a specific operation on one or more values (called operands).

For example, in the expression:

let sum = 10 + 5;//10 and 5 are operands.+ is the operator.The result is 15.

Types of Operators

JavaScript provides several types of operators:

1. Arithmetic Operators
Arithmetic operators perform mathematical calculations.

Addition 10 + 5
Subtraction 10 - 5
Multiplication 10 * 5 / Division 10 / 5 % Modulus (Remainder) 10 % 3 ** Exponentiation 2 ** 3

2. Assignment Operators
Assignment operators assign values to variables.

= x = 5 Assign
+= x += 2 Add and assign
-= x -= 2 Subtract and assign
*= x *= 2 Multiply and assign
/= x /= 2 Divide and assign

3. Comparison Operators

Comparison operators compare two values and return true or false.

== Equal to
!= Not equal

Greater than
< Less than
= Greater than or equal
<= Less than or equal

4. Logical Operators

Logical operators combine multiple conditions.

&& AND
|| OR
! NOT

5. Increment & Decrement Operators

These operators increase or decrease a value by 1.

Increment (++)

let count = 5;
count++;
console.log(count);

Output

Decrement (--)

let count = 5;
count--;
console.log(count);

Output

6. Ternary Operator

The ternary operator is a shorter way to write an if...else statement.

Syntax

condition ? value1 : value2;

Example

let age = 20;
let result = age >= 18 ? "Adult" : "Minor";
console.log(result);

Output
Adult

Reference:

JavaScript Operators-Geeksforgeeks

CONDITIONAL STATEMENTS

A conditional statement is used to execute different blocks of code depending on whether a condition is true or false.

Types of Conditional Statements

JavaScript provides the following conditional statements:

1. if Statement

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

Syntax
if (condition) {
// Code to execute
}

Example

let age = 20;
if (age >= 18) {
console.log("You are eligible to vote.");
}

Output
You are eligible to vote.

2. if...else Statement

The if...else statement executes one block if the condition is true, otherwise it executes another block.

Syntax

if (condition) {
// Executes if true
} else {
// Executes if false
}

Example
let age = 16;
if (age >= 18) {
console.log("Eligible to vote");
} else {
console.log("Not eligible to vote");
}

Output
Not eligible to vote

3. if...else if...else Statement

Use this when you need to check multiple conditions.

Syntax

if (condition1) {

} else if (condition2) {

} else {

}

Example

let marks = 85;

if (marks >= 90) {
console.log("Grade A");
}
else if (marks >= 75) {
console.log("Grade B");
}
else if (marks >= 50) {
console.log("Grade C");
}
else {
console.log("Fail");
}

Output
Grade B

4. Nested if

A nested if means placing one if statement inside another.

Example

let age = 20;
let hasLicense = true;
if (age >= 18) {
if (hasLicense) {
console.log("You can drive.");
}
}

Output
You can drive.

5. switch Statement

The switch statement is used when you want to compare one value against many possible values.It is often cleaner than writing many else if statements.

Syntax

switch(expression){
case value1:
// Code
break;
case value2:
// Code
break;
default:
// Code
}

Example

let day = 3;
switch(day){
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid Day");
}

Output
Wednesday

Reference:

JavaScript Conditional Statements -Geeksforgeeks

JavaScript Part-1

dharanidharan — Tue, 14 Jul 2026 14:39:37 +0000

What is JavaScript?

JavaScript (JS) is a high-level, interpreted, and versatile programming language used to make websites interactive and dynamic. It is one of the three core technologies of web development, alongside HTML and CSS.

HTML creates the structure of a webpage.
CSS styles the webpage.
JavaScript adds behavior and functionality.

Variables

A variable is like a container that stores data.Imagine you have a box labeled Name. Inside that box, you store the value "Dharanidharan".

In JavaScript, variables work the same way—they store information that your program can use later.

Types of Variables

JavaScript provides three ways to declare variables:
let
const
var

1. let

The let keyword is used to declare a variable in JavaScript. It was introduced in ES6 (ECMAScript 2015) and is the recommended way to declare variables whose values may change during the execution of a program.

Syntax:
let variableName = value;

Reassigning a Variable-A variable declared with let can be reassigned.
Redeclaring is Not Allowed-You cannot declare the same variable twice in the same block.

Where Do We Use let?

The let keyword is used when the value of a variable may change during the execution of a program.Whenever you expect a variable to store different values at different times, let is the right choice.

Exzample

let y = 10;
console.log(y); // 10
let y = 20; // ❌ Error: Cannot redeclare
y = 20; // ✅ Allowed
console.log(y); // 20

2. const

The const keyword is used to declare a variable whose reference cannot be reassigned after it has been initialized. It was introduced in ES6 (ECMAScript 2015) and is the preferred choice for values that should remain the same throughout the program.

Syntax:
const country = "India";

const Must Be initialized Unlike let, you cannot declare a const variable without giving it a value.
both reassignment and redeclaration is not alowed.

where Do We Use Const?

The const keyword is used when a variable's reference should not be reassigned after it is created.Once a value is assigned to a const variable, you cannot assign a different value to that same variable.

Exzample

const z = 10;
z = 20; // ❌ Error: Assignment to constant variable
console.log(z); // 10

3. var(Not Recommended)

The var keyword was traditionally used to declare variables in JavaScript.Variables declared with var are function-scoped and can be re-declared within the same scope without causing an error.

Syntax:
var name = "ABCD";

Reassigning a Variable-A variable declared with var can be reassigned.
Redeclaring a Variable-One unique feature of var is that it can be redeclared in the same scope.

Why is var Not Recommended?

With var, you can declare the same variable multiple times in the same scope. This can accidentally overwrite values.
var is function-scoped, not block-scoped. This means a variable declared inside an if block or for loop is still accessible outside that block.
Variables declared with var are hoisted. They exist before the line where they are declared, but their value is undefined until the assignment happens.

Exzample

var x = 10;
var x = 20; // Redeclaration allowed
console.log(x); // 20

Referance:

w3schools.com

HTML & CSS

dharanidharan — Mon, 13 Jul 2026 14:37:13 +0000

Welcome to my very first blog.

What is HTML?

HTML stands for Hyper Text Markup Language. It is the standard language used to create the structure of a web page.

Think of HTML as the skeleton of a human body. It defines the headings, paragraphs, images, buttons, links, tables, and forms that appear on a webpage .For example, HTML helps us create:

Headings
Paragraphs
Images
Links
Lists
Tables
Forms

Without HTML, a webpage would have no structure.

What is CSS?

CSS stands for Cascading Style Sheets.

If HTML is the skeleton, CSS is the skin, clothes, and overall appearance. CSS is responsible for making websites attractive and responsive.Using CSS, we can:

Change colors
Add backgrounds
Style fonts
Create layouts
Add spacing and borders
Create animations
Make websites responsive for mobile devices

Without CSS, websites would look plain and difficult to use.

Here is an code website developed by self as a first step on learning Full stack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header{

            background-color: rgb(0, 0, 0);
            color: white;
            Padding: 20px;
        }
        h1{

            text-align: center;
            margin-bottom: 10px;
        }
        a{

            color: white;
            text-decoration: none;
            margin-right: 20px;
        }
        nav{
            text-align: center;

        }
        section{
            border: 1px solid #ccc;
            margin:  40px 80px;
            padding: 40px;
            border-radius: 10px;
            background-color: #d1b09a;
        }
        footer{
            text-align: center;
            padding: 20px;
            background-color: rgb(0, 0, 0);
            color: white;
        }
        p{
            margin-bottom: 10px;
        }
        ul{
            list-style-type: square;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <header> 
        <h1>Dharanidharan</h1>
        <nav>
            <a href="">About me</a>
            <a href="">Projects</a>
            <a href="">Contact</a>
        </nav>
    </header>
    <section>
        <h2>About Me</h2>
        <p>Welcome to my portfolio!</p>
        <p>Current student looking to join the workforce to gain real-world experience. Ability to completetasks on time in both individual and team settings. Dependable and reliable, ready to learn and grow with your company.</p>
    </section>

    <section>
        <h2>Projects</h2>
        <p>Here are some of my projects:</p>
        <ul>
            <li>FINTECH</li>
            <li>Temperature Monitoring Band for Babies using IoT and Cloud Data Analysis </li>
            <li>AI-Driven ECG Image Analysis and Clinical Interpretation System </li>
        </ul>
    </section>
    <section>
        <h2>Contact</h2>
        <p>You can reach me at iamdharanidharan@gmail.com</p>
        <p>Mobile: +91 8248355766</p>
    </section>
    <footer>
        <h4>&copy;  Dharanidharan.</h4>
    </footer>
</body>
</html>

here is its Output:

What's Next?

JavaScript

Conclusion

Thank you for reading my very first blog!

Everyone starts as a beginner, and this is my first step into the world of web development. I hope you'll join me as I continue learning and building new projects.