Assignment-2

1. Explain the concept of Responsive Design using CSS Flexbox. Describe how JavaScript ES6+

features (like Promises, async/await) help manage asynchronous operations.  Responsive

Design

Today, websites need to look perfect on every device, whether it's a phone, tablet, or
laptop. This ability to automatically adapt the layout is called Responsive Design. It ensures that
content resizes and reorganizes itself based on the user's screen size.

It means building websites that automatically adjust their layout by resizing or

moving content to match the user's screen size.

A responsive website is easy to read, comfortable to use, and does not require
zooming or horizontal scrolling.

How Flexbox Helps in Responsive Design (Theory)

Flexbox is a smart CSS layout system that arranges elements automatically within a
container. It simplifies responsive design by ensuring elements adapt to any screen size,
significantly reducing the need for complicated styling rules.

1. Flexbox Automatically Adjusts Layout

 It enables components to adjust their size or wrap onto multiple lines, maintaining a clean
layout on limited screen real estate
2. Easy Direction Control
Elements can switch from row (large screens) to column (small screens) .
3. Automatic Wrapping of Items
Content moves to the next line if space becomes scarce.
Example:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
4. Balanced Spacing and Flexible Width
Flexbox automatically handles the gaps and spacing between items, making sure the
layout looks neat on any screen. Items don't need a fixed size; they simply adjust to
use whatever space is available
Asynchronous Operations
In JavaScript, time-consuming operations—such as fetching server data or
file I/O—can create latency. If the main thread waits for these tasks, the
user interface would become unresponsive (freeze). To prevent this,
JavaScript utilizes asynchronous programming, ensuring the application
remains interactive while background tasks complete. Modern ES6+
features like Promises and Async/Await provide a cleaner syntax to handle
these operations efficiently

Promises
A Promise is a JavaScript object representing the
eventual completion (or failure) of an
asynchronous operation. It exists in one of three
states:
• Pending: The initial state, where the operation is
still in progress.
• Fulfilled (Resolved): The operation completed
successfully.
• Rejected: The operation failed.
Example of a Promise
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // Simulation
if (success) {
resolve("Data received successfully!");
} else {
reject("Error: Failed to fetch data.");
}
}, 2000);
});

// Consuming the Promise

fetchData
.then((result) => [Link](result))
.catch((error) => [Link](error));

async/await
It simplifies Promise handling by allowing asynchronous logic to be written
in a linear, synchronous style—eliminating the need for complex .then()
chains.

Example with async/await

async function getData() {

try {
const result = await fetchData();
[Link](result);
} catch (error) {
// Agar koi error aaye to yahan pakda jayega
 [Link]("Something went wrong:", error);
}
}

getData();

2. Differentiate between HTML5 Elements and Semantic Tags. Briefly explain the
DOM (Document Object Model) and its purpose in JavaScript manipulation.

 HTML5 Elements

HTML5 introduced a robust set of new elements to modernize web development. These
tags go beyond basic structure, offering native support for multimedia, advanced
graphics, and better form controls. While some elements provide semantic meaning (like
<article>), others add powerful functionality (like <video>), significantly reducing the
need for external plugins."

Key Examples: <video>, <audio>, <canvas>, <section>, <article>

Semantic: Improve layout meaning (e.g., <section>, <article>).

Multimedia & Graphics: Add rich features (e.g., <audio>, <video>, <canvas>)."

 Semantic Tags
Semantic tags are a specific subset of HTML5 elements that clearly describe
their meaning to both the browser and the developer. Unlike generic tags
(like <div>), semantic tags explicitly define the purpose of the content they
contain. This improves SEO, boosts accessibility for screen readers, and
makes the code easier to maintain

• Purpose: They describe the content (e.g., <nav> for navigation).

• Benefits: They significantly improve SEO and Accessibility.

 • Function: They help browsers and bots distinguish between different
parts of a page.

Examples: <header>, <footer>, <nav>, <article>, <aside>.

DOM:
The DOM (Document Object Model) is a programming interface that represents
the structure of a web document. It acts as a bridge between the raw HTML
code and JavaScript. When a browser loads a page, it parses the HTML into a
hierarchical DOM Tree, allowing scripts to dynamically access and manipulate
content, structure, and styles.

DOM Works
Node Conversion:
Every HTML element is parsed and converted into a distinct
Node (object) within the DOM.
Hierarchical Structure:
The DOM organizes these nodes into a
logical Parent-Child Tree structure
Dynamic Manipulation:
 This structure allows JavaScript to programmatically access,
modify, append, or remove elements to update the UI
dynamically.
JavaScript can use this structure to access, change, add, or
remove elements on the page.

Purpose of DOM in JavaScript Manipulation

Purpose of DOM in JavaScript Manipulation JavaScript utilizes the DOM to perform five
key operations:

1. Access Elements: efficiently selecting specific nodes (e.g., retrieving a button,

paragraph, or div).

2. Modify Content & Styles: Dynamically updating text, swapping images, or altering CSS
properties in real-time.

3. Structure Manipulation: Adding new elements or removing existing ones to change

the page layout dynamically.

4. Event Handling: Listening and responding to user actions such as clicks, mouse
movements, keyboard inputs, and form submissions.

5. Enhance Interactivity: creating dynamic features like toggle menus, live data updates,
form validation, and smooth animations.

Assignment-03

[Link] the significance of Props and State in a React component. How do

Event Handling and the Virtual DOM contribute to React's performance?

Props (Properties):
Props are read-only (immutable) data passed from

a parent component to a child component

 Significance of Props

1 Data Transmission: They serve as the primary mechanism to send data and event
handlers from one component to another.
2 Immutability: Props are read-only; the child component receiving them cannot modify
them, ensuring data stability.
3 Reusability: They make components reusable by allowing the same component structure
to render different data based on what is passed to it.
4 Unidirectional Flow: They enforce a "top-down" data flow, making the application
structure predictable and easier to debug.
5 Configuration: They act like function arguments, allowing parents to configure the
behavior or appearance of child components.

State

State is a built-in object that allows a component to manage its own data
internally. Unlike props, state is mutable and can change over time.

Significance of State

1. Dynamic Data Management: Used to handle data that changes during the
component's lifecycle (e.g., user inputs, counters, toggle switches).
2. Reactivity: When state changes (via useState or setState), React automatically re-
renders the component to reflect the new data in the UI.
 3. Interactivity: Enables interactive features like opening/closing modals, form
validation, or live filtering.
4. Optimized Rendering: React is smart enough to update only the specific parts of
the DOM that depend on the changed state.
5. Encapsulation: State makes components "smart" and self-contained, as they
manage their own logic independent of the parent.
6. Makes components self-contained and smart.

Event Handling in React (Performance Contribution)

React utilizes a Synthetic Event System, which is a cross-browser wrapper

around the browser’s native event system

How It Improves Performance

Cross-Browser Consistency: React standardizes events (SyntheticEvents) so they

behave identically across all browsers, eliminating compatibility issues.
Event Delegation: Instead of attaching an event listener to every single element (which
is heavy on memory), React attaches a single event listener to the root of the document. It
uses "bubbling" to handle events, significantly reducing memory usage.

Efficient Updates: When an event occurs (like a button click), React efficiently
determines which component needs to update, avoiding unnecessary re-renders of the
entire page.

Memory Optimization: The synthetic event objects are lightweight and are pooled
(reused) by React to keep memory consumption low.

Virtual DOM and React Performance

 The Virtual DOM is a lightweight, in-memory representation
(copy) of the real DOM. React uses it to minimize direct
interaction with the slow browser DOM.
How Virtual DOM Improves Performance
1. Fast Comparison (Diffing Algorithm)

When data changes, React creates a new Virtual DOM tree and compares it
with the previous one (a process called "Diffing") to identify exactly what
changed.
2. Batch Updates

React groups multiple state updates into a single re-render cycle, preventing
the browser from recalculating layout multiple times unnecessarily.
3. Avoids Direct DOM Manipulation Accessing the Real DOM is slow and

expensive. React performs all calculations in the Virtual DOM (which is fast)
and only touches the Real DOM when necessary.
4. Reduces Reflows and Repaints

By updating only the specific nodes that

changed (Reconciliation), React reduces the
workload on the browser’s layout engine,
leading to smoother performance.

2. What is JSX? Describe the importance of Component-Based Architecture in

modern UI/UX design, mentioning at least two key React Hooks (like useState or
useEffect).

JSX
 JSX (JavaScript XML) is a syntax extension for JavaScript that allows
developers to write HTML-like code directly within JavaScript files. While
browser engines don't understand JSX, React tools (like Babel) compile it
into standard JavaScript objects before rendering.
Why is it important?
• Readability: It makes code visual and easier to understand by keeping logic and UI
together.

• Safety: It prevents injection attacks (XSS) by automatically escaping inputs

Example:
function App () {
return (
<div>
<h1>Hello, this is JSX! </h1>
<p>JSX allows us to write HTML inside JavaScript efficiently.</p>
</div>
);
}

Importance of Component-Based Architecture

Modern UI/UX design relies on breaking down complex interfaces into smaller,
independent building blocks called Components

1. What is JSX?

Definition: JSX (JavaScript XML) is a syntax extension for JavaScript that allows
developers to write HTML-like code directly within JavaScript files. While browser
engines don't understand JSX, React tools (like Babel) compile it into standard
JavaScript objects before rendering.
Why is it important?

• Readability: It makes code visual and easier to understand by keeping logic and UI
together.

• Safety: It prevents injection attacks (XSS) by automatically escaping inputs.

Example:

function App() {

return (

<div>

<h1>Hello, this is JSX!</h1>

<p>JSX allows us to write HTML inside JavaScript efficiently.</p>

</div>

);

2. Importance of Component-Based Architecture

Modern UI/UX design relies on breaking down complex interfaces into smaller,
independent building blocks called Components.
Shutterstock

Key Benefits:

• Reusability: Write code once and use the same component (like buttons or
navbars) across multiple pages, saving significant development time.

• Maintainability (Isolation): Since each component handles its own logic and
style, fixing a bug in one section doesn't break the entire application.

• Collaboration: Different team members can work on different components

simultaneously without conflict, speeding up the workflow.

• Scalability: Large applications remain manageable because they are composed

of small, focused, and testable units.

• Consistency: Reusing components ensures the UI looks uniform throughout

the app (same colors, fonts, and behaviors).

useState Hook – Importance

 Purpose: useState gives functional components the ability to maintain their own
memory. It allows components to create variables that, when changed, trigger the UI to
re-render automatically
Key Features:
• Dynamic UI: Essential for handling data that changes, such as form inputs, toggles, or
counters.
• Reactivity: Automatically updates the specific part of the screen where the state is used

• It stores data that can change inside a component.

• When the state value changes, React automatically updates the UI.
• It helps create interactive features like counters, forms, and toggles.
• It gives the component its own memory to remember values.
Example:
import React, { useState } from "react";

function Counter() {
// 'count' stores the value, 'setCount' updates it
const [count, setCount] = useState(0);

return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}

export default Counter;

useEffect Hook – Importance
Purpose: useEffect manages "side effects" in functional components.
Side effects are operations that reach outside the component,
 such as fetching data from an API, setting up timers, or directly manipulating the
DOM
Key Features:
Lifecycle Management:
It acts as a replacement for class lifecycle methods
(componentDidMount, componentDidUpdate,
componentWillUnmount).
Dependency Control:
You can control exactly when the effect runs
(only once on load, or every time specific data changes) using the
dependency array
Example:

import React, { useEffect, useState } from "react";

function Message() {

const [name, setName] = useState("Abhishek");

useEffect(() => { [Link]("Component mounted or name

updated!"); }, [name]); // Dependency array
return (
<div>
<h2>Hello {name}</h2>
<button onClick={() => setName("Abhishek")}> Change Name
</button>
</div> );
}
}
export default Message;
Assignment 4

Q. Define RESTful APIs and explain the basic structure of a [Link] module.
Describe the role of [Link] in middleware and routing.
 Ans:

RESTful APIs (Representational State Transfer)

REST is an architectural style for designing networked applications.

It has become the standard for web services due to its simplicity and scalability.

Definition:

RESTful APIs allow different systems to communicate over the internet using standard
HTTP methods. They treat data as Resources, which are accessed via URLs (Uniform
Resource Locators).

Stateless Nature:

A key characteristic of REST is that it is stateless. This means the server does not store any
state about the client session. Every request must contain all the necessary information
(headers, body, tokens) to be understood and processed

CRUD Operations:

RESTful APIs use HTTP requests to perform CRUD (Create, Read, Update, Delete) actions.
HTTP Methods
Method Type Function

GET Safe, Idempotent Retrieves data from the server.

POST Non-Idempotent Sends data to create a new resource.

PUT Idempotent Updates an existing resource fully.

DELETE Idempotent Removes a resource.

PATCH Non-Idempotent Partially updates a resource.

Node Module

A Module in [Link] is a reusable unit of code—encapsulated in a file or folder—whose

functionality can be exported and used in other parts of the application.

• Encapsulation: Every file in [Link] is treated as a separate module. Variables defined

inside a module are private unless explicitly exported.

• The module Object: Each file has access to a global module object that represents the
current module.

Basic Structure

A Node module usually consists of:

1. Module file (e.g., [Link])

2. Functions or variables The functions, variables, or classes defined in the file

[Link] The mechanism to make specific code public using [Link]
 // Defining functionality

const add = (a, b) => a + b;

const subtract = (a, b) => a - b;

// Exporting functionality

[Link] = { add, subtract };

Using the module

// Importing functionality

const math = require('./math');

[Link]([Link](5, 3)); // Output: 8

[Link]([Link](10, 4)); // Output: 6

Express

[Link] is a minimalist web framework for [Link]. It simplifies server-side logic effectively
through two main concepts: Middleware and Routing.

Express in middleware

Middleware functions are the backbone of an Express application. They act as "checkpoints"
that a request passes through before reaching the final response

Functionality: Middleware functions have access to:

• The Request object (req)

• The Response object (res)
• The Next function (next)

• Executing code: Run logic like logging or calculations.

• Modifying request and response objects: For example, parsing JSON data into [Link].

• Authentication: verifying user tokens before allowing access

• Flow Control: Using next() to pass control to the next middleware in the stack.

• Calling the next middleware function: Passing control to the next function in the stack using
next().

Express in routing

[Link] provides a robust routing system that allows developers to define how an application
responds to client requests to specific endpoints (URLs) and HTTP methods (GET, POST, PUT,
DELETE, etc.). Key aspects of Express routing include:

• Defining routes: Using [Link](), [Link](), [Link](), [Link](), and

similar methods to associate a URL path and HTTP method with a handler function.

• Route parameters: Capturing dynamic values from the URL using colon-prefixed parameters
(e.g., /users/:id).

• Modularity: Using [Link](), developers can create modular route handlers, keeping the
code organized for large applications.

• Query parameters: Accessing data passed in the URL's query string (e.g., ? name=John).

• Route handlers: Functions that execute when a specific route is matched, processing the
request and sending a response.

• [Link]: Creating modular, mountable route handlers to organize routes in larger

applications.

const express = require('express');

const app = express();

// Middleware: Logs every request

[Link]((req, res, next) => {
[Link]('Request received');
next(); // Moves to the route handler
});

// Route: Handling a GET request

[Link]('/', (req, res) => {
[Link]('Hello, Express!');
});

[Link](3000);
 Q. 2 Explain the Event-Driven Architecture of [Link]. Discuss the essential aspects of Error
Handling and Security Considerations when developing backend APIs.

Ans :

[Link] operates on an asynchronous, event-driven architecture. In this model, the system

does not wait for tasks (like file reading or database queries) to finish before moving to the next
one. Instead, it relies on events to trigger actions. When an event occurs (e.g., a request
received), a specific function (callback) is executed.

Key Components

➢ Events: Signals indicating that a state change has occurred (e.g., "data received", "file
opened")

➢ Event Emitter: Objects that generate (emit) events. Core modules like http and fs inherit
from the EventEmitter class and use .emit() to signal changes

➢ Event Listener Callback functions registered to run when a specific event occurs. They are
attached using methods like .on()

➢ Event Loop The heart of [Link]. It runs on a single thread, continuously monitoring the
event queue and executing callbacks when the main stack is empty.

➢ Non-Blocking I/O Heavy operations (I/O) are offloaded to the system kernel (via the libuv
library) so the main thread remains free to handle other requests.

How the Architecture Works

• Client Request A client sends a request to the server, which is placed in the Event
Queue.

• Event Loop: The Event Loop checks the queue

 If the task is Synchronous (simple CPU work), it executes immediately.

If the task is Asynchronous (I/O, DB query), it is offloaded to the Worker Thread Pool
(managed by libuv).

• Processing:

• If the request is simple (e.g., a synchronous CPU operation), it is handled immediately on

the main thread.

• If the request involves a time-consuming I/O operation (e.g., reading a large file, network
request), the main thread offloads the task to the thread pool (managed by libuv) and
continues to pick up the next request from the queue.

• Callback Queuing: Once the I/O operation in the thread pool is complete, its associated
callback function is moved to a callback queue.

• Execution: When the main call stack is clear, the event loop pushes callbacks from the
queue onto the stack for execution, and the response is sent back to the client

Essential Aspects of Error Handling

Proper error handling ensures the API remains reliable and easy to debug without crashing.

• Use Appropriate HTTP Status Codes: Return semantic codes to describe the outcome
clearly.

400 Bad Request (Invalid Input)

401 Unauthorized (Login failed)

403 Forbidden (No permission)

404 Not Found (Resource missing)

500 Internal Server Error (Server crash)
• Avoid Exposing Sensitive Information: Never send stack traces or internal paths to the
client in a production environment. This prevents hackers from understanding the server
structure.

• Validate Input: Validate data at the entry point. Reject invalid data immediately before it
reaches the database or logic layer.

• Log Errors for Internal Monitoring: Use libraries like Winston or Pino to record errors with
timestamps, request IDs, and user context. This is crucial for debugging post-mortem.
• Centralize Error Handling Logic: Use global middleware (e.g., [Link]((err, req, res, next) =>
{...})) to manage errors in one place, ensuring consistency across the application.

Security Considerations
Security must be a priority to protect user data and server integrity

•Implement Strong Authentication and Authorization:

Authentication: Verify identity using secure standards like OAuth 2.0 or JWT (JSON
Web Tokens).

Authorization: Enforce "Least Privilege" (users can only access what they strictly need).

•Encrypt All Data In Transit: Always use TLS/SSL (HTTPS) to encrypt data moving between
client and server.

At Rest: Encrypt sensitive fields (like passwords) in the database using hashing algorithms (e.g.,
bcrypt).

•Validate and Sanitize All Inputs: This is a primary defense against injection attacks (e.g.,
SQL injection, XSS). Treat all user input as untrusted, validate it against a strict schema, and
sanitize it before it interacts with your backend systems.
 •Limit Data Exposure: Only return essential data in API responses. Avoid overexposure of
properties or fields that aren't strictly necessary for the client's use case, as this can leak
sensitive information.

• •Use API Gateways: Implement rate limiting (e.g., max 100 requests per minute) to prevent
DDoS attacks and brute-force attempts. Use an API Gateway to centralize security policies.

Assignment 5 : Database Management

Q. 1. Define the CRUD operations used in database management. Briefly

explain the concepts of Keys and Constraints in a relational database
(MySQL).

Ans :

CRUD Operations CRUD is an acronym for the four fundamental operations

required to create and manage persistent data in a database. These map
directly to standard SQL commands.

SQL
Operation Description Example
Command

Registering a new
Create INSERT Adds new records to a table.
user.
 SQL
Operation Description Example
Command

Read SELECT Retrieves data based on criteria. Viewing a product list.

Update UPDATE Modifies existing records. Changing a password.

Removes records from the

Delete DELETE Deleting an account.
table.

Breakdown of Each Operation

• Create: This operation is the initial step of the data lifecycle, where new information is
introduced into the system for storage. For example, when a user signs up for a new account, a
"create" operation adds their information as a new row or document in the database.

• Read: This allows users and applications to access and view stored information. It is used for
searching, filtering, and retrieving data, such as checking an email inbox or viewing a product
page on a website.

• Update: This function is vital for maintaining the accuracy and relevance of stored data over
time. When a user changes their profile picture or edits a message, an "update" operation
modifies the existing data record without deleting and recreating it.
• Delete: This operation manages the data lifecycle by removing outdated, irrelevant, or
unnecessary information. This can be as simple as an email being moved to a trash folder (a
"soft delete", where its status is marked as deleted) or permanently removed from the database
(a "hard delete").

Keys in MySQL
Keys are attributes (or sets of attributes) that uniquely identify rows within a table and define
the relationships between different tables.

1. Primary Key: A column that uniquely identifies every record in a table. It cannot accept
NULL values.

Example: Student ID in a Students table.

2. Foreign Key: A column that creates a relationship between two tables by pointing to the
Primary Key of another table. It enforces referential integrity.

Example: DepartmentID in a Students table linking to the Departments table.

3. Unique Key: Ensures that all values in a column are distinct. Unlike the Primary Key, it
allows one NULL value (depending on the DB engine).
 Example: EmailAddress (Two users cannot have the same email).

4. Composite KeyA key composed of two or more columns to create a unique identifier
when a single column is not enough.

Constraints in MySQL

Constraints are rules enforced on data columns in a table. They are used to limit the type of
data that can go into a table, ensuring the reliability and accuracy of the data.

1. NOT NULL: Ensures that a column cannot have a NULL value. For example, a Username field
should always contain a value.
2. DEFAULT: Provides a default value for a column when no value is specified during an
INSERT operation. (e.g., setting a Status field to 'Active' by default).

3. CHECK: Ensures that all values in a column satisfy specific conditions. For example,
ensuring that an Age column only accepts values greater than 18.

Q. 2. What are Joins in SQL? Give an example of a situation where you would use a
Transaction to maintain data integrity. Describe how Database Connectivity is established
using backend frameworks.

Ans :

JOIN IN SQL: SQL Joins are used to combine rows from two or more tables based on a related
column (typically a Primary Key and Foreign Key relationship). They allow us to query data
scattered across multiple normalized tables.

Joins in SQL are used to combine rows from two or more tables based on a related column
between them.

They help retrieve data that is spread across multiple tables in a relational database.
Common Types of Joins:
INNER JOIN: Returns records that have matching values in both tables.
 LEFT JOIN: Returns all records from the left table and matched records from the right.

RIGHT JOIN: Returns all records from the right table and matched records from the left.

Transaction for Data Integrity:

A Transaction is a sequence of operations performed as a single logical unit
of work. To maintain integrity, transactions must follow the ACID properties
(Atomicity, Consistency, Isolation, Durability).
Real-World Scenario:
Bank Money Transfer Situation: Transferring ₹5000 from Account A to Account B.
This involves two critical steps:
1. Debit: Deduct ₹5000 from Account A.
2. Credit: Add ₹5000 to Account B.
Why a Transaction is needed:
If Step 1 succeeds (money cut) but Step 2 fails (server crash), the money is
lost. A transaction ensures that:
• Commit: If both steps succeed, the changes are saved permanently.
• Rollback: If any step fails, the database reverts to its original state (money
is returned to Account A).
Database Connectivity in Backend Frameworks:
Backend frameworks (like [Link], Django, Spring) do not connect
directly to the database; they use Drivers or ORMs (Object-Relational
Mappers) to establish a bridge.
Process of Connectivity:
1. Driver Installation: The application requires a specific driver library (e.g.,
mysql2 for [Link], psycopg2 for Python).
2. Configuration: Setting up connection details such as Host, User, Password, and
Database Name.
3. Connection Pooling: Instead of opening a new connection for every request,
frameworks often use a "Pool" to manage multiple reusable connections
efficiently.

Example ([Link]):

const mysql = require('mysql2');

// Create connection
const connection = [Link]({
host: 'localhost',
user: 'root',
password: 'password123',
database: 'my_database'
});

// Connect
[Link]((err) => {
if (err) throw err;
[Link]('Connected to MySQL Database!');
});