DEV Community: Madhan Raj

Conditional Statements in Javascript

Madhan Raj — Thu, 04 Jun 2026 07:18:09 +0000

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false.

*Conditions are evaluated using comparison and logical operators.
*They help in building dynamic and interactive applications by responding to different inputs.

*Types of Conditional Statements *

1. if Statement
The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

*Executes code only when a specified condition is true.
*Useful for making simple decisions in a program.

Syntax:

if (condition) {
  // code runs if condition is true
}

let x = 20;

if (x % 2 === 0) {
    console.log("Even");
}

if (x % 2 !== 0) {
    console.log("Odd");
};

2. if-else Statement

 The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs.

*Used when there are two possible outcomes.
*The else block runs when the if condition is not satisfied.

let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};

Output
Adult

3. else if Statement
The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true.

*Allows checking more than two conditions.
*Evaluated from top to bottom until a true condition is found.

const x = 0;

if (x > 0) {
    console.log("Positive.");
} else if (x < 0) {
    console.log("Negative.");
} else {
    console.log("Zero.");
};

Output
Zero

4. Using Switch Statement (JavaScript Switch Case)

The switch statement evaluates an expression and executes the matching case block based on its value. It provides a clean and readable way to handle multiple conditions for a single variable.

*Used when one variable needs to be compared against multiple fixed values.
*Improves readability compared to long if...else if chains.

const marks = 85;

let Branch;

switch (true) {
    case marks >= 90:
        Branch = "Computer science engineering";
        break;
    case marks >= 80:
        Branch = "Mechanical engineering";
        break;
    case marks >= 70:
        Branch = "Chemical engineering";
        break;
    case marks >= 60:
        Branch = "Electronics and communication";
        break;
    case marks >= 50:
        Branch = "Civil engineering";
        break;
    default:
        Branch = "Bio technology";
        break;
}

console.log(`Student Branch name is : ${Branch}`);

output
Student Branch name is : Mechanical engineering

5. Using Ternary Operator ( ?: )
The ternary operator is a compact shorthand for an if...else statement. It is called “ternary” because it takes three operands:

*A condition to test.
*An expression to evaluate if the condition is true.
*An expression to evaluate if the condition is false.[TBD]

Syntax
condition ? expressionIfTrue : expressionIfFalse

let age = 21;

const result =
    (age >= 18) ? "You are eligible to vote."
        : "You are not eligible to vote.";

console.log(result);

output
You are eligible to vote.

SUMMARY

Reasons to Use Conditional Statements

Control Program Flow: Decide which code to execute based on different situations.

Make Decisions: React differently to user input, data values, or system states.

Enhance Interactivity: Enable dynamic behavior in apps and websites.

Handle Multiple Scenarios: Manage different outcomes or error handling paths.

Improve Code Flexibility: Write adaptable, reusable code that can respond to change.

Reference
https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/

Operators In Javascript.

Madhan Raj — Wed, 03 Jun 2026 06:31:54 +0000

Types in JavaScript Operators

*JS Arithmetic Operator
*JS Assignement Operator
*JS Relational Operator
*JS Conditional Operator
*JS Comparitional Operator
*JS Logical Operator

Operators are for Mathematical and Logical Computations

The Assignment Operator = assigns values

The Addition Operator + adds values

The Multiplication Operator * multiplies values

The Comparison Operator > compares values

Arithmetic operators perform arithmetic on numbers (literals or variables).

JavaScript Addition
JavaScript Addition

The Addition Operator (+) adds numbers:
Adding

let x = 5;
let y = 2;
let z = x + y;

Subtracting

The subtraction operator (-) subtracts numbers.
Example

let x = 5;
let y = 2;
let z = x - y;

JavaScript Multiplication

The Multiplication Operator () multiplies numbers:
**Multiplying*

let x = 5;
let y = 2;
let z = x * y;

Dividing

The division operator (/) divides numbers.
Example

let x = 5;
let y = 2;
let z = x / y;

JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.

Given that x = 10 and y = 5, the table below explains the assignment operators:

Logical Assignment Operators

The = Operator

The Simple Assignment Operator assigns a simple value to a variable.
Simple Assignment Examples

let x = 10;
let x = 10 + y;

The += Operator

The Addition Assignment Operator adds a value to a variable.
Addition Assignment Examples

let x = 10;
x += 5;

The -= Operator

The Subtraction Assignment Operator subtracts a value from a variable.
Subtraction Assignment Example

let x = 10;
x -= 5;

The *= Operator

The Multiplication Assignment Operator multiplies a variable.
Multiplication Assignment Example

let x = 10;
x *= 5;

The **= Operator

The Exponentiation Assignment Operator raises a variable to the power of the operand.
Exponentiation Assignment Example

let x = 10;
x **= 5;

The %= Operator

The Remainder Assignment Operator assigns a remainder to a variable.
Remainder Assignment Example

let x = 10;
x %= 5;

JavaScript Comparison

Comparison Operators

Comparison operators are used to compare two values.

Comparison operators always return true or false.

Given that x = 5, the table below explains the comparison operators:

JavaScript String Comparison

All the comparison operators above can also be used on strings:
Example

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

Comparing Different Types

Comparing data of different types may give unexpected results.

When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false.

Example

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}

JavaScript Conditionals

Conditional Statements

Conditional Statements allow us to perform different actions for different conditions.

Conditional statements run different code depending on true or false conditions.

Conditional statements include:

if
if...else
if...else if...else
switch
ternary (? :)

When to use Conditionals

*Use if to specify a code block to be executed, if a specified condition is true
*Use else to specify a code block to be executed, if the same condition is false
*Use else if to specify a new condition to test, if the first condition is false
*Use switch to specify many alternative code blocks to be executed
*Use (? :) (ternary) as a shorthand for if...else

The if Statement

Use if to specify a code block to be executed, if a specified condition is true.

Syntax
if (condition) {
  // code to execute if the condition is true
}

Conversion Types in JavaScript & JavaScript Type Coercion

Madhan Raj — Tue, 02 Jun 2026 08:19:31 +0000

JavaScript Type Conversion

*Converting Strings to Numbers
*Converting Numbers to Strings
*Converting Dates to Numbers
*Converting Numbers to Dates
*Converting Booleans to Numbers
*Converting Numbers to Booleans

JavaScript variables can be converted to a new variable and another data type:

By the use of a JavaScript function
Automatically by JavaScript itself

Converting Strings to Numbers

The global method Number() converts a variable (or a value) into a number.

A numeric string (like "3.14") converts to a number (like 3.14).

An empty string (like "") converts to 0.

A non numeric string (like "John") converts to NaN (Not a Number).
Converting Numbers to Strings

The global method String() can convert numbers to strings.

It can be used on any type of numbers, literals, variables, or expressions:
Example

String(x)         // returns a string from a number variable x
String(123)       // returns a string from a number literal 123
String(100 + 23)  // returns a string from a number from an expression

Converting Booleans to Numbers

The global method Number() can also convert booleans to numbers.
Number(false) // returns 0
Number(true) // returns 1

Converting Booleans to Strings

The global method String() can convert booleans to strings.
String(false) // returns "false"
String(true) // returns "true"

The Boolean method toString() does the same.

false.toString()   // returns "false"
true.toString()    // returns "true"

**Reasons to Learn JavaScript Type Conversion**

    Data Handling: In JavaScript when we are working with API responses, user inputs and calculations, these type of the operation require type conversion.
    Prevent Bugs: It is important to understand the type conversion which can help in preventing bugs which occurs when JavaScript implicitly converts value.
    Code Clarity: By performing the explicit conversion makes our code bug free and more clear.

JavaScript Type Coercion

Type Coercion

Type coercion is the automatic conversion of values from one data type to another.

Type coercion happens when you perform an operation on different data types, and the JavaScript engine tries to make them "fit" together.

Example

JavaScript coerces types differently per operator, so type coercion can hide bugs.

Program continues according to the coercion rules, but these may differ from what the programmer wanted to achieve.

let result1 = ('5' + '2'); // = 52
let result2 = ('5' - '2'); // = 3

Coercion is implicit (handled automatically by the engine), while type conversion is explicit (you manually use functions like Number() or String()).

Because JavaScript is weakly typed, it doesn't throw errors when types don't match; it just tries to coerce them.

String Coercion (+)

If any part of a + operation is a string, JavaScript converts everything to strings and concatenates them.

let x = "5" + 2 // x = "52"

Numeric Coercion

Other arithmetic operators (-, *, /, %) and the unary plus (+x) force values into numbers.

let x = "5" - 2 // x = 3

Boolean Coercion

Values are coerced to booleans in logical contexts like if statements or using the double-NOT operator (!!).

Falsy values: 0, "", null, undefined, NaN, and false.

Truthy values: Everything else (including empty objects {} and arrays []).

Microsoft Vs Linux

Madhan Raj — Fri, 29 May 2026 08:39:49 +0000

Linux and Windows are popular operating systems with different architecture, licensing, and usage scenarios. Knowing their differences helps users choose the best OS for performance, security, and usability.

Linux

Linux is a free and open-source operating system built on UNIX standards. It provides a stable programming interface, supports a wide range of applications, and allows users to access and modify its source code. Linux is developed collaboratively, which makes it free from proprietary restrictions and highly customizable.
Key Features of Linux:

Open-Source Nature: Unlike Windows, Linux distributions (distros) such as Ubuntu, Debian, Fedora, and Arch Linux offer full access to the source code, allowing users to modify and optimize their system.
Security & Stability: Linux is known for its robust security, providing built-in user privilege control, fewer vulnerabilities, and better protection against malware and viruses compared to Windows.
Lightweight & Efficient: Many Linux distributions, including Arch Linux and Linux Mint, are lightweight and optimized for performance, making them faster than Windows, especially on older hardware.
Diverse Software Support: The Linux ecosystem supports a vast range of applications, from open-source alternatives to proprietary software. Users can install programs using package managers like Pacman (Arch Linux), APT (Debian/Ubuntu), and DNF (Fedora).
Linux vs. Windows for Developers: Linux provides powerful tools, including terminal-based programming, shell scripting, and support for multiple programming languages, making it ideal for developers, DevOps engineers, and data scientists.
Linux Rolling Release Model: Distros like Arch Linux follow a rolling release model, ensuring users always have the latest updates without needing to install a new version.

Main Use of Linux

**Servers & Cloud Computing**: Linux dominates web servers, with distributions like CentOS, Ubuntu Server, and Debian powering most of the internet and enterprise cloud infrastructure.
**Cybersecurity & Ethical Hacking**: Tools like Kali Linux and Parrot OS make Linux the top choice for penetration testing, network security, and ethical hacking.
**Gaming on Linux**: With improvements like Steam Proton, Lutris, and Wine, gaming on Linux has significantly improved, allowing users to play Windows-based games with better compatibility.

Windows

Windows is a proprietary operating system developed by Microsoft. Its source code is not accessible to users, and it requires a paid license for usage. Windows is primarily designed for general users, businesses, and enterprises, focusing on ease of use through a graphical interface rather than programming flexibility.

Main use of Windows
Key Features of Windows

Graphical User Interface (GUI): A visually appealing and easy-to-use environment with Start Menu, Taskbar, and File Explorer.
Software Compatibility: Supports Microsoft Office, Adobe Suite, and a vast range of third-party applications that are not available on Linux.
Gaming Performance: Offers DirectX, high-end GPU driver support (NVIDIA, AMD), and compatibility with AAA games, making it the preferred choice for gamers.
Hardware Support: Works seamlessly with a wide range of printers, scanners, and USB peripherals without needing additional drivers.
Regular Updates: Receives security patches and feature updates through Windows Update, but major version upgrades require reinstallation (e.g., Windows 10 to Windows 11).

Personal Opinion
Comparing both of them I would prefer Linux because of Free to access multiple feature and has high efficiency for running the high end programs and games.
Choose Windows if you Prefer simple UI and easy to use and have colourful fancy icons and if you are ready to pay for addtional features.

Reference
https://www.geeksforgeeks.org/linux-unix/difference-between-linux-and-windows/

Positions Elements in CSS

Madhan Raj — Fri, 29 May 2026 06:37:00 +0000

CSS positioning is used to control the placement of elements on a web page. It allows elements to be positioned relative to the normal document flow, the browser window, or other elements.

*The position property defines how an element is positioned.
Common position values include static, relative, absolute, fixed, and sticky.
*Positioning works with properties like top, right, bottom, and left
*It helps create flexible layouts, overlays, and responsive designs.

Basically The Positioning in CSS is classified in 5types.

    1.Static Positioning
    2.Relative Positioning
    3.Absolute Positioning
    4.Fixed Positioning
    5.Sticky Positioning

1.Static Positioning

 Static is the default position of an element. It does not accept properties like top, left, right, or bottom.

<html>
<head>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
</body>
</html>

2.Relative Positioning

*Relative positioning places an element relative to its normal position. You can move it using top, left, right, or bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Link CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div>Box 1</div>
  <div class="relative">Box 2</div>

</body>
</html>

Box 2 is shifted 20px down and 30px to the right from its normal position.

3.Absolute Positioning

  *Absolute positioning removes the element from the document flow and places it relative to the nearest ancestor with a positioning context (relative, absolute, or fixed).

<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            border: 2px solid black;
            margin: 20px auto;
        }
        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Container with Relative Positioning</p>
        <div class="absolute">Absolutely Positioned Element</div>
    </div>
</body>
</html>

The fixed element stays at the top-right corner of the viewport even as the user scrolls.

4.Fixed Positioning

  *Fixed positioning removes the element from the flow and positions it relative to the viewport. It remains in place even when the page scrolls.

<html>
<head>
    <style>
        .fixed {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: lightgreen;
            padding: 20px;
            border: 2px solid black;
        }
        .content {
            height: 1200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Fixed Positioning Example</h2>
    <div class="fixed">Fixed Box</div>
    <div class="content">
        <p>Scroll down to see that the fixed box stays in place.</p>
        <p>This content simulates a long page.</p>
    </div>
</body>
</html>

The fixed element stays at the top-right corner of the viewport even as the user scrolls.

5.Sticky Positioning

    *Sticky positioning switches between relative and fixed based on the scroll position.

<html>
<head>
    <style>
        .sticky {
            position: sticky;
            top: 0;
            background-color: yellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="sticky">I am sticky</div>
    <p>Scroll down to see the effect.</p>
    <div style="height: 1000px;"></div>
</body>
</html>

*The sticky element stays at the top of the viewport as you scroll but only within its containing element.

Reference:https://www.geeksforgeeks.org/css/css-positioning-elements/

Comparison Between Github and GitLab

Madhan Raj — Fri, 22 May 2026 18:43:21 +0000

Version control systems are important tools for managing code changes and collaboration. GitLab and GitHub are two of the most popular platforms in this space. However, they have key differences that can influence which one is the best fit for your project. In this article, we will explore the differences between GitLab and GitHub, highlighting their features, benefits, and use cases.
GitLab

GitLab is a repository hosting manager tool developed by GitLab Inc and used for the software development process. It provides a variety of management by which we can streamline our collaborative workflow for completing the software development lifecycle. It also allows us to import the repository from Google Code, Bitbucket, etc.

Features of GitLab:

Open-source community edition repository management platform.
Easy Maintaining of a repository on a server.
Offers tools like Group Milestones, Time Tracking Issue Tracker, etc. for effective development.
More Spontaneous User interface and authentication features.
User Permission and Branch protection are enhanced.

GitHub

GitHub is a repository hosting service tool that features collaboration and access control. It is a platform for programmers to fix bugs together and host open-source projects. GitHub is designed for the developers and to help them track their changes into a project through the repository.

Features of GitHub:

Specifies milestones and labels to the projects.
Comparison view between branches is allowed.
GitHub Pages allows us to publish and host websites within GitHub.
Syntax highlight feature.
It allows third-party API integrations for bug tracking and cloud hosting.

Conclusion(Strictly My Opinion)
For an corporate and Team work The GitLab will be more suitable because of its Unlimted Collabrator opion and which will be in a limited amount in the Git
hub . The Main Advantage of the Gitlab is that it was an open source and it is highly suggested for teamwork in projects.
.

References:
https://www.geeksforgeeks.org/git/difference-between-gitlab-and-github

HTML for Beginners

Madhan Raj — Fri, 15 May 2026 05:38:52 +0000

The basic understandig of Html Document.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with and ends with .

The visible part of the HTML document is between

and .

The essential tags used in Html are in the below
Structural Tags


<!DOCTYPE html>
<html>
<head>
<title>
<body>

Text Tags


<h1> to <h6> :This tag used for the headings which is starts for H1 to h6
<p>: Defines a paragraph.
<br>: Inserts a single line break.
<hr>: It Creates a horizontal line to separate sections.
<img>: Embeds images.
<ul>: Starts an unordered with bulleted list.
<ol>: starts an ordered Numbers list.

Reference:https://www.w3schools.com/html/html_headings.asp