DEV Community: Narmatha

CONDITION STATEMENT IN JAVASCRIPT

Narmatha — Tue, 01 Sep 2026 16:02:28 +0000

CONDITION STATEMENT IN JAVASCRIPT

A conditional statement in JavaScript is a programming statement that is used to make decisions in a program based on whether a particular condition is true or false. It allows the program to control the flow of execution by checking a condition and then executing a specific block of code depending on the result of that condition.

IF STATEMENT:

The if statement is a conditional statement used to execute a block of code only when a specified condition is true.

Syntax

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

EXAMPLE

let age = 20;

if (age >= 18) { console.log("You are an adult"); }

IF ELSE STATEMENT:

The if...else statement in JavaScript is a conditional statement that is used to execute one block of code if a condition is true and another block of code if the condition is false.

Syntax:

`if (condition) {
// code if condition is true
} else {
// code if condition is false
}

EXAMPLE

`let age = 16;

if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}`

LOOP IN JAVASCRIPT

Narmatha — Tue, 01 Sep 2026 15:47:43 +0000

For Loop in JavaScript

A for loop in JavaScript is used to execute a block of code repeatedly as long as a given condition is true.

Instead of writing the same code many times, we can use a loop to repeat it automatically.

for (initialization; condition; increment/decrement) { // code to be executed }

for loop has three important parts:

1.Initialization – Runs only once at the beginning.
2.Condition – Checked before every iteration. If it is true, the loop runs.
3.Increment/Decrement – Changes the value after each iteration.

While loop in javascript

A while loop is used when you want to repeatedly execute a block of code as long as a condition is true.

Check condition → Execute code → Update something → Check again

1. Basic syntax

while (condition) { // code to execute }

for example

`let i = 1;

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

output

1
2
3
4
5

Primitive data types in javascript

Narmatha — Wed, 26 Aug 2026 08:02:53 +0000

PRIMITIVE DATA TYPES IN JAVASCRIPT

JavaScript has seven primitive data types: String, Number, BigInt, Boolean, Undefined, Null, and Symbol.Primitive types are the most basic building blocks of data in JavaScript.

 They represent a single value and are immutable, meaning their internal values cannot be changed after creation.

The 7 Primitive Data Types

1. String :

Represents textual data. Strings must be enclosed in single quotes ('), double quotes ("), or backticks (`).

javascript

let name = "Alice"; let greeting = 'Hello';

2. Number :

Represents both integers and floating-point (decimal) numbers. It also includes special values like NaN (Not a Number) an Infinity.

javascript

let age = 25; let weight = 50.1;

3. BigInt:

Large integers beyond the safe calculation limit of the standard Number type (ends with an n, e.g., 9007199254740991n).

4. Boolean:

logical entity with only two possible values: true or false.

javascript

let isCoding = true; let isTired = false;

5.undefined

Automatically assigned to a variable that has been declared but not yet given a value.

let x console.log(x);

6. Null

Represents an intentional absence of any object value. It is used to explicitly state that a variable is empty.

javascript

let emptyValue = null;

css interview questions

Narmatha — Thu, 20 Aug 2026 03:58:13 +0000

1. What is CSS?

CSS stands for Cascading Style Sheets. It is a styling language used to design and control the appearance of HTML web pages.
HTML is used to create the structure of a webpage, while CSS is used to make the webpage beautiful and user-friendly.

CSS can be used to change:

Text color
Font size and style
Background color
Width and height
Margin and padding
Borders
Page layout
Responsive design

Example

p { color: blue; font-size: 20px; }
Here, the paragraph text becomes blue and its font size becomes 20px.

2. What are the types of CSS?

There are three types of CSS:

1. Inline CSS

CSS is written directly inside an HTML element using the style attribute.
HTML

Hello

It is useful when we want to apply a style to a single element.

2. Internal CSS

CSS is written inside the tag in the HTML document. HTML <style> p { color: blue; }

It is useful when styling a single webpage.

3. External CSS

CSS is written in a separate .css file and connected to the HTML file.
HTML

This is commonly preferred for larger websites because the same CSS file can be used for multiple webpages.

3. What is a CSS Selector?

A CSS selector is used to select HTML elements that we want to style.

For example:

p { color: red; }
Here, p is the selector, and the style is applied to all

elements.
Common selectors include:
Element selector: p
Class selector: .title
ID selector: #header
Universal selector: *
Attribute selector: [type="text"]

Example

.title { color: green; }
This applies the style to elements having the class title.

4. What is the difference between Class and ID in CSS?

Both class and ID are used to identify HTML elements, but they are used differently.

Class:

Written using . in CSS.
Can be used on multiple elements.
Useful when applying the same style to several elements.
.student { color: blue; }

ID:

Written using # in CSS.
Normally used for one unique element.
Useful when identifying a specific element.
#header { color: red; }

Simple difference:

Class → Multiple elements
ID → One unique element

5. What is the CSS Box Model?

The CSS Box Model describes how every HTML element is represented as a rectangular box.

It consists of four parts:

Content – The actual text or image.
Padding – Space between the content and border.
Border – The line around the padding and content.
Margin – Space outside the border.

The order is:

Content → Padding → Border → Margin
Example:
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
The Box Model is very important for controlling the size and spacing of elements.

6. What is Padding in CSS?

Padding is the space between the content and the border of an element.

For example:

.box { padding: 20px; }
This creates 20px of space between the content and the border.
We can also specify padding for individual sides:
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

Simple example:

If a box contains the word "Hello", padding creates space around "Hello" inside the box.

7. What is Margin in CSS?

Margin is the space outside the border of an element.
It is used to create space between elements.

Example:

.box { margin: 20px; }This creates 20px of space around the outside of the element.
We can also use:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
Padding vs Margin
Padding: Space inside the border.
Margin: Space outside the border.

8. What is display: flex in CSS?

Flexbox is a CSS layout system used to arrange elements in a row or column.

To use Flexbox:

.container { display: flex; }
By default, the child elements are arranged in a row.
Some important Flexbox properties are:
display: flex
flex-direction
justify-content
align-items
gap
flex-wrap
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox is commonly used to create navigation bars, cards, buttons, and page layouts.

9. What is CSS Grid?

CSS Grid is a layout system used to arrange elements in rows and columns.

Example:

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
This creates three columns of equal size.
Grid is useful for creating:
Website layouts
Image galleries
Product cards
Dashboard layouts
Rows and columns

Flexbox vs Grid

Flexbox:

Mainly works in one direction — row or column.

Grid:

Works in two directions — rows and columns.

10. What is the difference between Flexbox and Grid?

Both Flexbox and Grid are CSS layout systems, but they are designed for different purposes.

Flexbox

Flexbox is mainly a one-dimensional layout system.
It is useful when arranging elements in:
A row
A column

Example:

.container { display: flex; justify-content: space-between; }

Grid

Grid is a two-dimensional layout system.
It is useful when working with:
Rows
Columns
Complete page layouts

Example:

.container { display: grid; grid-template-columns: 1fr 1fr; }

Css interview questions

Narmatha — Wed, 19 Aug 2026 15:49:51 +0000

1.What is CSS?
CSS stands for Cascading Style Sheets. It is a styling language used to design and control the appearance of HTML web pages.
HTML is used to create the structure of a webpage, while CSS is used to make the webpage beautiful and user-friendly.
CSS can be used to change:
Text color
Font size and style
Background color
Width and height
Margin and padding
Borders
Page layout
Responsive design
Example:
p { color: blue; font-size: 20px; }
Here, the paragraph text becomes blue and its font size becomes 20px.

What are the types of CSS? **There are three types of CSS:

1. Inline CSS
CSS is written directly inside an HTML element using the style attribute.
HTML
HelloIt is useful when we want to apply a style to a single element.

**2. Internal CSS
**CSS is written inside the tag in the HTML document. HTML <code><style> p { color: blue; } </style></code> It is useful when styling a single webpage. 3. External CSS CSS is written in a separate .css file and connected to the HTML file. HTML <code><link rel="stylesheet" href="style.css"></code> This is commonly preferred for larger websites because the same CSS file can be used for multiple webpages. 3. What is a CSS Selector? **A CSS selector is used to select HTML elements that we want to style. **For example: <code>p { color: red; }</code> Here, p is the selector, and the style is applied to all elements. Common selectors include: Element selector: p Class selector: .title ID selector: #header Universal selector: * Attribute selector: [type="text"] Example: <code>.title { color: green; }</code> This applies the style to elements having the class title. 4. What is the difference between Class and ID in CSS? Both class and ID are used to identify HTML elements, but they are used differently. Class: Written using . in CSS. Can be used on multiple elements. Useful when applying the same style to several elements. .student { color: blue; } ID: Written using # in CSS.tq Normally used for one unique element. Useful when identifying a specific element. <h1> <a name="header-" href="#header-" class="anchor"> </a> header { </h1> color: red; } **Simple difference: **Class → Multiple elements ID → One unique element 5. What is the CSS Box Model? The CSS Box Model describes how every HTML element is represented as a rectangular box. It consists of four parts: Content – The actual text or image. Padding – Space between the content and border. Border – The line around the padding and content. Margin – Space outside the border. The order is: Content → Padding → Border → Margin *Example: *.<code>box { width: 200px; padding: 20px; border: 2px solid black; margin: 10px; }</code> The Box Model is very important for controlling the size and spacing of elements. 6. What is Padding in CSS? Padding is the space between the content and the border of an element. For example: .<code>box { padding: 20px; }</code> This creates 20px of space between the content and the border. We can also specify padding for individual sides: <code>.box { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }</code> Simple example: If a box contains the word "Hello", padding creates space around "Hello" inside the box. 7. What is Margin in CSS? **Margin is the space outside the border of an element. It is used to create space between elements. **Example: <code>.box { margin: 20px; }</code> This creates 20px of space around the outside of the element. We can also use: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; Padding vs Margin **Padding: **Space inside the border. **Margin: **Space outside the border. 8. What is display: flex in CSS? Flexbox is a CSS layout system used to arrange elements in a row or column. To use Flexbox: <code>.container { display: flex; }</code> By default, the child elements are arranged in a row. Some important Flexbox properties are: display: flex flex-direction justify-content align-items gap flex-wrap Example: <code>.container { display: flex; justify-content: center; align-items: center; }</code> Flexbox is commonly used to create navigation bars, cards, buttons, and page layouts. 9. What is CSS Grid? **CSS Grid is a layout system used to arrange elements in rows and columns. **Example: <code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }</code> This creates three columns of equal size. Grid is useful for creating: Website layouts Image galleries Product cards Dashboard layouts Rows and columns Flexbox vs Grid Flexbox: **Mainly works in one direction — row or column. **Grid: Works in two directions — rows and columns. 10. What is the difference between Flexbox and Grid? **Both Flexbox and Grid are CSS layout systems, but they are designed for different purposes. **Flexbox Flexbox is mainly a one-dimensional layout system. It is useful when arranging elements in: A row A column Example: **<code>.container { display: flex; justify-content: space-between; }</code> Grid Grid is a two-dimensional layout system. It is useful when working with: Rows Columns Complete page layouts **Example: <code>.container { display: grid; grid-template-columns: 1fr 1fr; }</code>

HTML INTERVIEW QUESTION

Narmatha — Wed, 19 Aug 2026 07:31:09 +0000

1.WHAT IS HTML ?
HTML (HyperText Markup Language) is the standard language used to structure content on the web. It tells the browser how to display text, images, and other elements on a webpage.

1.HTML is a markup language, not a programming language.
2.It defines the structure of a webpage using tags and elements.
3.HTML is static; CSS styles it and JavaScript adds interactivity.
4.It forms the foundation of almost every website today.

2. What are HTML tags?
HTML tags are special keywords enclosed in angle brackets (< >) that tell a web browser how to structure and display content on a webpage.

<h1>Hello!</h1> <!-- This makes a big **heading** -->
<p>A **paragraph** goes here.</p>

3. What’s the difference between HTML and HTML5?
HTML is the general name for HyperText Markup Language, and HTML5 is the latest launched version in 2014. HTML5 added awesome features like:

Aspect             HTML                    HTML5    
Doctype          Long & complex          Simple: <!DOCTYPE html>
Multimedia   Needs plugins (Flash)   <audio>, <video>
Graphics     No native support   <canvas>, <svg>
Forms            Basic inputs            New inputs: email, date, etc.

4. What’s the basic structure of an HTML document?
Every HTML document needs a specific setup so browsers know how to read it. It’s like the blueprint for your web page. Here’s what goes in it:

<!DOCTYPE html>: Tells the browser this is an HTML5 page.
: The main container for everything else.
: Holds behind-the-scenes info like the page title or links to CSS and JavaScript.
: Where all the visible stuff goes, like text, images, or links.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Cool **Website**</title>
</head>
<body>
  <h1>Hey There!</h1>
  <p>Welcome to my **page**.</p>
</body>
</html>

5. What are attributes in HTML?
Attributes are extra details you add to an opening tag to give it more powers. They look like name="value". For example, they can tell a link where to go or an image what picture to show. Common ones are href for links, src for images, and id to give something a unique name.

**Attribute         Purpose                     Example**
  id           Gives a unique ID              <p id="intro">
 class         Assigns a class                    <p class="text">
 href          Specifies a link                   <a href="page.html">
 src           Specifies a file/source            <img src="photo.jpg">
 alt           Alternative text for image     <img alt="Photo">
 style         Adds CSS styling                   <p style="color:red">
 title         Shows tooltip information      <p title="Hello">
 disabled       Disables an element           <button disabled>

JAVASCRIPT VARIABLES INTERVIEW QUESTION

Narmatha — Wed, 19 Aug 2026 06:49:49 +0000

WHAT IS VARIABLES IN JAVASCRIPT

Variables in JavaScript are used to store data values. They can be declared in different ways depending on how the value should behave.

Variables can be declared using var, let, or const.
JavaScript is dynamically typed, so types are decided at runtime.
You don’t need to specify a data type when creating a variable.

TYPES OF VARIABLES

1. var keyword
var is a keyword in JavaScript used to declare variables and it is Function-scoped and hoisted, allowing redeclaration but can lead to unexpected bugs.

var a = "Hello Geeks";
var b = 10;
console.log(a);
console.log(b);

2. let keyword
let is a keyword in JavaScript used to declare variables and it is Block-scoped and not hoisted to the top, suitable for mutable variables

let a = 12
let b = "gfg";
console.log(a);
console.log(b);

3. const keyword
const is a keyword in JavaScript used to declare variables and it is Block-scoped, immutable bindings that can't be reassigned, though objects can still be mutated.

const a = 5
let b = "gfg";
console.log(a);
console.log(b);

Rules for Naming Variables

1.Variable names must begin with a letter, underscore (_), or dollar sign ($).
2.Subsequent characters can be letters, numbers, underscores, or dollar signs.
3.Variable names are case-sensitive (e.g., age and Age are different variables).
4.Reserved keywords (like function, class, return, etc.) cannot be used as variable names.

Bootstrap

Narmatha — Mon, 03 Aug 2026 05:42:24 +0000

*What is Bootstrap?
*
Bootstrap is a free, open-source CSS framework that helps developers build responsive and attractive websites quickly. It also includes JavaScript components for common UI elements.

Instead of writing all your CSS from scratch, Bootstrap provides ready-made styles and components.

For example, instead of creating a button style yourself, you can write:

Click Me

Bootstrap automatically makes it look like a modern button.

*How does Bootstrap help?
*
Bootstrap saves time and makes web development easier in several ways:

Responsive design: Websites automatically adjust to phones, tablets, and desktops using Bootstrap's grid system.

Pre-built components: Includes buttons, forms, navigation bars, cards, modals, alerts, tables, and more.

Consistent design: Your pages have a clean and professional appearance without extensive custom CSS.

Faster development: You can build interfaces much more quickly by using Bootstrap's classes.

Cross-browser compatibility: Bootstrap is designed to work well across modern web browsers.
Example

Without Bootstrap:

Submit

You would need to write CSS:

button {
background: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}

With Bootstrap:

Submit

No extra CSS is needed for the basic styling.

Bootstrap Grid System

Bootstrap uses a 12-column grid to create responsive layouts.

*Example:
*

Left
Right

On medium and larger screens, each column takes half the width. On smaller screens, they stack automatically.

*Common Bootstrap Components
*
Some of the most commonly used components are:

Buttons
Navigation bars (Navbar)
Forms
Cards
Tables
Alerts
Badges
Modals (pop-up dialogs)
Carousels (image sliders)
Dropdown menus

CSS POSITIONING

Narmatha — Tue, 28 Jul 2026 08:10:19 +0000

What is CSS Position?

-CSS position is a property that tells the browser how and where to place an HTML element on a webpage.

Simple definition:

The position property controls the location of an element on the webpage.

*Types of CSS Position
*
There are 5 types of CSS positioning:

1.static
2.relative
3.absolute
4.fixed
5.sticky

1. position: relative

The element starts in its normal position.

Then you can move it using top, left, right, or bottom.

Example
.box {
position: relative;
left: 20px;
}
How it works

Before:

[BOX]

After:

 [BOX]

The box moves 20 pixels to the right, but its original space is still kept.

Use
Small adjustments
Creating a parent for absolutely positioned elements

2. position: absolute

The element is removed from the normal layout.

It is placed relative to its nearest parent that has a position other than static.

Example
.parent {
position: relative;
}

.box {
position: absolute;
top: 20px;
right: 20px;
}
HOW ITS WORKS
+------------------+
| BOX |
| |
| |
+------------------+

The box is placed exactly where you tell it.

Use
Badges
Popups
Icons
Labels on images

3.position: sticky

The element behaves like relative at first.

When you scroll to it, it sticks to the top (or another specified position).

header {
position: sticky;
top: 0;
}

Before scrolling:

Header

Content

*After scrolling:
*
Header ← stays at the top

Content keeps moving
Use when:
Navigation bars
Table headers
Side menus

Easy Way to Remember

relative - Move a little from the normal position.
absolute - Place the element exactly where you want inside its parent.
sticky - Move normally, then stick to the top when scrolling.

**Real-Life Example

**Imagine a classroom:
Relative → One student slides their chair a little but keeps their place.
Absolute → A teacher hangs a poster at a specific spot on the wall.
Sticky → A notice board scrolls with the page until it reaches the top, then it stays visible

TOSS CONFERENCE DAY-2 LEARN

Narmatha — Sun, 26 Jul 2026 18:10:28 +0000

WHAT IS OPENTELEMETRY?
OpenTelemetry (OTel) is an open-source observability framework that helps you collect, process, and export telemetry data from your applications and infrastructure. It is a project of the Cloud Native Computing Foundation.

SIGNAL OF OPENTELEMETRY

1.Traces

Show the path of a request through multiple services.
Help you identify where latency or failures occur.

Example:

User Request
│
▼
API Gateway
│
▼
Auth Service
│
▼
Payment Service
│
▼
Database

Each step is a span, and together they form a trace.

2.Metrics

Numeric measurements over time.
Examples:
CPU usage
Memory usage
Request rate
Error count
Response time

3.Logs

Timestamped records of events.

Example:

2026-07-25 10:15:23 ERROR Payment failed: Timeout

KEY PRPPERITIES OF OPENTELEMETRY:

1.Vendor-Neutral
Works with many observability platforms (such as Prometheus, Grafana, Jaeger, Datadog, and Splunk).
Avoids vendor lock-in.

2.Open Source
Developed under the Cloud Native Computing Foundation.
Free to use and supported by a large community.

3.Unified Observability
Collects all three types of telemetry:
.Traces
.Metrics
.Logs

4.Automatic and Manual Instrumentation
Supports automatic instrumentation with little or no code changes.
Allows manual instrumentation for custom business logic.

5.Multi-Language Support
Supports many programming languages, including:
Java
Python
Go
.NET
Node.js
C++
PHP
Ruby
Rust

6.Context Propagation
Preserves request context across multiple services.
Makes it possible to trace a request end-to-end in distributed systems.

7.Extensible and Modular
Components can be customized or extended.
Supports custom exporters, processors, and receivers.

8.OpenTelemetry Collector
A standalone service that:
Receives telemetry
Processes and filters data
Batches data
Exports it to one or more monitoring backends

9.Standardized APIs and SDKs
Provides consistent APIs and SDKs across supported languages.
Simplifies instrumentation and improves portability.

10.High Scalability
Suitable for cloud-native applications, microservices, containers, and large distributed systems.
Handles telemetry from many services efficiently

HTML FORMS

Narmatha — Thu, 16 Jul 2026 14:33:38 +0000

WHAT IS HTML FORM?

An HTML form is used to collect information from users and send the data to a server for processing. It is created using the

tag and contains different form elements like text fields, checkboxes, radio buttons, and buttons

USAGE OF THE HTML FORMS

1.User Registration
Collects user information such as name, email, and password.
2.Login Pages
Used to enter usernames and passwords for authentication.
3.Contact Forms
Allows users to send messages, queries, or feedback.
4.Search Forms
Used to search information on websites.
5.Online Shopping
Collects customer details, addresses, and order information.
6.Surveys and Feedback
Helps collect opinions and responses from users.

Common HTML Form Elements

Text Field ()

Used to enter single-line text such as name, username, or address.
Example:

Password Field ()

Used to enter passwords. The entered characters are hidden.
Example:

Radio Button ()

Allows the user to select only one option from a group.
Example:
Male

Checkbox ()

Allows the user to select multiple options.
Example:
Music

Dropdown List () Provides a list of options from which the user can select one. Example:
India
USA

Textarea () Used to enter multiple lines of text, such as comments or messages. Example: <textarea>

Submit Button ()

Used to submit form data to the server.
Example:

File Upload ()

Allows users to upload files like images or documents.
Example:

HTML ATTRIBUTES

Narmatha — Thu, 16 Jul 2026 14:23:46 +0000

WHAT IS HTML ATTRIBUTES

HTML attributes are special properties that provide additional information about an HTML element or modify its behavior and appearance. They are written inside the opening tag of an HTML element and usually have the format attribute="value".

*href Attribute *

The href (Hypertext Reference) attribute is used to specify the destination URL of a hyperlink. It is mainly used with the (anchor) tag to link one web page to another, or to files, email addresses, or sections within the same page.

Syntax
Link Text
Example
Visit Google

Common HTML Attributes

id **– Gives an HTML element a unique name or identifier. It is used to target a specific element with CSS or JavaScript.
**Example:

Welcome

*class *– Groups multiple HTML elements together so they can be styled or controlled using CSS or JavaScript.
*Example:
*

Hello

style **– Applies CSS styles directly to an HTML element (inline CSS).
**Example:

Heading

title – Provides extra information about an element and displays it as a tooltip when the mouse is placed over it.
Example:

Hello

*href *– Specifies the URL or destination of a link. It is mainly used with the tag.
*Example:
*
Visit

*src *– Specifies the source location of an image, video, or other media files. It is mainly used with tags like , , and .
*Example:
*