DEV Community: Kamalesh AR

Conditional Statements in Javascript

Kamalesh AR — Thu, 04 Jun 2026 06:03:37 +0000

Conditional statements in JavaScript direct the path of your code by executing different code blocks depending on whether a given condition evaluates to true or false. They allow programs to think, react, and make decisions dynamically based on user inputs or calculations.

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.

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

Types of Conditional Statements

if Statement
if-else Statement
else if Statement

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.

let x = 20;

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

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

Output:

Even

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

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

Real time examples and practices:

Today, I learned about Conditional Statements in JavaScript and how they help a program make decisions based on different conditions.

First, I tried a simple if...else statement to check if a student passes or fails according to their marks. This helped me understand how JavaScript runs different code depending on whether a condition is true or false.

After that, I practiced using else if statements to assign grades like A, B, or C based on marks. It was interesting to see how JavaScript can check multiple conditions and choose the correct result.

I also drew flowcharts for the examples I worked on. Making the flowcharts helped me understand the logic better and see how the program moves from one step to another before giving the output.

Overall, this was a good practice session. I got a better understanding of conditional statements, how decision-making works in JavaScript, and how flowcharts can make coding concepts easier to understand.

The above mentioned image is my written notes, i have practiced in my session with guidance of my trainer. I have learned about the conditional statement, how it works, where it works and how it runs the code. By using flow charts easy to understand and know to write a code

References
https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/
https://www.w3schools.com/js/js_conditionals.asp
Google

Understanding JavaScript Operators with Examples

Kamalesh AR — Wed, 03 Jun 2026 07:22:23 +0000

JavaScript operators are special symbols used to perform calculations, combine values, and make logical comparisons in your code. They act on values known as operands.

JavaScript has many operators that you can use to perform operations on values and variables (also called operands)

Based on the types of operations these JS operators perform, we can divide them up into seven groups:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Relational Operators

JavaScript operators are special symbols used to perform operations on variables and values. They are mainly categorized into Arithmetic Operators (calculations), Assignment Operators (assign values), Comparison Operators (compare values), Logical Operators (combine conditions), Increment/Decrement Operators (increase or decrease values), and the Ternary Operator (short form of if-else). Operators are essential for performing calculations, making decisions, and controlling the flow of a JavaScript program.

Arithmetic Operators

The arithmetic operators are used to perform mathematical operations like addition and subtraction.

These operators are frequently used with number data types, so they are similar to a calculator. The following example shows how you can use the + operator to add two variables together:

let x = 3;
let y = 8;

console.log(x + y); // 11

Here, the two variables x and y are added together using the plus + operator. We also used the console.log() method to print the result of the operation to the screen.

You can use operators directly on values without assigning them to any variable too:

console.log(2 + 1); // 3
console.log(4 + 1); // 5

Addition +
Subtraction -
Multiplication *
Division /
Remainder %
Exponentiation **
Increment ++
Decrement --

1. Addition operator

The addition operator + is used to add two or more numbers together. You've seen how this operator works previously, but here's another example:

console.log(7 + 2); // 9
console.log(2.3 + 1.5); // 3.8

You can use the addition operator on both integer and floating numbers.

2. Subtraction operator

The subtraction operator is marked by the minus sign − and you can use it to subtract the right operand from the left operand.

For example, here's how to subtract 3 from 5:

let x = 5;
let y = 3;

console.log(x - y); // 2

3. Multiplication operator

The multiplication operator is marked by the asterisk * symbol, and you use it to multiply the value on the left by the value on the right of the operator.

console.log(5 * 2); // 10
console.log(3 * 3); // 9

4. Division operator

The division operator / is used to divide the left operand by the right operand. Here are some examples of using the operator:

console.log(10 / 2); // 5
console.log(9 / 3); // 3

5. Remainder operator

The remainder operator % is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been performed.

A practical example should make this operator easier to understand, so let's see one:

console.log(10 % 3);
The number 10 can't be divided by 3 perfectly. The result of the division is 3 with a remainder of 1. The remainder operator simply returns that remainder number.

If the left operand can be divided with no remainder, then the operator returns 0.

This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1.

console.log(1 % 2); // 1
console.log(2 % 2); // 0
console.log(3 % 2); // 1
console.log(4 % 2); // 0

6. Exponentiation operator

The exponentiation operator is marked by two asterisks **. It's one of the newer JavaScript operators and you can use it to calculate the power of a number (based on its exponent).

For example, here's how to calculate 10 to the power of 3:

console.log(10 ** 3); // 1000

Here, the number 10 is multiplied by itself 3 times (10 10 10)

The exponentiation operator gives you an easy way to find the power of a specific number.

7. Increment operator

The increment ++ operator is used to increase the value of a number by one. For example:

let x = 5;

x++;

console.log(x); // 6

This operator gives you a faster way to increase a variable value by one. Without the operator, here's how you increment a variable:

let x = 5;

x = x + 1;

console.log(x); // 6

Using the increment operator allows you to shorten the second line. You can place this operator before or next to the variable you want to increment:

let x = 5;

// Place the operator next to the variable (postfix)
x++;

// Place the operator before the variable (prefix)
++x;

The difference between prefix (++x) and postfix (x++) increment operators is in the value they return. Prefix increments the variable first and then returns the updated value, whereas postfix returns the current value first and then increments the variable.

Consider the following example:

let x = 5;
let y = 5;

console.log(x++); // 5
console.log(x); // 6

console.log(++y); // 6
console.log(y); // 6

Here, you can see that placing the increment operator next to the variable will print the variable as if it has not been incremented.

When you place the operator before the variable, then the number will be incremented before calling the console.log() method.

8. Decrement operator

The decrement -- operator is used to decrease the value of a number by one. It's the opposite of the increment operator:

let x = 5;

x--;

console.log(x); // 4

Please note that you can only use increment and decrement operators on a variable. An error occurs when you try to use these operators directly on a number value:

console.log(5--);

Output:

Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

You can't use increment or decrement operator on a number directly.

Arithmetic operator Example:

let x = 5;

// addition operator
console.log("Addition: x + 3 = ", x + 3);

// subtraction operator
console.log("Subtraction: x - 3 =", x - 3);

// multiplication operator
console.log("Multiplication: x * 3 =", x * 3);

// division operator
console.log("Division: x / 3 =", x / 3);

// remainder operator
console.log("Remainder: x % 3 =", x % 3);

// increment operator
console.log("Increment: ++x =", ++x);

// decrement operator
console.log("Decrement: --x =", --x);

// exponentiation operator
console.log("Exponentiation: x ** 3 =", x ** 3);

Output:

Addition: x + 3 =  8
Subtraction: x - 3 = 2
Multiplication: x * 3 = 15
Division: x / 3 = 1.6666666666666667
Remainder: x % 3 = 2
Increment: ++x = 6
Decrement: --x = 5
Exponentiation: x ** 3 = 125

Assignment Operators

Assignment operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.

let n = 10;
n += 5;
n *= 2;
console.log(n);

= assigns a value to a variable.
+= adds and assigns the result to the variable.
*= multiplies and assigns the result to the variable.

Comparison Operators

As the name implies, comparison operators are used to compare one value or variable with something else. The operators in this category always return a boolean value: either true or false.

Example:

console.log(9 == 9); // true

console.log(9 != 20); // true

console.log(2 > 10); // false

console.log(2 < 10); // true

console.log(5 >= 10); // false

console.log(10 <= 10); // true

console.log("ABC" == "ABC"); // true

console.log("ABC" == "abc"); // false

console.log("Z" != "A"); // true

console.log("9" == 9); // true
// strict equal
console.log("9" === 9); // false

console.log("1" != 1); // false
// strict not equal
console.log("1" !== 1); // true

Logical Operators

Logical operators are used to check whether one or more expressions result in either true or false.

Logical operators are mainly used to perform the logical operations that determine the equality or difference between the values.

const a = true, b = false;
console.log(a && b); // Logical AND
console.log(a || b); // Logical OR

&& returns true if both operands are true.
|| returns true if at least one operand is true.
! negates the boolean value.

Relational Operators

JavaScript Relational operators are used to compare its operands and determine the relationship between them. They return a Boolean value (true or false) based on the comparison result.

const obj = { length: 10 };
console.log("length" in obj);
console.log([] instanceof Array);

in checks if a property exists in an object.
instanceof checks if an object is an instance of a constructor.

Task1:

let i = 5;
let j = 7;
let result = i++ - --j + ++j - i++;

Output:

7 7 0

explanation:

5 - 6 + 7 - 6
12 - 12
0

References:

https://www.freecodecamp.org/news/javascript-operators/
https://www.programiz.com/javascript/operators
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators

Type Conversion and type casting of javascript

Kamalesh AR — Tue, 02 Jun 2026 10:51:25 +0000

Typecasting in JavaScript is the conversion of one data type into another data type, for example, a number to a string. Typecasting is often also known as type conversion.

In JavaScript Type Conversion can be defined as converting the data type of the variables from one type to the other manually by the programmer(explicitly) or automatically by the JavaScript(implicitly).

Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically by the JavaScript.
Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the function Number(), String(), and Boolean().

What is data type?

JavaScript has 8 main data types:

String
Number
Boolean
Null
Undefined
Bigint
Symbol
Object

The object can be divided into more data types or to be more precise there are data types that are also objects:

Array
Object
Date

JavaScript is a dynamic language with dynamic data types because variable types are defined the moment they are assigned the value. Check out my post to learn more about data types if you don't have prior knowledge.
There are two types of typecasting - implicit typecasting and explicit typecasting.

Implicit Type Conversion (Coercion)

In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

For example:

let age = "25"; // String

let numAge = Number(age); // Convert string to number

console.log(numAge);
console.log(typeof numAge);

Output;

25
number

String with Number (Concatenation)

When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.

let a = "10";
let b = 5;

console.log(a + b);

O/P:
105

let a = "10";
let b = 5;

console.log(a - b);

O/P:
5

Boolean to Number

When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.

let res = true + 1;  
console.log(res);

O/P:
2

Equality Comparison (==)

When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.

let res = (5 == "5");  
console.log(res);

O/P:
true

Explicit Type Conversion

In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.

For example:

let x = "10";

console.log(Number(x));

Output:

This is called explicit conversion

Today my task:

let i = 10;
let j = "5";
console.log(i + j);

Expected O/P:
15

Solution:

In your code, JavaScript performs type coercion, automatically converting the number 10 into a string before adding it to "5". This results in string concatenation ("105"), not mathematical addition.To achieve the expected output of 15, convert the string to a number using the Number() function or the parseInt() method:

let i = 10;
let j = "5";
console.log(i + Number(j));

O/P:
15

Type Conversion Notes

In JavaScript, sometimes values are stored as strings even though they represent numbers. For example, let j = "5"; stores the value 5 as a string, not as a number. When we use the + operator between a number and a string, JavaScript treats it as string concatenation instead of addition. For example, 10 + "5" produces "105" because JavaScript converts the number 10 into a string and joins the two values together. To perform mathematical addition, both values must be numbers. Therefore, we use Number() to convert the string into a number manually. For example, let i = 10; let j = "5"; console.log(i + Number(j)); converts "5" to 5, and then JavaScript performs numeric addition, resulting in 15. This process is called Explicit Type Conversion or Type Casting because the programmer explicitly converts one data type into another. Type conversion is commonly used when working with user inputs, form data, APIs, or any data source where numbers are received as strings but need to be used in calculations.

References
https://www.geeksforgeeks.org/javascript/javascript-type-conversion/
https://www.w3schools.com/js/js_type_coercion.asp
https://medium.com/@catherineisonline/type-casting-in-javascript-1c2c30d88ae5

Beginning My JavaScript Journey After HTML & CSS

Kamalesh AR — Mon, 01 Jun 2026 16:43:51 +0000

Today we have started a topic of coverage in javascript after using HTML & CSS, how js is collaborate with this concept and how it works. What are the advantages and disadvantages are going to happen in using javascript. That was our goal to learn, practice and works in realtime of javascript.And i will share my notes and learning in upcoming blogs..

Short info
JavaScript was created in 1995 by Brendan Eich while working at Netscape Communications. Remarkably, it was developed in just 10 days. It was initially named Mocha, then LiveScript, and finally renamed JavaScript.

JavaScript is one of the core technologies of web development, alongside HTML and CSS. It was developed in 1995 to add interactivity and dynamic behavior to websites, making modern web applications possible.

JavaScript

JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.

Client Side: On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.
Server Side: On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, garbage-collected, dynamic language, supporting multiple paradigms such as imperative, functional, and object-oriented.

JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for...in and Object utilities), and source-code recovery (JavaScript functions store their source text and can be retrieved through toString()).

This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. For information about APIs that are specific to Web pages, please see Web APIs and DOM.

The standards for JavaScript are the ECMAScript Language Specification (ECMA-262) and the ECMAScript Internationalization API specification (ECMA-402). As soon as one browser implements a feature, we try to document it. This means that cases where some proposals for new ECMAScript features have already been implemented in browsers, documentation and examples in MDN articles may use some of those new features. Most of the time, this happens between the stages 3 and 4, and is usually before the spec is officially published.

Do not confuse JavaScript with the Java programming language — JavaScript is not "Interpreted Java". Both "Java" and "JavaScript" are trademarks or registered trademarks of Oracle in the U.S. and other countries. However, the two programming languages have very different syntax, semantics, and use.

Why learn javascript

Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
Highly in demand, offering many job opportunities in Frontend, Backend (Node.js), and Full Stack Development.
Supports powerful frameworks and libraries like React, Angular, Vue.js, Node.js, and Express.js, widely used in modern web applications.
Object-oriented and event-driven language, ideal for building scalable and responsive applications.
Cross-platform and runs directly in all modern web browsers without the need for installation.
Major companies like Google, Facebook, and Amazon use JavaScript in their tech stacks.

Javascript Data types

JavaScript data types define what kind of values a variable can hold and how those values behave in a program. They determine how data is stored in memory and how operations like comparison, calculation, and conversion work.

Each data type has its own methods and operations that control how it can be used.
Understanding data types helps prevent errors and makes code more efficient and reliable.

Primitive Data Type

Primitive data types in JavaScript represent simple, immutable values stored directly in memory, ensuring efficiency in both memory usage and performance.

Non-Primitive Data Types

The data types that are derived from primitive data types are known as non-primitive data types. It is also known as derived data types or reference data types.

Libraries of javascript

Libraries provide pre-built solutions for common tasks. Developers can use these functions instead of writing code from scratch, saving valuable time. Here are a few popular libraries of JavaScript.

Frontend Libraries: React, Preact, Lodash, Moment.js, jQuery, Axios
Backend Libraries:Socket.io, JWT, Bcrypt, Passport.js, CORS

Frameworks of javascript

Frameworks, offer a comprehensive structure for building applications. Here are a few popular frameworks of JavaScript.

Frontend Frameworks:Vue.js, Angular, Next.js, Nuxt.js, Gatsby, Remix
Backend Frameworks:Express.js, NestJS, Koa.js, Sails.js, Fastify
FullStack FrameWorks:Meteor.js, Next.js, Nuxt.js, RedwoodJS

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.geeksforgeeks.org/javascript/javascript-data-types/
https://www.w3schools.com/js/js_intro.asp
https://www.geeksforgeeks.org/javascript/javascript-tutorial/

Registration form using HTML and CSS

Kamalesh AR — Thu, 28 May 2026 17:59:53 +0000

Student Registration Form Using HTML & CSS

Today I practiced creating a Student Registration Form using only HTML and CSS. This project helped me understand how forms work in web development and how to design a clean user interface using different input elements and styling techniques.

While building this form, I learned how to use:

Text input fields
Radio buttons
Checkboxes
Date input
File upload option
Textarea
Dropdown menus
Submit button
Form alignment using CSS

The form includes important student details such as:

First Name and Last Name
Email Address
Gender Selection
Mobile Number
Date of Birth
Subjects
Hobbies
Picture Upload
Current Address
State and City Selection

I also practiced CSS concepts like:

Spacing and alignment
Border styling
Input box design
Font styling
Button styling
Layout arrangement

One of the interesting parts of this project was learning how different HTML form elements work together in a real-world registration form. I understood the importance of user-friendly design and proper form structure.

This small project improved my confidence in HTML and CSS basics. Step by step, I am understanding how websites are designed and how frontend development works.

Even though it is a beginner-level project, creating this form gave me practical experience and helped me learn by doing. I will continue practicing more projects to improve my frontend development skills.

HTML code of form

<body>
    <header>Student Registration Form</header>
    <main>
        <hr>
        <form action="">
            <div class="name">
            <label for="fname">Name</label>
            <input id="fname" type="text" placeholder="First Name">
            <input id="lname" type="text" placeholder="Last Name">
            </div>

            <div class="email">
                <label for="Email">Email</label>
                <input id="Email" type="text" placeholder="name@eg.com">
            </div>

            <div class="gender">
                <label for="gender">Gender</label>
                <input id="gender" type="radio" name="gender" value="Male">Male
                <input id="gender2" type="radio" name="gender" value="Female">Female
                <input id="gender3" type="radio" name="gender" value="Others">Others

            </div>
            <div class="mobile">
                <label for="Mobile">Mobile(10 digits)</label>
                <input id="Mobile" type="text" placeholder="Mobile Number">
            </div>
            <div class="DOB">
                <label for="Dob">Date of Birth</label>
                <input id="Dob" type="date" value="2026-05-28">
            </div>
            <div class="sub">
                <label for="sub">Subjects</label>
                <input id="sub" type="text">
            </div>
            <div class="Hob">
                <label for="Hobbies">Hobbies</label>
                <input id="Hobbies" type="checkbox" value="Sports">Sports
                <input id="Hobbies2" type="checkbox" value="Reading">Reading
                <input id="Hobbies3" type="checkbox" value="Music">Music
            </div>
            <div class="pics">
                <label for="Pics">Picture</label>
                <input id="Pics" type="file">
            </div>
            <div class="add">
                <label for="cadd">Current Address</label>
                <textarea name="" id="cadd">Current Address</textarea>

            </div>
            <div class="state">
                <label for="">State and City</label>
                <select name="state" id="state">
                    <option value="Select state">Select state</option>
                    <option value="Tamilnadu">Tamilnadu</option>
                    <option value="Kerala">Kerala</option>
                    <option value="Karanataka">Karanataka</option>
                    <option value="Andra Pradesh">Andra Pradesh</option>
                </select>
                <select name="City" id="City">
                    <option value="Select city">Select city</option>
                    <option value="">Chennai</option>
                    <option value="">Trichy</option>
                    <option value="">Madurai</option>
                    <option value="">Thanjavur</option>
                </select>
            </div>
            <button type="submit">Submit</button>

        </form>
    </main>
</body>

CSS code of form

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header{
            font-size: 25px;
            width: 55vw;  
            padding: 25px 0;
        }
        body {
            /* border: 1px solid; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: ;
            /* height: 80vh; */
            /* gap: 20px; */

        }
        body main form{
            width: 55vw;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        /* form {
            display: flex;
            flex-direction: column; 
            /* gap: 30px; }
            */

        label {
            width: 25%;
            display: inline-block;
        }

        input {
            font-size: 18px;
            padding: 4px;
            border-radius: 6px;
            border: 1px solid rgb(175,175,175);


        }
        #fname {
            margin-right: 80px;
            width: 30%;
        }
        #lname {
            width: 30%;

        }
        #Email{
            width: 70%;
        }
        #Mobile {
            width: 70%;
        }

        #Dob {
            width: 25%;
        }

        #gender,#gender2,#gender3{
            margin-right: 7px;

        }
        #gender2,#gender3{
            margin-left: 10px;
        }
       #sub {
        width: 70%;
       }

        #Hobbies,#Hobbies2,#Hobbies3{

            margin-right: 7px;

        }
        #Hobbies2,#Hobbies3{

            margin-left: 10px;
        }
       #Pics {
        width: 70%;
        padding: 0;
       }
       #cadd {
        width: 70%;
        height: 120px;
        border-radius: 6px;
       }
       .add {
        display: flex;
        align-items: center;
       }
       #state{
        width: 30%;
        padding: 7px;
        margin-right: 20px;
        font-size: 18px;
        border-radius: 6px;
       }
       #City{
        width: 30%;
        padding: 7px;
        font-size: 18px;
        border-radius: 6px;
       }

       hr{
        width: 95%;
        margin-bottom: 20px;
       }
       #Pics::file-selector-button{
        border: none;
        border-right: 1px solid;
        background-color: rgb(226, 224, 224);
        height: 40px;
       }

        button {
            background-color:#007bff;
            color: white;
            border-radius: 4px;
            font-size: 15px;
            padding: 11px ;
            width: 5vw;
            margin-left: 75%;
            /* border: none; */
            /* cursor: pointer; */
        }
        button:hover{
            background-color:#1f69b8;

        }

    </style>

Output of the Form

Conclusion

Today’s learning was very useful for me because I created a complete student registration form from scratch using HTML and CSS. Before this, I only knew basic tags, but now I understand how forms are designed in real websites. While doing this project, I faced small challenges in alignment and styling, but solving them helped me learn better. This practice made me more interested in web development, and I feel motivated to create more projects in the future.

Media queries in Css

Kamalesh AR — Wed, 27 May 2026 18:13:08 +0000

Media Queries

A CSS media query is used to apply different styles based on the device's characteristics like screen size, orientation, or resolution. This makes your website responsive, ensuring it looks good on all devices, including desktops, tablets, and smartphones. Media queries are key for creating a mobile-friendly and responsive design.

Media queries can be used to check many things like the following

Width and height of the viewport
Width and height of the device
Orientation
Resolution

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.

CSS media queries are essential for creating responsive web pages.

The CSS @media rule is used to add media queries to your style sheet.

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

Media Query Syntax

A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) { /* CSS rules to apply */ }

The media-type is optional. However, if you use not, you must also specify a media-type.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.

Meaning of the not and and keywords:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

How Do Media Queries Work?

A media query consists of a media type (like screen, print) and conditions (like screen width or orientation). If the conditions are true, the specified styles will be applied. You use the @media rule in your CSS to define these conditions.

@media not | only mediatype and (expression)
{
    // Code content
}

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.

Media types define the broad category of device for which the media query applies: all, print, screen.

The type is optional (assumed to be all) except when using the only logical operator.

Media features describe a specific characteristic of the user agent, output device, or environment:

Targeting media types

Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers

@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

Targeting media features

Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

@media (hover: hover) {
  /* … */
}

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media (max-width: 1000px) {
  /* … */
}

CSS Media Types

The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".

Valu------> Description
all----> Used for all media type devices
print---> Used for print preview mode
screen---> Used for computer screens, tablets, and smart-phones

CSS Media Features

The media feature specifies a specific characteristic of the device.

Here are some commonly used media features:

max-height-->Maximum height of the viewport
min-height-->Minimum height of the viewport
height--->Height of the viewport (including scrollbar)
max-width--->Maximum width of the viewport
min-width--->Minimum width of the viewport
width------>Width of the viewport (including scrollbar)
orientation--->Orientation of the viewport (landscape or portrait)
resolution Screen resolution
prefers-color--->User's preferred color scheme (light or dark)
-scheme

Real time example convo

Here i saw this in the stack overflow developer community discussion.he asked a question about this concept and how to use this property in real time project. So shared that convo and solutions to.

Question:

I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand

my queries requirement is

if screen width is 100 to 480 then different style comes,

if screen width 481 to 600 then different style comes,

if screen width 601 to 800 then different style comes,

if screen width 801 then default CSS should work.

Solution:
1.

.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}

The basic relies on using this kind of queries:

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}

Please remember that when using responsive web design you should use percentages when possible also em for fonts.

media queries are now available for IE. take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them. A polyfil I been using with good results is response.js

From this i learned a new one that is can i use website.Can I Use is an important tool for frontend developers to check browser compatibility for web technologies. It ensures websites work correctly across different browsers and devices, helping developers create responsive and reliable web applications.

Above image is the website of caniuse, i mentioned the website link in the above solution of that shared from stack overflow discussion.

References by
1.https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using

2.https://www.w3schools.com/css/css3_mediaqueries.asp

3.https://www.geeksforgeeks.org/css/css3-media-query-for-all-devices/

4.https://caniuse.com/css-mediaqueries

Selectors and its uses in HTML & CSS

Kamalesh AR — Tue, 26 May 2026 17:07:15 +0000

Today i had Task to learn about the selectors using in HTML&CSS, how to use why it used to style. By using the selectors, what is benefits and what happens while using the selectors.

Selectors

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should have the CSS property values inside the rule applied to them. The element or elements selected by the selector are referred to as the subject of the selector.

In earlier articles, you met various selectors and learned that there are selectors that target the document in different ways; for example, by selecting an element such as h1, or a class such as .special. Let's start by recapping the main ones you've already seen.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules.

Used to select HTML elements based on tag name, class, id, or attributes.
Help apply styles like color, font, spacing, and layout.
Make web pages structured, consistent, and visually appealing.

Types of selectors

1. Simple selectors

Basic selectors in CSS are simple tools used for selecting by HTML element name (e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).

Universal selector(*):
Selects all elements on the page and applies the same style universally.

Example: Setting the font color for every element.


    <style>
        * {
            color: red;
        }
    </style>

Element selector:
Targets all elements of a specific type, such as paragraphs or headers.

Example: Setting a common font size for all paragraphs

   <style>
        p {
            font-size: 16px;
        }
    </style>

Class selector(.):
Applies styles to elements with a specific class attribute.

Example: Making all buttons have a blue background.

   <style>
        .button {
            background-color: blue;
            color: white;
        }
    </style>

ID selector(#):
Styles a single element identified by its unique id.

Example: changing the background color of a header.

   <style>
        #header {
            background-color: gray;
        }
    </style>

2. Combination selectors(TBD)

Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document. Common combinators include descendant ( ), child (>), adjacent sibling (+), and general sibling (~).

Descendant Selectors:
Targets an element inside another, such as paragraphs inside div .

Example: Styling paragraphs inside a div.(TBD)

  <style>
        div p {
            color: red;
        }
    </style>

Child Selector (>):
They only affects the direct child elements of a parent.

Example: Styling direct children paragraphs of a div.(TBD)

 <style>
        div>p {
            margin-left: 20px;
        }
  </style>

Adjacent Sibling Selector (+):
Styles an element immediately following another .

Example: Making the first paragraph bold after an h1.(TBD)

    <style>
        h1+p {
            font-weight: bold;
        }
    </style>

General Sibling Selector (~):
Styles all siblings that follow a specific element.

Example: Italicizing all paragraphs following an h1.

   <style>
        h1~p {
            font-style: italic;
        }
    </style>

Attribute selector(TBD)

Attribute selectors in CSS target elements based on the presence or value of their attributes.

Presence Selector:
It selects elements that contain a specific attribute.

Example: styling all inputs with a type attribute.

    <style>
        input[type] {
            border: 2px solid black;
        }
    </style>

Attribute Value Selector:
It targets elements with a particular attribute value.

Example: Styling text inputs.

   <style>
        input[type="text"] {
            background-color: yellow;
        }
    </style>

Substring Matching(^=):
It matches elements where the attribute contains a substring.

Example: Styling links with https in their href.

   <style>
        a[href^="https"] {
            color: green;
        }
    </style>

3. Pseudo-Classes(TBD)

Pseudo-classes in CSS define the special states of elements for styling.

:hover:
Styles elements when the user hovers over them.

Example: Changing the color of a link when hovered.

   <style>
        a:hover {
            color: red;
        }
    </style>

:focus:
Styles the elements when the user focus on any particular element.

   <style>
        input:focus {
            outline: 3px solid red;
        }
    </style>

Pseudo-Elements(TBD)

Pseudo-elements allow you to target and style specific parts of an element, such as inserting content before or after it.

They can be used to style parts of text, like the first letter or line of a paragraph.
Pseudo-elements are commonly used to enhance and beautify the internal content of elements.

::before:
To insert some content before an element.

<style>
    h1::before {
        content: "★ "
    }
</style>

::after:
To insert some content after an element.

<style>
    h1::after {
        content: "☀ ";
        color: orangered;
    }
</style>

::first-line:
Styles the first line of text within a block element. Line breaks mark the beginning of a new line.

<style>
    p::first-line {
        color: red;
    }
</style>

::placeholder:
Styles the placeholder of a specific input field.

<style>
    input::placeholder {
        font-size: 20x;
        font-family: sans-serif;
        font-weight: 900;
    }
</style>

References
1.https://www.geeksforgeeks.org/css/css-selectors/
2.https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
3.https://www.w3schools.com/css/css_selectors.asp
4.https://mimo.org/glossary/css/selectors

Stack Overflow: A Powerful Community for Developers and Learners

Kamalesh AR — Mon, 25 May 2026 15:57:10 +0000

Stackoverflow

Today I explored Stack Overflow, one of the largest and most helpful online communities for developers. As someone who is learning programming and technology, I found this platform very useful and inspiring.

Stack Overflow is a question-and-answer platform where developers from around the world help each other solve coding problems. Whether someone is a beginner or an experienced software engineer, they can ask technical questions and receive answers from the community. The platform covers many technologies such as Python, Java, C++, HTML, CSS, JavaScript, SQL, Linux, Artificial Intelligence, Data Science, and more.

One of the most interesting things about Stack Overflow is its community-driven learning system. Developers share their knowledge, explain concepts, provide code examples, and help others understand programming in a practical way. Many common coding errors and technical issues already have detailed solutions available on the platform, which saves a lot of time for learners and professionals.

As a beginner, I realized that Stack Overflow is not just a website for fixing errors. It is also a place to improve problem-solving skills, learn best coding practices, and understand real-world development challenges. By reading questions and answers from experienced developers, learners can gain deeper technical knowledge and improve their thinking process.

Another important feature is the voting and reputation system. Helpful answers receive upvotes from the community, which helps users identify the best and most trusted solutions. Developers who actively help others can earn reputation points and badges, encouraging knowledge sharing and collaboration.

I also understood that many developers use Stack Overflow daily while working on projects. When they face bugs, syntax errors, installation problems, or technical confusion, they search Stack Overflow to find explanations and working solutions. This makes the platform an essential learning resource in the software development world.

For students and beginners like me, Stack Overflow can become a great companion during the learning journey. It helps improve coding confidence, exposes learners to real technical discussions, and teaches how to ask clear and meaningful technical questions.

Overall, my first experience exploring Stack Overflow was very positive. I believe this platform will help me grow as a developer, strengthen my programming knowledge, and support me whenever I face coding challenges in the future.

Till now, I thought developers solved coding problems individually, but after learning about Stack Overflow, I understood how developers around the world help each other through a strong online community. It was surprising to see how one platform can connect millions of programmers to share knowledge, solve errors, and support learning. I realized that even beginners can learn many things by reading discussions and solutions from experienced developers. This experience motivated me to explore more technologies and become part of the developer community in the future.

Tamil linux community

And also I learned about the Tamil Linux Community, a wonderful technology community that promotes Linux and open-source software among Tamil-speaking people. I found this community very inspiring because it helps students, beginners, and technology enthusiasts learn Linux in their native language.

The Tamil Linux Community focuses on spreading awareness about free and open-source software. It encourages people to explore Linux operating systems, understand open-source technologies, and improve their technical skills through community learning. The community supports learners by conducting discussions, workshops, technical events, and knowledge-sharing sessions.

One of the most interesting things about this community is that complex technical concepts are explained in Tamil, which makes learning easier and more comfortable for many people. Beginners who are new to Linux can learn important topics such as Linux installation, command-line usage, system administration basics, open-source tools, and software development concepts.

Linux is widely used in the technology industry because it is secure, powerful, customizable, and open source. Many developers, cloud engineers, cybersecurity professionals, and system administrators use Linux in their daily work. Through the Tamil Linux Community, learners can gain practical knowledge about Linux and understand how open-source communities work together to improve technology.

I also understood that this community is not only about learning technology but also about collaboration and helping others grow. Experienced members guide beginners, answer questions, and encourage people to continue learning. This creates a positive environment where knowledge is shared freely among everyone.

Learning about the Tamil Linux Community motivated me to explore Linux more deeply and improve my technical knowledge. I believe communities like this play an important role in making technology education accessible to everyone and encouraging more people to participate in the open-source world.

Till now, I did not know that communities like this existed worldwide. After learning about the Tamil Linux Community, I understood how people from different places come together to share knowledge, help beginners, and support open-source learning. It made me feel inspired because technology is not only about coding and computers, but also about helping others learn and grow together. I am happy to know that there are communities that teach and support people in their own language, making technology easier and more accessible for everyone.

Reference

Stackoverflow
https://stackoverflow.com/

Tamil linux community
https://forums.tamillinuxcommunity.org/

Gitlab and its basic commands

Kamalesh AR — Thu, 21 May 2026 16:29:17 +0000

Today i learned about the gitlab installation and how to upload the projects. And i learn their commands to how add the project by terminal, and it has commands like git add, git commit-m, git push, git status, git clone, git log.

Gitlab commands

git status : Shows which files are modified or staged.
git add . : Adds all changes in the current directory to staging.
git commit-m : Saves your staged changes with a descriptive message.
git clone : Downloads a project from GitLab to your computer.
git push : Uploads your local commits to the GitLab server.
git pull : Downloads latest changes from GitLab and merges them.
git log : To see the history.

Information about Git, Gitlab and Github

Kamalesh AR — Wed, 20 May 2026 15:38:19 +0000

What is git

Git is a distributed version control system that helps track and manage changes in code over time. It allows multiple developers to work on the same project, view previous versions, and restore changes when needed.
Git is a free, open-source version control system designed to track changes in computer files and coordinate work among multiple people on a single project. It is primarily used for software development, but it can be used to track changes in any set of files.

Repository (Repo): A central folder where Git tracks your project and its entire history.
Commit: A saved "snapshot" of your project. Each commit records what changed, when, and by whom.
Branching: Allows you to create a separate "branch" to work on a new feature or fix a bug without affecting the main codebase.
Merging: The process of combining changes from one branch back into another (usually the main branch).

What is gitlab

GitLab is a web-based DevOps platform that enables teams to manage the entire software development lifecycle in a single application. It combines version control with built-in tools for automation, collaboration, and deployment.

Provides Git-based repository hosting similar to GitHub.
Includes built-in CI/CD pipelines for automated testing and deployment.
Supports code review, issue tracking, and project management in one place.

What is github

GitHub is a web-based platform that stores Git repositories in the cloud, allowing developers to work together on projects. It helps manage code changes and supports both public and private repositories. GitHub is widely used for version control and collaboration in software development.

GitHub allows developers to collaborate on projects, track changes, and maintain a history of all code versions. It is particularly popular in the open-source community and is widely used by individual developers, teams, and large organizations to develop software.

Difference between gitlab and github

Refered by
https://www.geeksforgeeks.org/devops/gitlab/
https://www.geeksforgeeks.org/git/what-is-github/

HTML and CSS for website

Kamalesh AR — Tue, 19 May 2026 15:49:58 +0000

Today i have learned some new tags like input, button and also a semantic tag main and then some new styles hover, font-family to create a facebook login page.

Input tag

The input tag is most essential element for creating interactive forms in HTML. it is used to collect the data from the users and we can create many forms from simple text boxes to clickable buttons depending on its type attribute.

Core Attributes

Type: Determines what kind of data the field accepts (eg: Text, Checkbox, Password).
name: Act as the unique identifier for the data of the form.
Value: Sets the initial content or default value of the field.
Placeholder: Provides a short hint about the expected input.
Required: A boolean attribute that forces the user to fill out the field before submitting.

Button

Button tag in HTML used to create a clickable buttons that can triger actions like submitting forms, resetting inputs, or running javascript functions.

Unlike the element, the tag is more flexible because it can contain nested content like text, images, or icons.
Basic Syntax: To create a simple button, wrap your desired label between the opening and closing tags.

Main tag

The tag in HTML is a semantic element used to identify the primary, central content of a web page.
It tells the browsers, search engines, and screen reader exactly where the main content of your page begins.
Separating it from repetitive elements like menus and footer.
Unique content: The main element should only contain information that is unique to that specific page.

Hover

The :hover pseudo-class in CSS is used to select and style an element when a user moves their mouse pointer over it.
It is a fundamental tool for adding interactivity, such as changing button colors, underlining links, or revealing hidden contents.
Basic Syntax: To use hover, append :hover to the selector you want to style.

Font-family

In CSS, the font-family property is used to define the font of the text for an element.
It allows you to prioritized list of fonts, commonly referred to as a font stack.
prioritized list: browsers read the list from left to right. it will use the first font if it's installed or available. if not, it tries the next one.
Fallback System: you should always end your list with a generic family name to ensure the browser has a final, guaranteed option if no specific fonts are found.

HTML and CSS Question/Answer

Kamalesh AR — Tue, 19 May 2026 15:28:18 +0000

What is the purpose of box-sizing: border-box in your project?

Box-sizing: border-box forces the browser to include an element's padding and border within its specified width and height. It stops elements from unexpectedly expanding when you add padding, making layout math predictable and preventing elements from breaking out of their containers.

How does grid-template-columns: 2fr 1fr work?

The CSS property grid-template-columns: 2fr 1fr; creates a two-column grid where the first column is twice as wide as the second.
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

What is the difference between semantic tags like `<main>` and `<footer>` versus normal tags?

Semantic tags (e.g., <main>, <footer>, <article>) and normal

tags both group elements, but semantic tags clearly describe their meaning to both the browser and the developer. tags are "dividers" with no inherent meaning, whereas semantic tags provide context about the content inside them.

Why is vh used instead of px?

vh (Viewport Height) is used instead of px (pixels) to create dynamic, responsive layouts. VW, and VH are mostly used for margins, padding, spacing, and widths/heights. To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.

Difference between padding and margin?

Padding is the space inside the border (between content and border), while margin is the space outside the border (between the element and its neighbors).

Difference between Grid and Flexbox?

CSS Grid and Flexbox are both CSS layout modules, but they are designed for fundamentally different tasks.

GRID LAYOUT:
CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.

FLEXBOX:
The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;.

What are self-closing tags?

Self-closing tags are HTML elements that only require a single tag because they cannot hold text or nested elements. It is also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and concise.

What is the purpose of the meta viewport tag?

This tells the browser to set the width of the viewport to the width of the device and to display the page at its original zoom level. The viewport value for the name attribute of a element gives hints about how the viewport should be sized. If specified, you define viewport-related behaviors using a content attribute in the element as a comma-separated list of one or more values.

References:
developer.mozilla - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
geeksforgeeks - https://www.geeksforgeeks.org/html/what-are-self-closing-tags-in-html/

DEV Community: Kamalesh AR

Conditional Statements in Javascript

Types of Conditional Statements

Understanding JavaScript Operators with Examples

Arithmetic Operators

References:

Type Conversion and type casting of javascript

What is data type?

Implicit Type Conversion (Coercion)

String with Number (Concatenation)

Boolean to Number

Equality Comparison (==)

Explicit Type Conversion

Type Conversion Notes

Beginning My JavaScript Journey After HTML & CSS

JavaScript

Why learn javascript

Javascript Data types

Primitive Data Type

Non-Primitive Data Types

Libraries of javascript

Frameworks of javascript

Registration form using HTML and CSS

Student Registration Form Using HTML & CSS

Conclusion

Media queries in Css

Media Queries

Media Query Syntax

How Do Media Queries Work?

Targeting media types

Targeting media features

CSS Media Types

CSS Media Features

Selectors and its uses in HTML & CSS

Selectors

Types of selectors

Stack Overflow: A Powerful Community for Developers and Learners

Gitlab and its basic commands

Gitlab commands

Information about Git, Gitlab and Github

What is git

What is gitlab

What is github

Difference between gitlab and github

HTML and CSS for website

Input tag

Core Attributes

Button

Main tag

Hover

Font-family

HTML and CSS Question/Answer

What is the purpose of box-sizing: border-box in your project?

How does grid-template-columns: 2fr 1fr work?

What is the difference between semantic tags like <main> and <footer> versus normal tags?

Why is vh used instead of px?

Difference between padding and margin?

Difference between Grid and Flexbox?

What are self-closing tags?

What is the purpose of the meta viewport tag?

What is the difference between semantic tags like `<main>` and `<footer>` versus normal tags?