Viva Questions and Answers

Q: What is the <video> tag in HTML5 used for?

A: The <video> tag is used to embed video content in a web page. It supports multiple video formats

like MP4, WebM, and Ogg.

Q: What is the <audio> tag in HTML5 used for?

A: The <audio> tag is used to embed sound content in a web page. It supports audio formats like

MP3, WAV, and Ogg.

Q: What is SVG in HTML5?

A: SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the web

that can be scaled without losing quality.

Q: What is Web Storage in HTML5?

A: Web Storage provides two mechanisms for storing data on the client side: localStorage and

sessionStorage.

Q: What is Drag and Drop in HTML5?

A: Drag and Drop is a feature that allows users to drag items from one location and drop them into

another using the mouse.

Q: What is Geolocation in HTML5?

A: The Geolocation API allows the user to share their location with web applications, typically using

GPS or network information.

Q: What is CSS used for?

A: CSS (Cascading Style Sheets) is used to style and layout web pages, including colors, fonts, and

spacing.

Q: What is Bootstrap?

A: Bootstrap is a front-end framework for developing responsive and mobile-first websites using
HTML, CSS, and JavaScript components.

Q: How do you set up Bootstrap?

A: You can set up Bootstrap by including its CSS and JS files via a CDN or by downloading and

linking them locally.

Q: What are Bootstrap Templates?

A: Bootstrap Templates are pre-designed web pages or components built using Bootstrap that help

speed up development.

Q: What is Git?

A: Git is a distributed version control system used to track changes in source code during software

development.

Q: How do you start with Git?

A: You start by installing Git and setting up user credentials using commands like 'git config --global

user.name' and 'git config --global user.email'.

Q: How do you work with a local Git repository?

A: You can create a local repository using 'git init', then track changes with 'git add' and 'git commit'.

Q: What are branches in Git?

A: Branches in Git are used to develop features, fix bugs, or experiment independently from the

main codebase.

Q: How do you merge branches in Git?

A: You merge branches using the 'git merge' command, which combines changes from different

branches.

Q: How do you work with a remote repository in Git?

A: You connect to a remote repository using 'git remote add', then use 'git push' and 'git pull' to sync

changes.
 JavaScript and jQuery Viva Questions and Answers

Q: What are variables in JavaScript?

A: Variables are containers for storing data values. They can be declared using var, let, or const.

Q: What are arrays in JavaScript?

A: Arrays are used to store multiple values in a single variable. They are defined using square

brackets [].

Q: What are objects in JavaScript?

A: Objects are collections of key-value pairs used to store multiple related values.

Q: What are loops in JavaScript?

A: Loops are used to execute a block of code multiple times. Common loops include for, while, and

do-while.

Q: What are conditionals in JavaScript?

A: Conditionals (if, else if, else) are used to perform different actions based on different conditions.

Q: What is a switch statement in JavaScript?

A: A switch statement is used to perform different actions based on different values of a variable.

Q: What are functions in JavaScript?

A: Functions are blocks of code designed to perform a particular task and can be reused.

Q: What are events in JavaScript?

A: Events are actions that occur in the browser, like clicks or key presses, which can be handled

using event listeners.

Q: What is form validation in JavaScript?

A: Form validation ensures that user input is correct before it is sent to the server.

Q: What is Ajax in JavaScript?

A: Ajax (Asynchronous JavaScript and XML) is used to send and receive data asynchronously

without refreshing the web page.

Q: What are jQuery selectors?

A: jQuery selectors are used to select and manipulate HTML elements based on their name, id,

class, type, etc.

Q: What are mouse events in jQuery?

A: Mouse events in jQuery include click, dblclick, mouseenter, mouseleave, etc., to respond to user

interactions.

Q: What are form events in jQuery?

A: Form events include focus, blur, change, submit, and are used to handle user interactions with

forms.

Q: What is DOM manipulation in jQuery?

A: DOM manipulation involves changing the content, structure, or style of elements in the document

using jQuery methods.

Q: What are effects and animations in jQuery?

A: jQuery provides methods like show, hide, fadeIn, fadeOut, slideUp, and slideDown for adding

visual effects.

Q: What is traversing and filtering in jQuery?

A: Traversing and filtering involve navigating and refining selections in the DOM using methods like

parent(), children(), and filter().

Node.js Viva Questions and Answers

1. What is Node.js?

Node.js is a runtime environment that allows you to run JavaScript code outside of a browser. It is
built on Chrome's V8 JavaScript engine and is designed for building scalable network applications.

2. How do you install Node.js?

Node.js can be installed from the official website (https://nodejs.org/) or using a version manager
like nvm (Node Version Manager). Installation provides both the Node.js runtime and npm (Node
Package Manager).

3. How do you create a simple server in Node.js?

You can create a simple server using the built-in http module. Example:
const http = require('http');
const server = http.createServer((req, res) => {
res.write('Hello World');
res.end();
});
server.listen(3000);

4. What is a simple Node.js project?

A simple Node.js project might include creating a basic server that handles HTTP requests and serves
static content or processes form data.

5. What is Express.js?

Express.js is a minimal and flexible Node.js web application framework that provides features for
building web and mobile applications, such as routing, middleware support, and template engines.

6. How do you set up Express and define routes?

Install Express using npm and define routes like this:

const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Hello from Express');
});

app.listen(3000);

7. What is middleware in Express.js?

Middleware functions are functions that have access to the request and response objects and the
next middleware function. They are used to execute code, modify requests/responses, and end
request-response cycles.

8. What is password encryption in Node.js?

Password encryption is typically done using libraries like bcrypt to hash passwords before storing
them in a database. This enhances security by not storing raw passwords.
9. How is login functionality implemented in Node.js?

Login involves verifying user credentials by comparing entered passwords with hashed passwords in
the database and managing user sessions or tokens for authentication.

10. What is JWT in Node.js?

JWT (JSON Web Token) is used for securely transmitting information between parties as a JSON
object. It is commonly used for authentication in Node.js applications by encoding user information
and verifying it on each request.

1. How do you install MongoDB?

MongoDB can be installed by downloading the installer from the official MongoDB website
(https://www.mongodb.com/try/download/community) or using package managers like apt (for
Linux), Homebrew (for Mac), or Chocolatey (for Windows).

2. What is data modeling in MongoDB?

Data modeling in MongoDB involves designing the structure of documents and collections. Unlike
relational databases, MongoDB uses flexible schema design, where data is stored in BSON format
and can be nested with arrays and objects.

3. What is a query in MongoDB?

A query in MongoDB is a request to retrieve data from the database. Queries are usually written in
BSON format and are used to search for documents in collections based on specific criteria.

4. What is projection in MongoDB?

Projection in MongoDB allows you to specify which fields to include or exclude from the results when
querying documents. It is used to limit the data returned in a query.

5. What is the aggregation pipeline in MongoDB?

The aggregation pipeline in MongoDB is a framework for performing data processing and
transformation tasks. It allows you to aggregate data from multiple documents, filter, group, and
transform the data as needed using a series of stages.

6. What are the stages in an aggregation pipeline?

Some common stages in an aggregation pipeline include:

• $match: Filters documents based on conditions.

• $group: Groups documents by a specified key.

• $project: Modifies the structure of documents.

• $sort: Orders documents.

• $limit: Limits the number of documents.

• $unwind: Deconstructs an array field from the documents.

1. What is Angular?
Angular is a TypeScript-based open-source framework for building single-page web applications
(SPA). It is maintained by Google and provides tools and libraries for developing dynamic, rich web
applications.

2. How do you get started with Angular?

To get started with Angular, you need to install Node.js and npm (Node Package Manager). Once
these are installed, you can use the Angular CLI (Command Line Interface) to create and manage
Angular projects.
To create a new Angular project, you can run:
ng new my-app
cd my-app
ng serve

3. How do you create an Angular app from scratch?

To create an Angular app from scratch:

• Install Node.js and npm on your machine.

• Install Angular CLI globally using npm install -g @angular/cli.

• Create a new project using ng new project-name.

• Navigate into the project folder and run ng serve to start the development server.

4. What are Angular components?

Angular components are the building blocks of an Angular application. Each component is made up
of:

• A template (HTML)

• A stylesheet (CSS)

• A class (TypeScript)

• A metadata (decorators, like @Component)

A component controls a part of the user interface and communicates with other components
via inputs and outputs.

5. How do you bind data to an Angular component?

In Angular, you can bind data to components using the following methods:

• Property binding: Used to bind data from the component class to the template.
<div [innerText]="message"></div>

Event binding: Used to bind events from the template to methods in the component class.
<button (click)="submitData()">Submit</button>

6. What is ngModel and how does it work with two-way data binding?
ngModel is used for two-way data binding in Angular. It synchronizes the data between the
component and the view. Changes made in the view are reflected in the component and vice versa.
<input [(ngModel)]="name">
<p>{{name}}</p>
7. How do you fetch data from a service in Angular?
To fetch data from a service, first create a service using the Angular CLI:
ng generate service data

Then, inject the service into the component and use HttpClient to fetch data. Example:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any;

constructor(private dataService: DataService) {}

ngOnInit() {
this.dataService.getData().subscribe((response) => {
this.data = response;
});
}
}

8. How do you submit data to a service in Angular?

To submit data, use a method in the service that sends data via HttpClient.
Example:
submitData(data: any) {
return this.http.post('https://example.com/api/submit', data);
}

In the component:
this.dataService.submitData(formData).subscribe(response => {
console.log('Data submitted', response);
});

9. What is the HTTP module and how does it work in Angular?

The HTTP module in Angular is provided by @angular/common/http. It allows you to communicate
with backend services through HTTP requests. The HTTP client supports methods like GET, POST, PUT,
DELETE, and others.
You need to import HttpClientModule in your app.module.ts:
import { HttpClientModule } from '@angular/common/http';

@NgModule({
imports: [HttpClientModule]
})
export class AppModule {}
10. What are observables and how are they used in Angular?
Observables are used in Angular to handle asynchronous data streams. An observable emits values
over time and can be subscribed to, which makes it ideal for handling HTTP responses, form inputs,
or events.
import { Observable } from 'rxjs';

this.http.get('https://example.com/data').subscribe(data => {
console.log(data);
});

11. What is routing in Angular?

Routing in Angular allows navigation between different views or pages of an application. You define
routes in app-routing.module.ts and map them to components.
Example:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

Then, use the router outlet in the template:

<router-outlet></router-outlet>

Use routerLink in the template to navigate between routes:

<a routerLink="/home">Home</a>
1. What is React JS?

React JS is a JavaScript library for building user interfaces, developed and maintained by Facebook. It
enables the development of single-page applications with a component-based architecture, where
each component manages its own state and UI.

2. How do you install React JS?

To install React JS, you need to have Node.js and npm (Node Package Manager) installed on your
system. Once installed, you can create a new React app by running:
npx create-react-app my-app
cd my-app
npm start

3. What is create-react-app and how does it work?

create-react-app is a command-line tool that sets up a new React project with a pre-configured
development environment. It includes configuration for Webpack, Babel, and other dependencies, so
developers can focus on writing code without worrying about build configurations.

4. What is React Router and how do you use it?

React Router is a library used for routing in React applications. It allows you to navigate between
different components or views in a single-page application without reloading the page. You can
install React Router with:
npm install react-router-dom

To use React Router, you define routes and associate them with components. Example:
import { BrowserRouter as Router, Route, Switch } from 'react-
router-dom';
import Home from './Home';
import About from './About';

function App() {
return (
<Router>
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}

5. What are React Components?

React Components are the building blocks of a React application. They can be functional or class-
based, and they return JSX (a syntax extension for JavaScript that looks similar to HTML) to define the
structure and behavior of the UI. Components can manage state, receive inputs via props, and
handle user interactions.

6. What is the difference between State and Props in React?

 • State: A state is used to store data that changes over time. It is managed within a component
and can be updated using this.setState() in class components or the useState hook in
functional components.

Example:
const [count, setCount] = useState(0);

Props: Props (short for properties) are used to pass data from a parent component to a child
component. Props are immutable and cannot be modified by the child component.

Example:
<ChildComponent message="Hello" />

7. How do you handle forms in React?

In React, you can handle forms using controlled components, where the form element’s value is
controlled by the component's state. You can set the value property of an input field to the state and
handle the input changes with an event handler.
Example:
function Form() {
const [name, setName] = useState('');

const handleSubmit = (e) => {

e.preventDefault();
console.log(name);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

8. What is the component life-cycle in React?

React components have a life cycle consisting of several phases:

1. Mounting: When a component is created and inserted into the DOM (e.g., constructor,
render, componentDidMount).

2. Updating: When a component’s state or props change (e.g., shouldComponentUpdate,

render, componentDidUpdate).

3. Unmounting: When a component is removed from the DOM (e.g., componentWillUnmount).

Class components have life-cycle methods, while functional components use hooks like useEffect to
handle side-effects.
9. What is React Redux?

Redux is a state management library for JavaScript applications, often used with React. It provides a
centralized store for the application’s state and allows components to access the state through
actions and reducers. Redux follows a unidirectional data flow: Actions -> Reducers -> Store ->
Components.

To use Redux, you need to install it along with react-redux:

npm install redux react-redux

Example of a simple Redux store:

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {

switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
};

const store = createStore(reducer);

10. What is the difference between Angular and React JS?

• Architecture: Angular is a full-fledged framework, whereas React is a JavaScript library

primarily focused on building UIs. Angular provides more features out-of-the-box like
dependency injection, while React requires third-party libraries for things like routing and
state management.

• Learning Curve: Angular has a steeper learning curve due to its complex architecture and
more concepts to understand. React is more beginner-friendly with a simpler API and less
opinionated design.

• Data Binding: Angular uses two-way data binding, whereas React uses one-way data binding.

• State Management: React relies on third-party libraries (like Redux or Context API) for state
management, whereas Angular has built-in services for managing state.

• Performance: React typically offers better performance due to its virtual DOM, which
minimizes the number of updates to the real DOM.