VISVESVARAYA TECHNOLOGICAL

UNIVERSITY JNANASANGAMA, BELAGAVI –

590018

INTERNSHIP REPORT

Submitted in partial fulfilment of the requirements for the 8th semester

VTU CBCS Subject namely

BACHELOR OF ENGINEERING
In

COMPUTER SCIENCE AND ENGINEERING

Submitted by

RITESH
4SH21CS112

Under the guidance of

Prof. Sharanya R B

Department of Computer Science and Engineering

Shree Devi Institute Of Technology, Mangalore -574142
 SHREE DEVI INSTITUTE OF TECHNOLOGY
(An Institution under VTU, Belagavi)

Kenjar,Mangalore- 574142

Department of Computer Science and Engineering

CERTIFICATE

This is to certify that RITESH bearing USN: 4SH21CS112, a bonafied student of Shree
Devi Institute of Technology has undergone sixteen weeks of INTERNSHIP at Thaniya
Technology, Mangalore. This internship report is submitted in partial fulfilment for the
award of Bachelor of Engineering in Computer Science and Engineering of the
Visvesvaraya Technological University, Belagavi during the academic year 2024-2025

…………………….. …………………….. …………………….. ……………………..

Signature of Guide Signature of Internship Signature of HOD Signature of

Co-ordinator Principal
Prof. Sharanya R B Prof. Nisha Veronica Prof. Anand S Uppar Dr. K. E. Prakash
Coutinho

Examination:

Name of the Examiners Signature with date

1) ………………………… 1)……………………

2) ………………………… 2)……………………
 ACKNOWLEDGEMENT

I am indebted to our Principal Dr. K. E. Prakash and management of Shree Devi

Institute Of Technology for providing an environment with all facilities that helped
me in completing the internship.
I am extremely grateful to Prof. Anand S Uppar, HOD of the Computer Science
and Engineering Department for his moral support and encouragement.
I wish to express my sincere gratitude to my internal guide Prof. Sharanya R B and our
internship coordinator Prof. Nisha Veronica Coutinho from the Computer Science
& Engineering Department, for their guidance and suggestions.
I thank all the teaching and non-teaching staff of the Department of Computer Science
and Engineering for their kind help.
I also thank the company Thaniya Technology, Mangalore for providing me with this
golden opportunity to do the internship on the topic Web Technology which helped
me in learning new things.
Last but not the least, I would like to add some personal notes. If there is a driving force
that keeps me going, and what has not changed, it is the constant support and blessing
of my parents, family and friends. There is no doubt, in spite of my strenuous efforts;
error might remain in the internship report. Naturally, I take full responsibility for any
lack of clarity, occasional erratum or inexactness that may occur.

RITESH
4SH21CS112
 TABLE OF CONTENTS

CHAPTERS PAGE NO.

1. Introduction 1-4

1.1 Web Development Fundamentals 1

1.2 Introduction to Mern Stack 2

1.3 Objectives of Internship 3-4

2. Company Profile 5-9

2.1 About Company 5

2.2 Organization Structure 5-6

2.3 Visions 6

2.4 Mission 6

2.5 Policies 6-8

2.6 Products 8

2.7 Services 8-9

2.8 Customers 9

3. Internship Progress 10-59

4. Task Completed 60-70

5. Conclusion 71

References 72
 LIST OF FIGURES

FIGURE NO. FIGURE NAME PAGE NO.

3.8 Virtual DOM 40

3.9 MongoDB Database 42

4.1 Calculator 60

4.2 Time Table 61

4.3 Registration Form 61

4.4 Bouncing Ball 62

4.5 HeartBeat Animation 63

4.6 SquareBeat Animation 63

4.7 Website Clone 64

4.8 Champions Trophy Playcard 65

4.9 Dynamic Search Bar 66

4.9.1 Result After Search 66

4.10 Dynamic Products Showcase 67

4.11 Song Display using React 67

4.12 Login Form using React 68

Design a Navigation Bar (Navbar)

4.13 69
using React

4.14 To-Do List Using React Use State 70

INTERNSHIP REPORT

CHAPTER 1

INTRODUCTION

1.1 WEB DEVELOPMENT FUNDAMENTALS

Web development is the process of building and maintaining websites and web applications.
It encompasses various aspects including web design, front-end development, back-end
development, and database management. The field has evolved significantly over the years,
from simple static HTML pages to complex, interactive applications that provide rich user
experiences.

HTML (Hypertext Markup Language) is the standard markup language used to structure
content on the web. It provides the fundamental building blocks for web pages through a
system of elements and tags that define different types of content such as headings,
paragraphs, images, and links. HTML5, the latest version, introduced semantic elements like
<header>, <footer>,
<article>, and <section>, which provide more meaningful structure to web documents and
improve accessibility and SEO.

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of
HTML documents. It controls the layout, colors, fonts, and overall visual appearance of web
pages. CSS3, the current standard, introduced advanced features such as animations,
transitions, gradients, and flexible box layouts (Flexbox) and grid layouts, which have
revolutionized web design by enabling more sophisticated and responsive layouts without
relying on JavaScript or other scripting languages.

JavaScript is a high-level, interpreted programming language that enables interactive web

pages and is an essential part of web applications. Unlike HTML and CSS, which are
primarily concerned with content structure and presentation, JavaScript adds behavior and
functionality to web pages. It allows developers to create dynamic content, validate forms,
handle events, manipulate the Document Object Model (DOM), and communicate with
servers asynchronously. Modern JavaScript (ES6+) has introduced significant improvements
such as arrow functions, template literals, destructuring, and promises, making code more
concise and readable.

DEPT OF CSE, SDIT 1

INTERNSHIP REPORT

Together, HTML, CSS, and JavaScript form the foundation of front-end web development.
They work in harmony to create the user-facing aspects of websites and web applications.
HTML provides the structure, CSS enhances the visual presentation, and JavaScript adds
interactivity and dynamic behavior. Mastering these three technologies is the first step in
becoming proficient in the MERN stack, as they form the basis for more advanced
frameworks and libraries like React.js.

1.2 INTRODUCTION TO MERN STACK

The MERN stack is a comprehensive JavaScript-based technology stack used for building
modern web applications. It consists of four key components: MongoDB, Express.js,
React.js, and Node.js. Each technology in the stack serves a specific purpose and together
they enable developers to create full-stack applications using JavaScript throughout the entire
development process.

MongoDB is a NoSQL database that stores data in flexible, JSON-like documents. Unlike
traditional relational databases that use tables and strict schemas, MongoDB's approach
allows for variable data structures and dynamic schema evolution. This flexibility makes it
particularly suitable for applications where data requirements may change over time or where
the data structure is not rigidly defined from the outset.

Express.js is a minimal and flexible Node.js web application framework that provides a
robust set of features for building web and mobile applications. It simplifies the process of
creating server-side applications by providing tools for routing, middleware integration, and
HTTP request/response handling. Express.js follows the middleware pattern, allowing
developers to create a pipeline of functions that process HTTP requests in sequence.

React.js is a JavaScript library developed by Facebook for building user interfaces. It uses a
component-based architecture where UIs are composed of reusable, independent components.
React's virtual DOM implementation efficiently updates the actual DOM by only rendering
components that have changed, resulting in improved performance. This declarative approach
to UI development makes code more predictable and easier to debug.

DEPT OF CSE, SDIT 2

INTERNSHIP REPORT

Node.js is a JavaScript runtime environment that executes JavaScript code outside a web
browser. It uses an event-driven, non-blocking I/O model that makes it lightweight and
efficient for data-intensive applications. Node.js enables server-side JavaScript execution,
allowing developers to use the same programming language on both the client and server
sides, thus streamlining the development process.

The MERN stack offers several advantages for web development. It allows for consistent use
of JavaScript throughout the entire application, reducing the cognitive load of switching
between different programming languages. The modular nature of the stack enables
developers to work on individual components independently, facilitating parallel
development and maintenance. Additionally, all components of the MERN stack are open-
source and have large, active communities, ensuring ongoing support and a wealth of
available resources and libraries.

1.3 OBJECTIVES OF INTERNSHIP

To master HTML5, CSS3, and modern JavaScript: The initial goal was to build a solid
foundation in web development by thoroughly understanding HTML5 semantic elements,
CSS3 layouts and animations, and ES6+ JavaScript features. This included learning about
DOM manipulation, event handling, and asynchronous programming to create interactive
web pages. The objective focused on writing clean, maintainable code that follows industry
best practices.

To progress through the MERN stack technologies sequentially: This objective involves a
structured learning path through each component of the MERN stack. After establishing
front- end fundamentals, the plan is to learn Node.js and Express.js for backend development,
followed by MongoDB for database operations, and finally React.js for building dynamic
user interfaces. Each technology will be studied both independently and in the context of full-
stack integration.

To develop practical projects that demonstrate increasing complexity: The internship

aims to apply theoretical knowledge to practical projects of increasing sophistication.
Beginning with static websites utilizing HTML and CSS, progressing to dynamic pages with
JavaScript, then to server-side applications with Node.js, database-driven applications with
MongoDB, and finally to full MERN stack projects with React frontends. Each project serves
as a milestone to measure progress and competency.

DEPT OF CSE, SDIT 3

INTERNSHIP REPORT

To gain experience with modern development workflows and tools: This goal
encompasses learning essential development tools and practices including version control
with Git, package management with npm, debugging techniques, and testing methodologies.
The objective includes becoming familiar with development environments, code editors,
browser developer tools, and the command line interface to enhance productivity and code
quality.

To build a professional portfolio of MERN stack projects: Throughout the internship,

completed projects will be documented and compiled into a professional portfolio
demonstrating MERN stack proficiency. This portfolio will showcase progressive skill
development from basic HTML/CSS implementations to sophisticated full-stack applications,
providing tangible evidence of capabilities to potential employers.

DEPT OF CSE, SDIT 4

INTERNSHIP REPORT

CHAPTER 2

COMPANY PROFILE

2.1 COMPANY PROFILE

Thaniya technologies is an IT solutions based company which specializes in performing
custom design and development of projects which perfectly matches client business
requirements. Their subsidiaries include Rooloo designs, Rooloo Fixme and Drony Aeriels.
Their team uses cutting edge technologies to customize everything in a product development
process whether it's about the look & feel feature of front-end to skilled back-end
programming. Their customized methods and technologies result in full- functional, highly
dynamic and interactive solution.

They offer variety of services such as web design, web development, app development,
machine learning, Internet of things, game development and event management. With a team
of qualified professionals that are dedicated to delivering quality services for the success of
client's projects.

2.2 ORGANIZATIONAL STRUCTURE

DEPT OF CSE, SDIT 5

INTERNSHIP REPORT

2.2.1 PRINCIPLES

 Interdependency: Whole is greater than the sum of parts, knowing this has helped us
to develop and cultivate a culture of interdependency. It portrays a power of
connection and strives for the synergy through power of relationships.
Interdependency between different departments, individuals, clients and partners for a
greater good is what we are aiming at Thaniya technologies.
 Sharing: No social technology can grow without the benefit of sharing. The word
sharing is thrown around with wild abandon by almost any organization you interact
with, but very few works toward imbibing this concept in their products and services.
At Techno Triumph, we value sharing and in fact have it a core concept in our
internal as well as customer dealings. We also realize that sharing is a two-way street
and the more you share something, the more you will receive from it.
 Openness: Openness as a business trait has gained a lot of momentum in recent
times. Gone are the days when organizations were shy about revealing their business
plans. Openness is intrinsic to all our business dealings. Advent of social media has
brought about the change in the organizations and openness has become imperative.
Openness becomes more important when dealing with digital ventures.

2.3 VISION
"To Provide Quality Service and Solution in the field of Information Technology”

2.4 MISSION
 Train future task force with Quality internship and training.
 Provide IT solution in various domain.
 Get Recognized by Government and other Quality Assurance bodies.

2.5 POLICIES

Talent Acquisition policies

Resume Screening and Short Listing

 The HR Department will do the initial screening & short listing of resumes for the
position.

DEPT OF CSE, SDIT 6

 INTERNSHIP REPORT

 HR Department during the short listing will focus on: Education, Experience, Current
role/responsibilities, Salary level, Technical/ Functional/Domain Knowledge, Culture
fit, etc.
 The short listed resumes are sent to the concerned Business/Unit/ Functional Heads
for evaluation requesting them to indicate the action to be taken. As far as possible
(depending on the availability), reasonable number of candidates will be provided for
final selection.

Staffing Authority

The CEO/GCXO is the authority for staffing with the prior consent of Director.

Quality Policy General

As our first priority the management of Thaniya Technologies is committed to delivering quality
software to our customers. We recognize that consistent satisfaction of customer needs is
essential to business survival.

Planning

A Software Project Management Plan shall be created for all projects.

Monitoring and controlling

Project managers shall produce project performance reports at intervals agreed with the project
sponsor.

Documenting requirements

All projects shall prepare a Software Requirements Specification describing the functions,
performance and the interface requirements of the software product.

Architectural design

All projects shall conduct a Design Input Review to establish that design inputs such as Software

Requirements Specifications are unambiguous, complete and correct and possess sufficient
quality to support the development of a design solution.

DEPT OF CSE, SDIT 7

INTERNSHIP REPORT

Coding

Projects shall develop software in compliance with predefined coding standards. Coding
standards shall be updated to reflect any project specific practices.

Testing

All projects shall describe the approach to testing in a Software Test Plan. The STP shall
describe the project's approach to unit, integration and acceptance testing.

Managing quality

All projects shall plan and perform the software quality management activities required to
ensure that the customer's stated and implied needs are met and that the software product is
developed in compliance with recognized best practice.

Managing people

Project managers shall be responsible for ensuring that development team members are aware
of their quality responsibilities and appropriately trained to perform their assigned tasks.

2.6 PRODUCTS
Company develops android apps, web apps, ERP, Gaming etc. based on the customer
requirements. So based on the needs of customer it develops the products.

2.7 SERVICES

App Development

Company develops Custom made Application for Business, if anyone have an idea join with
company, it will build wonderful application for them.

Graphics Design

If anyone looking for Logo, Creative Poster, Visiting Cards, brochure etc. services regarding
these can be provided.

DEPT OF CSE, SDIT 8

INTERNSHIP REPORT

Web Development

Are you Looking for Website, do you have a Business and you want to make it online, we
will build website for you. Design-Host-Maintain.

Aerial Videography

Aerial Photography, Drone Photography/Videography can be provided to required ones.

Digital Marketing

It includes Search Engine Optimization, Translation and quality assurance of texts, Research
work and keyword strategies.

Event Management

A-Z services for customer’s event from Stage Decoration to Photography can be provided.

2.8 CUSTOMERS
Thaniya technologies served some companies/organizations such as Bhoomi Hardware,
MCF, Payana, Redhill Softec, Namaste Online etc. by providing software solution in
complete or part.

DEPT OF CSE, SDIT 9

INTERNSHIP REPORT

CHAPTER 3

INTERNSHIP PROGRESS
I learnt about the below-mentioned technologies and tools through my external guide and
online resources. Apart from learning these new technologies and tools, I also learned how to
effectively manage time and complete the given tasks within the deadline. The internship
allowed me to develop my interpersonal skills.

3.1 FIRST WEEK:

3.1.1 : INTRODUCTION TO HTML AND CSS

The first week of my internship laid the groundwork for understanding the basics of web
development through an in-depth focus on HTML (HyperText Markup Language) and CSS
(Cascading Style Sheets). These two technologies form the foundation for building and
designing web pages, and mastering them is essential for creating effective and visually
appealing websites.

3.1.2 : HTML: STRUCTURING THE WEB

During this week, I gained hands-on experience with various key HTML elements:

 Heading Tags: I learned about the six levels of heading tags (<h1> to <h6>) and their
role in defining the hierarchy and structure of a web page. I also practiced using
appropriate headings to improve both readability and accessibility.

 Image Tags (<img>): I explored the <img> tag to embed images in web pages. This
included understanding attributes like src (source) to specify the image path and alt to
provide descriptive text, ensuring accessibility for users and search engines.

 Anchor Tags (<a>): I learned to create hyperlinks using the <a> tag. By working
with the href attribute, I could link to other web pages, external resources, and even
specific sections within a page.

 Formatting Tags: Practiced using tags such as <b>, <i>, <u>, and <strong> to apply
emphasis and improve content presentation.
 Lists: Worked with both ordered (<ol>) and unordered lists (<ul>) to organize
information effectively. I also learned how to nest lists and add custom styles.

DEPT OF CSE, SDIT 10

 INTERNSHIP REPORT

 Tables: Developed skills in creating tables using the <table> tag, along with
attributes like border, cellspacing, cellpadding, and align, to organize data
systematically.
 Forms: Learned to create interactive forms using the <form> tag. This included
inputs for text fields, radio buttons, checkboxes, dropdown menus, and submit
buttons.
 Iframes: Discovered how to embed external content like videos or web pages using
<iframe> and its attributes for size and border control.
 Semantic Tags: Delved into semantic HTML tags such as <header>, <footer>,
<article>, and <section> to create well-structured, meaningful, and accessible
content for better SEO and user experience.

These elements helped me understand the fundamental building blocks of a web page and how
they interact with each other to create meaningful content.

3.1.3 : CSS (CASCADING STYLE SHEET)

In parallel, I studied both internal and external CSS to design and style web pages. Key
learnings included:

 Internal CSS: Adding styles directly within the <style> tag in an HTML document to
control the page's appearance.

 External CSS: Linking an external stylesheet using <link> for a more modular and
reusable approach to styling.

 Selectors and Properties: Practiced applying various CSS selectors to target specific
HTML elements and learned properties to modify layout, colors, font styles, and
more.

CSS selectors are patterns used to target specific HTML elements for styling. I learned about the
following types:

1. Simple Selectors

Simple selectors target specific elements based on their tag, class, or ID:

 Tagname Selector: Targets elements by their HTML tag (e.g., p, h1, div).

 Class Selector: Targets elements with a specific class attribute (e.g., .className).

 ID Selector: Targets elements with a specific id attribute (e.g., #idName).

DEPT OF CSE, SDIT 11
INTERNSHIP REPORT

 Universal Selector: Targets all elements (e.g., *).

DEPT OF CSE, SDIT 12

 INTERNSHIP REPORT

2. PseudoClass

:link : Targets links that have not yet been visited.

 Example: a:link { color: blue; }

:visited : Styles links that the user has already visited.

 Example: a:visited { color: purple; }

:active : Styles an element while it is being clicked or activated.

 Example: a:active { color: orange; }

:focus : Targets an element that is focused (e.g., a form input or a link when navigated to
using the keyboard).

 Example: input:focus { border: 2px solid blue; }

3. Pseudo Elements

::first-letter: Styles the first letter of a block-level element.

 Example: p::first-letter { font-size: 2em; color: red; }

::first-line: Styles the first line of a block-level element.

 Example: p::first-line { font-weight: bold; }

::before: Inserts content before the element's content.

 Example: h1::before { content: "★ "; color: gold; }

::after: Inserts content after the element's content.

 Example: h1::after { content: " ★"; color: gold; }

::selection: Styles the part of an element that the user highlights or selects.

1. Example: ::selection { background-color: yellow; color: black; }

::marker: Targets the marker box of list items (like bullets or numbering).

 Example: li::marker { color: blue; font-size: 1.5em; }

DEPT OF CSE, SDIT 13

 INTERNSHIP REPORT

4. Attribute Selectors

Attribute selectors target elements based on their attributes and values:

 Presence: [attribute] (e.g., [type] targets elements with a type attribute).

 Equality: [attribute="value"] (e.g., [type="text"] targets elements where type="text").

5. Combination Selectors

Combination selectors target elements based on relationships with other elements:

 Descendant Selector: Targets elements within a parent (e.g., div p).

 Child Selector: Targets direct children of a parent (e.g., div > p).

Responsive Design: Gained a basic understanding of using media queries to ensure web pages
adapt seamlessly to different screen sizes and devices.

3.2 SECOND WEEK:

3.2.1 ADVANCED CSS CONCEPTS AND JAVASCRIPT

3.2.1.1 Box Model, Transformation, and Display

In the second week of my internship, I explored more advanced concepts in CSS, focusing on the
box model, transformations, and the display property. These topics were crucial for
understanding how to control and manipulate the layout and appearance of web elements
effectively.

Box Model

The box model is a fundamental concept in CSS that defines the layout and spacing of elements
on a web page. This week, I gained a thorough understanding of its components:

 Content: The inner part of the box where text and images are displayed.

 Padding: The space between the content and the border, used to provide breathing
room inside the element.

 Border: The edge around the padding (if any) that outlines the element.

 Margin: The space outside the border, used to create distance between elements.

DEPT OF CSE, SDIT 14

 INTERNSHIP REPORT

I practiced adjusting these properties using CSS to control the spacing and alignment of
elements. Additionally, I learned about the box-sizing property, which allows developers to
include or exclude padding and borders in the total width and height of elements.

Transformation

Transformations in CSS are used to rotate, scale, skew, or translate elements, creating dynamic and
visually engaging effects. I explored the following transformation functions:

 Translate: Moves an element from its original position (transform: translateX(50px);

or transform: translateY(20px);).
 Scale: Changes the size of an element (transform: scale(1.5); for enlarging or
transform: scale(0.5); for shrinking).

Display Property

The display property is key to controlling the behavior of elements and their layout on a web
page. I studied the following display values:

 Block: Elements take up the full width of their container, starting on a new line
(display: block;).

 Inline: Elements appear on the same line as other content and take up only as much
width as needed (display: inline;).

 Inline-block: Combines the features of inline and block elements, allowing elements
to sit inline while respecting box model properties like padding and margins (display:
inline-block;).

Text Properties

Includes properties like color, font-size, font-family, line-height, and text-align to control the
appearance and alignment of text.

Marquee

The <marquee> tag creates scrolling text or images; however, it's outdated. Instead, CSS
animations can achieve similar effects.

DEPT OF CSE, SDIT 15

INTERNSHIP REPORT

Positions
CSS provides positions like static (default), relative (offset from normal position),
absolute (positioned relative to the nearest positioned ancestor), and fixed (stays in place
relative to the viewport).

Transition Properties

Used to create smooth changes between property values, such as transition: all 0.5s
ease-in-out; for animations like hover effects.

Animations

Created using @keyframes and animation properties, allowing elements to move, change
colors, or transform dynamically (e.g., animation: slide 2s infinite;).

Background

CSS provides properties like background-color, background-image, and background-size

to style an element's background.

Linear Gradient

A linear gradient creates a smooth transition between colors along a straight line. The
direction can be specified (e.g., top, left, diagonal).

 Example: background: linear-gradient(to right, red, blue);

Radial Gradient

A radial gradient creates a transition between colors radiating outward from a central point,
forming concentric circles.

 Example: background: radial-gradient(circle, yellow, green);

Navbar Styling

Styling a navigation bar involves flexbox or grid for alignment, background colors, hover
effects, and proper padding/margins for clean and responsive designs.

DEPT OF CSE, SDIT 16

INTERNSHIP REPORT

3.2.2 : JAVASCRIPT

It is both Frontend and Backend programming language which is used to develop web
applications, mobile applications, server.

JavaScript is a object based programming language because everything is considered object in

javascript.

3.2.2.1 : Data Types in JavaScript:

JavaScript supports several data types:

1. Primitive Data Types:

 Number: Represents numeric values, e.g., 42, 3.14.

 String: Represents text, e.g., "Hello, World!".
 Boolean: Represents logical values, true or false.
 Undefined: A variable that has been declared but not assigned a value.
 Null: Represents an empty or non-existent value.
 Symbol: Introduced in ES6, it represents unique and immutable values.
 BigInt: Allows representation of integers larger than the Number type.

2. Non-Primitive (Object) Data Types:

 Objects: Collections of key-value pairs.

 Arrays: Ordered collections of values.
 Functions: JavaScript allows functions to be treated as objects.
 Date: Used for handling and manipulating date and time.

Keywords in JavaScript:

Keywords are reserved words that have specific meanings and uses in JavaScript:

 Examples: var, let, const, if, else, for, while, break, function, return, try, catch,
switch, case, default, class, new, delete, typeof, etc.

Identifiers:

Identifiers are names used to identify variables, functions, or objects. They must begin with a
letter, underscore (_), or dollar sign ($), and cannot include reserved keywords.

Operators in JavaScript:

DEPT OF CSE, SDIT 17

INTERNSHIP REPORT

Operators are symbols used to perform operations on values and variables.

Types of Operators:

1. Arithmetic Operators: +, -, *, /, % (modulus), ** (exponentiation).

2. Comparison Operators: ==, !=, ===, !==, >, <, >=, <=.

3. Logical Operators: && (AND), || (OR), ! (NOT).

4. Assignment Operators: =, +=, -=, *=, /=.

5. Bitwise Operators: &, |, ^, ~, <<, >>.

6. Type Operators: typeof (returns the type of a variable), instanceof (checks if an

object is an instance of a class).

7. Ternary Operator: condition ? expr1 : expr2.

8. Special Operators: delete (removes a property from an object), new (creates a new
object).

Type of operator

The typeof operator in JavaScript is used to determine the data type of a given variable or
value. It returns a string indicating the type of the operand.

 "undefined": If the variable is declared but has not been assigned a value.

 "string": For string values, e.g., "Hello".

 "number": For numeric values, e.g., 42 or 3.14.

 "boolean": For true or false.

 "object": For objects (including arrays and null).

 "function": For functions.

 "bigint": For large integer values, introduced in ES2020.

 "symbol": For unique and immutable values, introduced in ES6.

Example Usage:

DEPT OF CSE, SDIT 18

INTERNSHIP REPORT

console.log(typeof "hello"); // Output: "string"

console.log(typeof 123); // Output:

"number" console.log(typeof true); // Output:

"boolean" console.log(typeof {}); // Output:

"object"

console.log(typeof null); // Output: "object" (this is a known quirk in

JavaScript) console.log(typeof undefined); // Output: "undefined"

console.log(typeof function(){}); // Output: "function"

3.3 THIRD WEEK:

3.3.1 : FUNCTIONS AND ARRAYS

3.3.1.1 : Functions:

Functions are reusable blocks of code designed to perform a specific task. They make
programs more modular, maintainable, and easier to debug. There are different types of
functions in JavaScript.

1. Named Function

A named function has an explicit name that you use to call it. It's useful for reusability and
clarity.

Example:

function greet()

{ console.log("Good

Evening");

greet()

2. Function Expression

Functions can be assigned to a variable, creating a function expression. These functions are
not hoisted.

DEPT OF CSE, SDIT 19

INTERNSHIP REPORT

Example:

let res=function add()

{ console.log("hi i am new

javascript")

res()

3. Anonymous Function

An anonymous function is a function without a name. It’s often used as a function expression
or in callbacks.

Example:

let res1 = function(){

console.log("Hi i am new hello world")

res1()

4. Arrow Function

Arrow functions provide a shorter syntax and were introduced in ES6. They do not bind their
own this.

Example:

let add = ()=>2+2

console.log(add());

5. Callback Function

A callback function is passed as an argument to another function and is executed later.

Example:

function add3(a,b){
console.log(a+b);
}

DEPT OF CSE, SDIT 20

INTERNSHIP REPORT

add3(function test()
{ return 4
},4)
function add4(a,b){
console.log(a()+b);
}

add4(function test()
{ return 4
},4
)

6. Higher-Order Function

A higher-order function takes another function as a parameter or returns a function.

Example:

function addition(a,b){
console.log(a()+b);
}
function sub()
{ return 4
}
addition(sub,4)
7. Immediately Invoked Function Expression (IIFE)

An IIFE runs immediately after it is defined. It's wrapped in parentheses.

Example:

(function mm(){
console.log("Hi i am javascript");
})();
(()=>{
console.log("hi i am keerthana");
})()

DEPT OF CSE, SDIT 21

INTERNSHIP REPORT

3.3.1.2 : Arrays in JavaScript:

An array is a special data structure used to store multiple values in a single variable. It allows
you to work with an ordered collection of items.

Syntax:

let arrayName = [element1, element2, element3];

Array Methods:

Arrays in JavaScript come with a variety of methods for adding, removing, and manipulating
elements:

1. Adding/Removing Elements:

 push(): Adds one or more elements to the end of an array.

 pop(): Removes the last element of an array.
 unshift(): Adds one or more elements to the beginning of an array.
 shift(): Removes the first element of an array.

2. Iterating over Arrays:

 forEach(): Executes a function for each element in the array.

 map(): Creates a new array with the results of calling a function on every
array element.

3. Searching/Filtering:

 indexOf(): Finds the first occurrence of a value in the array.

 includes(): Checks if an array contains a certain element.
 filter(): Returns a new array with elements that pass a test function.

4. Sorting and Reversing:

 sort(): Sorts array elements alphabetically or using a compare function.

 reverse(): Reverses the order of the array.

5. Combining/Extracting Data:

 concat(): Combines two or more arrays into a new array.

 slice(): Extracts a portion of the array into a new array.

DEPT OF CSE, SDIT 22

 INTERNSHIP REPORT

 splice(): Adds/removes elements from an array.

6. Transforming Arrays:

 reduce(): Reduces the array to a single value using a function.

 join(): Joins all array elements into a string.

3.4 FOURTH WEEK:

3.4.1 : STRINGS IN JAVASCRIPT

A string is a sequence of characters enclosed within single quotes ‘’, double quotes “ ” or backticks
``.

Example:

let singleQuote = 'Hello'; let

doubleQuote = "World";

Common String Methods

1. Length:

Returns the number of characters in a string.

Example:

let str = "Hello"; console.log(str.length);

// Output: 5

2. Accessing Characters:

You can access characters using their index.

Example:

let str = "World";

console.log(str[0]); // Output: W
3. Case Transformation:

 toUpperCase(): Converts the string to uppercase.

DEPT OF CSE, SDIT 23

INTERNSHIP REPORT

 toLowerCase(): Converts the string to lowercase.

Example:

let str = "Hello";

console.log(str.toUpperCase()); // Output: HELLO

4. Trimming:

 trim(): Removes whitespace from both ends of the string.

Example:

let str = " Hello ";

console.log(str.trim()); // Output:
"Hello"

5. Searching and Extracting:

 indexOf(): Finds the index of the first occurrence of a substring.

 includes(): Checks if a substring exists.
 slice(): Extracts a section of the string.

Example:

let str = "JavaScript";

console.log(str.indexOf("Script")); // Output: 4
console.log(str.slice(0, 4)); // Output: Java

6. Substring and Substr:

 substring(start, end): Extracts a part of the string (excluding end).

 substr(start, length): Extracts a substring with a specified length.

Example:

let str = "JavaScript";

console.log(str.substring(0, 4)); // Output: Java
console.log(str.substr(4, 6)); // Output: Script

7. Concatenation:

Combines multiple strings.

DEPT OF CSE, SDIT 24

INTERNSHIP REPORT

Example:

let str1 = "Hello";

let str2 = "World";

console.log(str1 + " " + str2); // Output: Hello World

8. Splitting and Joining:

 split(): Splits a string into an array.

 join(): Joins an array into a string.

Example:

let str = "Hello World";

let words = str.split(" ");
console.log(words); // Output: ["Hello", "World"]

9. Replacing:

 replace(): Replaces a substring with another.

Example:

let str = "Hello, World!";

console.log(str.replace("World", "JavaScript")); // Output: Hello, JavaScript!

10. Template Literals:

Introduced in ES6, template literals allow embedding expressions and variables.

Example:

let name = "Alice";

let greeting = `Hello, ${name}!`;

console.log(greeting); // Output: Hello, Alice!

3.4.2 : DESTRUCTURING

Destructuring is a feature in JavaScript that simplifies extracting values from arrays or

objects and assigning them to variables in a clear and concise way. It was introduced in ES6
(ECMAScript) and is widely used to work with complex data structures.

DEPT OF CSE, SDIT 25

INTERNSHIP REPORT

3.4.2.1 : ARRAY DESTRUCTURING

Used to unpack values from arrays into variables.

Example:
let colors = ["red","green","yellow","white"]
console.log(colors);
let[a,b,c,d]=colors
console.log(a,b,c,d);
3.4.2.2 : OBJECT DESTRUCTURING
Used to unpack values from objects into variables.

Example:
let student = {name:"miller",age:35,dept:"CSE"}
console.log(student);
let[a,b,c,d]=student
console.log(a,b,c,d);

3.4.3 : JSON
JSON stands for JavaScript Object Notation. It is a lightweight data-interchange format that
is easy for humans to read and write, and simple for machines to parse and generate. JSON is
widely used to transmit data between a server and a web application or for storing structured
data.

Features of JSON
1. Simple and Readable: It is text-based and easy to understand.

2. Language Independent: Although derived from JavaScript, JSON is supported by

most programming languages, including Python, Java, Ruby, etc.
3. Flexible Data Representation: Handles objects, arrays, numbers, strings, booleans,
and null values.

Json object
Example: {

"name": "Alice",
"age": 25,
"isStudent": false
}

DEPT OF CSE, SDIT 26

INTERNSHIP REPORT

3.5 FIFTH WEEK:

3.5.1 : DOM

The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of a document as a tree of nodes, allowing developers to manipulate
the content, structure, and style of web pages dynamically using JavaScript.

3.5.1.1 : INTRODUCTION TO DOM

 The DOM treats an HTML or XML document as a hierarchical tree structure.

 Each element (e.g., <div>, <p>) is represented as a node within the DOM tree.
 With JavaScript, you can add, modify, or delete elements on the webpage using the
DOM.

3.5.1.2 : COMMON DOM METHODS

DOM methods allow developers to interact with the structure and content of a web page.

1. Selecting Elements
 getElementById(): Selects an element by its ID.

 document.getElementById("myId");
 getElementsByClassName(): Selects elements by their class name.

 document.getElementsByClassName("myClass");
 getElementsByTagName(): Selects elements by their tag name.

 document.getElementsByTagName("div");
 querySelector(): Selects the first matching element using a CSS selector.
 document.querySelector(".myClass");

 querySelectorAll(): Selects all matching elements using a CSS selector.

 document.querySelectorAll(".myClass");

2. Modifying Elements
 innerHTML: Changes the content inside an element.

 document.getElementById("myId").innerHTML = "New Content";

 textContent: Changes the text content of an element.

 document.getElementById("myId").textContent = "New Text";

 style: Modifies the inline CSS of an element.

DEPT OF CSE, SDIT 27

 INTERNSHIP REPORT

 document.getElementById("myId").style.color = "red";
 setAttribute(): Sets an attribute (like src, href, alt) on an element.

 document.getElementById("myImage").setAttribute("src", "image.jpg");

3. Adding/Removing Elements
 createElement(): Creates a new DOM element.
 let newElement = document.createElement("p");

 newElement.textContent = "I am a new paragraph!";

 removeChild(): Removes a child element.

 let parent = document.getElementById("parent");

 let child = document.getElementById("child");

 parent.removeChild(child);

4. Event Handling
You can use DOM methods to add or remove event listeners on elements.

 addEventListener(): Attaches an event

handler. Example:
document.getElementById("button").addEventListener("click", function()
{ alert("Button clicked!");
});
 removeEventListener(): Removes an event
handler. Example:
document.getElementById("button").removeEventListener("click",
myFunction);
 Event Bubbling():an event triggered on a child element first runs its handler, then
propagates (or "bubbles") up the DOM tree to its parent elements and their
handlers, in sequence.

Example:

<div class="grandparent" onclick="grandparent()">

<div class="parent" onclick="parent()">
<div class="child" onclick="child()"></div>
</div> </div>

DEPT OF CSE, SDIT 28

INTERNSHIP REPORT

function grandparent()
{ console.log("Hi i am
grandparent");}
function parent()
{ console.log("Hi i am
parent");}
function child()
{ console.log("Hi i am
child");
}
3.5.1.3 : TIME FUNCTIONS IN JAVASCRIPT

JavaScript provides several time-related functions to execute code after a delay or repeatedly
at regular intervals.

1. setTimeout()
Executes a function once after a specified delay (in milliseconds).
Example:
setTimeout(() => {

console.log("This runs after 2 seconds");

}, 2000);

2. clearTimeout()
Stops a setTimeout() call that hasn't executed yet.
Example:
let timer = setTimeout(() => console.log("This won't run"), 2000);
clearTimeout(timer);

3. setInterval()
Executes a function repeatedly at specified intervals.
Example:
let counter = 0;
let interval = setInterval(() => {
counter++;
console.log(`Counter: ${counter}`);
if (counter === 5) clearInterval(interval);
DEPT OF CSE, SDIT 29
INTERNSHIP REPORT
}, 1000); // Runs every second

DEPT OF CSE, SDIT 30

INTERNSHIP REPORT

4. clearInterval()
Stops a setInterval() call.
Example:
let interval = setInterval(() => console.log("Repeating..."), 1000);
clearInterval(interval); // Stops the interval

3.6 SIXTH WEEK:

3.6.1 : EXCEPTION HANDLING IN JAVASCRIPT

Exception handling is the process of detecting and managing errors during program
execution. JavaScript provides powerful tools for gracefully handling unexpected issues to
ensure the program continues to run smoothly.

Tools for Exception Handling:

Try Catch Block:

The try block contains code that might throw an error.

The catch block executes if an error is thrown.

Example:

try {
let result = 10 / 0;
console.log(result); // Output:
Infinity
} catch (error) {
console.log("Error occurred:", error.message);

3.6.2 : ASYNC AND AWAIT IN JAVASCRIPT

Async and Await are modern JavaScript features introduced for working with asynchronous
operations, primarily promises. They simplify writing asynchronous code and make it easier
to read and debug.

How Async/Await Works:

DEPT OF CSE, SDIT 31

INTERNSHIP REPORT

1. async Keyword:

Declares an asynchronous function that always returns a promise.

You can use await inside an async function.
Example:

async function fetchData() {

return "Data fetched successfully!";

}
fetchData().then(data => console.log(data));

2. await Keyword:

Pauses the execution of the async function until the promise is resolved or rejected.

Example:

async function getData() {

const response = await fetch("https://api.example.com/data");

const data = await response.json();

console.log(data);}

getData(); // Fetches and logs the data when ready

3.6.3 REACTJS

ReactJS is a popular JavaScript library for building user interfaces, particularly for single-
page applications. It allows developers to create reusable UI components and manage the
state of applications efficiently.

3.6.3.1 : IMPORT AND EXPORT

React uses ES6 modules for importing and exporting components, functions, or variables.

1. Export:

 Named Export:

export const name = "React";

export const version = "18.0";

DEPT OF CSE, SDIT 32

INTERNSHIP REPORT

 Default Export:

const App = () => <h1>Hello, React!</h1>;

export default App;

2. Import:

 Named Import:

import { name, version } from "./module";

 Default Import:

import App from "./App";

Named exports allow multiple exports from a file, while default exports are used for single
exports.

3.6.3.2 : PROPS

Props (short for properties) are used to pass data from a parent component to a child
component in React. They are read-only and help make components reusable.

Syntax:

function Welcome(props) {

return <h1>Hello, {props.name}!</h1>;

}

function App() {
return <Welcome name="React" />;
}

Props can also be objects or variables, enabling dynamic data transfer between components.

DEPT OF CSE, SDIT 33

INTERNSHIP REPORT

3.7 SEVENTH WEEK:

3.7.1 KEY PROPS IN REACT

A key is a special prop that helps React identify which items in a list have changed, been
added, or removed. Keys improve performance by allowing React to efficiently update the UI.

Example:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>

<li key={number.toString()}>{number}</li>

);

return <ul>{listItems}</ul>;

3.7.2 DEFAULT PROPS

Default props allow you to set default values for a component's props in case they are not
provided by the parent component. This ensures that your component behaves as expected
even when some props are missing.

Example:
const UserInfo = ({ name = "N/A", age = "N/A" }) => (
<div>

<p>Name: {name}</p>
<p>Age: {age}</p>

</div>
);

3.7.3 CONDITIONAL RENDERING

It is the process of rendering the html element from the components based on the condition
Example:
function student()
{ let marks = 20;
if (marks>50) {

DEPT OF CSE, SDIT 34

INTERNSHIP REPORT

return <h1>Good Student</h1>;

}else{

return <h1>Bad Student</h1>;

}}

3.7.4 REACT FRAGMENTS

React Fragments allow you to group multiple elements without adding extra nodes to the
DOM. Normally, when returning multiple elements from a component, you'd wrap them in a
<div> but this can lead to unnecessary nesting in the DOM. Fragments solve this issue!

Example:

function MyComponent()
{ return (
<React.Fragment>
<h1>Hello</h1>

<p>This is a paragraph.</p>
</React.Fragment>

);
}

3.7.5 HOOKS
In React, a hook is a special function that allows functional components to use state and other
React features without needing class components. Hooks were introduced in React 16.8 to
simplify component logic and improve reusability.

Rules of Hooks:

1. Hooks must be at the top level of functional component.

2. Hooks must be inside functional component.
3. Hooks can be inside custom hooks.
4. Hooks should not be inside class component.
5. Hooks should not be inside conditional statements.
6. Hooks should not be inside looping statements.
7. Hooks should not be inside regular functions.
8. Hooks should not be inside nested functions.

DEPT OF CSE, SDIT 35

 INTERNSHIP REPORT

3.7.5.1 : USE STATE( ):

The useState hook in React allows functional components to manage state. It provides a way to
store and update values that persist across renders.

Key Features of useState

 Initializes state with a default value.

 Returns an array with the current state and a function to update it.

 Triggers re-renders when the state

changes. Example:

import React, {useState} from 'react'

import './Appss.css';
const Inputtracker = () => {
const [inputValue, setInputValue] = useState(''); const
handleChange = (e) => {
setInputValue(e.target.value);

};
return (

<div className="container">
<h1>Input Tracker</h1>
<input

type="text"
className="input-field"
placeholder="Type something..."
value={inputValue}
onChange={handleChange} />
<p className="output">You typed: <span>{inputValue || '...'}</span></p>

</div>
)}
export default Inputtracker

DEPT OF CSE, SDIT 36

INTERNSHIP REPORT

3.8 EIGHTH WEEK:

3.8.1 HOOKS CONTINUATION

Hide and Show Button Example using UseState:

import React from 'react';

import { useState } from 'react';
const Hooks = () => {
let [toggle, setToggle] = useState(true);
let hideHeading = () => {
setToggle(false);
}
let showHeading = () => {
setToggle(true);
}
return (

<div>
{toggle === true && <h1>Hi welcome to internship</h1>}

<button onClick={showHeading}>Show</button>
<button onClick={hideHeading}>Hide</button>

</div>
);

}
export default Hooks;

3.8.1.1 : USE REF( ):

 UseRef is a Hook that allow to modify or create a reference to the DOM element in
the functional Component.
 UseRef is used for focusing and media purpose.
 The Main use of UseRef Hook is to access the DOM elememts in a more efficient way.
 UseRef will return one object with current value.

DEPT OF CSE, SDIT 37

 INTERNSHIP REPORT

Example:
import React, { useRef } from "react";
function NameInput() {
const inputRef = useRef(null);
const focusInput = () => {
if (inputRef.current) {
inputRef.current.focus(); // Focus the input field
}

};
return (

<div>
<input ref={inputRef} type="text" placeholder="Enter your name" />
<button onClick={focusInput}>Focus Input</button>

</div>
);

}
export default NameInput;

3.8.1.2 : USE EFFECT( ):

 The UseEffect in the ReactJs is used to handle the sideeffect such as fetching the data
and updating DOM.
 This hooks runs on every render but there is also way of using dependency array
using which we can control the effect of re-rendering.

Example:
import React, { useRef, useEffect } from "react"; function
NameInput() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();

DEPT OF CSE, SDIT 38

INTERNSHIP REPORT

}
}, []); // Empty dependency array ensures it runs only once after mount
return (
<div>

<input ref={inputRef} type="text" placeholder="Enter your name" />

<button onClick={() => inputRef.current.focus()}>Focus Input</button>

</div>
);

}
export default NameInput;

3.8.2 AXIOS METHOD

Axios is a JavaScript library used to make HTTP requests from the browser or Node.js. It
helps in fetching data from an API, sending data to a server, and handling responses
efficiently.

Example:

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

import axios from "axios";
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users")
.then(({ data }) => setData(data))

.catch(console.error);
}, []);

return data ? <ul>{data.map((user) => <li key={user.id}>{user.name}</li>)}</ul> :

<p>Loading...</p>;
}

export default FetchData;

DEPT OF CSE, SDIT 39

INTERNSHIP REPORT

3.8.3 PROPS DRILLING

Props Drilling happens in React when you pass down props through multiple nested
components just to get data to a deeply nested child component. This can make your code
hard to maintain.

Example:

import React from "react";

// Parent component
function App() {
const user = { name: "Alice", age: 25 };
return <Parent user={user} />;
}

// Intermediate component passing the prop further

function Parent({ user }) {
return <Child user={user} />;
}

// Deeply nested component

function Child({ user }) {
return <p>Name: {user.name}, Age: {user.age}</p>;
}
export default App;

If you have many nested components, passing props manually becomes repetitive.

Solution: Context API

Instead of passing props down manually, React Context API allows components to access
global data without drilling

Example:

import React, { createContext, useContext } from "react";

const UserContext = createContext();
function App() {

const user = { name: "Alice", age: 25 };

DEPT OF CSE, SDIT 40

INTERNSHIP REPORT

return (
<UserContext.Provider value={user}>

<Child />
</UserContext.Provider>

);
}

function Child() {
const user = useContext(UserContext);

return <p>Name: {user.name}, Age: {user.age}</p>;

}

export default App;

3.8.4 VIRTUAL DOM

The Virtual DOM is a key concept in React that helps improve performance and efficiency
when updating the UI. Instead of directly modifying the real DOM, React creates a
lightweight copy of it, known as the Virtual DOM, where changes are first applied before
updating the actual DOM.

How the Virtual DOM Works:

1. Initial Render: React creates a Virtual DOM representation of the UI.

2. State/Prop Change: When data changes, React updates the Virtual DOM instead of
modifying the real DOM immediately.

3. Diffing Algorithm: React compares the previous Virtual DOM with the updated
one to detect differences.

4. Efficient Updates: React only updates the necessary parts of the actual
DOM, reducing performance overhead.

Benefits of the Virtual DOM:

 Faster updates: Avoids unnecessary manipulations of the real DOM.

 Efficient rendering: Only changes are applied, rather than reloading the entire UI.

 Improved performance: Reduces costly operations and speeds up UI rendering.

DEPT OF CSE, SDIT 41

 INTERNSHIP REPORT

Figure 3.8: Virtual DOM

3.8.5 FORM VALIDATION

Form validation is the process of checking user input in a form before submitting it. It ensures
that the provided data is correct, complete, and follows expected rules to prevent errors or
security issues.

Example:

import React, { useState } from "react";

function FormValidation() {
const [email, setEmail] = useState("");
const [error, setError] = useState("");
const validateEmail = (e) => {
const value = e.target.value;
setEmail(value);
// Basic email validation

if (!value.includes("@") || !value.includes("."))
{ setError("Invalid email format");
} else {
setError("");
}

DEPT OF CSE, SDIT 42

INTERNSHIP REPORT

};
const handleSubmit = (e) => {
e.preventDefault();
if (!email) {

setError("Email is required");
} else if (!error) {

alert("Form submitted successfully!");

}

};
return (

<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter email" value={email}
onChange={validateEmail} />

{error && <p style={{ color: "red" }}>{error}</p>}

<button type="submit">Submit</button>
</form>

);
}

export default FormValidation;

3.9 NINTH WEEK

3.9.1 MONGODB

MongoDB is a popular NoSQL database that stores data in a flexible, JSON-like format
called BSON (Binary JSON). Unlike traditional relational databases (such as MySQL or
PostgreSQL), MongoDB does not use tables and rows. Instead, it works with documents and
collections, making it highly scalable and efficient for handling large amounts of unstructured
data.

DEPT OF CSE, SDIT 43

INTERNSHIP REPORT

Figure 3.9: MongoDB Database

27017 is the default Port address of the MongoDB.

3.9.1.1 : COMMANDS

 showdbs: show dbs lists all databases in the MongoDB server.

 use: This command switches to the specified database.
 If the database does not exist, MongoDB creates it automatically when you
add data.
Example:
use myDatabase
 This switches to (or creates) a database called myDatabase.
1. Command to create collection:
db.createCollection(“name”)
2. Command to display the list of collection:
show collections
3. Command to delete database:
db.dropDatabase( )
4. Command to delete collection:
db.collectionname.drop( )

3.9.2 CRUD OPERATIONS

CRUD operations (Create, Read, Update, Delete) are the basic actions you can perform on a
MongoDB database.

1. Create Method:
 insertOne(data): Inserts a single document into a collection.

DEPT OF CSE, SDIT 44

INTERNSHIP REPORT

Example:
db.users.insertOne({ name: "Alice", age: 25 })
 insertMany(data): Inserts multiple documents at once.
Example:
db.users.insertMany([{ name: "Bob", age: 30 },
{ name: "Charlie", age: 28 }])
2. Read Method:
 findOne(filter,options): Returns only one document that matches the query.
Example:
db.users.findOne({ name: "Alice" })
If multiple documents match, it returns the first one found.
 findMany(filter,options): Returns multiple documents that match the
query.Can be used with filters and projections.
Example:
db.users.find({ age: { $gt: 25 } }) # Get users older than 25

3. Update Method:
 updateOne(filter,data,options): Updates only one document that matches the
filter. If multiple documents match, only the first one gets updated.
Example:
db.users.updateOne({ name: "Alice" }, { $set: { age: 26 } })
 updateMany(filter,data,options): Updates multiple documents that match
the filter.
Example:
db.users.updateMany({ city: "New York" }, { $set: { country: "USA" }
})
 replaceOne(filter,data,options): Replaces an entire document, keeping only
the new fields.Unlike updateOne(), existing fields are removed unless
included. Example:
db.users.replaceOne(
{ name: "Bob" },
{ name: "Bob", age: 30, city: "Chicago" }
)

DEPT OF CSE, SDIT 45

INTERNSHIP REPORT

4. Delete Method:
 deleteOne(filter): Deletes only one document that matches the
filter Example:
db.users.deleteOne({ name: "Alice" })
 deleteMany(filter): Deletes multiple documents matching the filter.
Example:
db.users.deleteMany({ city: "New York" })

3.9.3 COMPARISON OPERATORS

1. $eq → Equal to

2. $ne → Not equal to

3. $gt → Greater than

4. $gte → Greater than or equal to

5. $lt → Less than
6. $lte → Less than or equal to

7. $in → is used to compare multiple value of same field

8. $nin → not in

Examples for the comparison operators:

1. Write a query to display all the documents who is getting some salary.
 db.employee.find({“salary”:{$ne:null}})

2. Write a query to display all the employee details who is working in dept HR or Finance.
 db.employee.find({"dept": {$in: ["HR", "Finance"]}})
3. Write a query to display all the employee details whose salary is more than 10,000.
 db.employee.find({"salary": {$gt: 10000}})
4. Write a query to display where dept is IT.
 db.employee.find({"dept": "IT"})
5. Details whose is not working under dept "HR" & IT.
 db.employee.find({"dept": {$nin: ["HR", "IT"]}})
6. Write a query to display all the employee details whose is not getting salary less than
15000.
 db.employee.find({"salary": {$not: {$lt: 15000}}})
7. Write a query to display all the employee details who is getting salary below 15000.

DEPT OF CSE, SDIT 46

INTERNSHIP REPORT

 db.employee.find({"salary": {$lt: 15000}})

8. Write a query to display all the employee details who is working in department IT and
having the salary less than 25000
 Db.employee.find({"dept":{$eq: "IT"}, "salary":{$lt:25000}})

3.10 TENTH WEEK

3.10.1 QUERIES

1. Write a query to display all the employee details who is working in dept HR OR the
emp having age 50.
 db.employee.find({$or: [{"dept": "HR"}, {"age": 50}]})
2. Write a query to display all the employee details who is working under IT and getting
salary 20000 or working in dept production and getting salary 22000.
 db.employee.find({$or: [{"dept": "IT", "salary": 20000}, {"dept": "production",
"salary": 22000}]})

3. Write a query to display all the employee details who is working in dept sales or
employee department gender male.
 db.employee.find({$or: [{"dept": "sales"}, {"gender": "male"}]})
4. Write a query to display all the employee details except dept HR and IT
 db.employee.find({$nor: [{"dept": "HR"}, {"dept": "IT"}]})
5. Write a query to display all the employee details who is working as production and
his gender is male.
 db.employee.find({$and: [{"dept": "Production"}, {"gender": "male"}]})
6. Write a query to display all the employee details who is getting salary below 15000 or
dept is production.
 db.employee.find({$or: [{"salary": {$lt: 15000}}, {"dept": "production"}]})
7. Write a query to display all the employee details who is not getting any salary or who
is not working in any dept.
 db.employee.find({$or: [{"salary": null}, {"dept": null}]})
8. Write a query to display all the employee details whose age is greater than 30 and
getting some salary.
 db.employee.find({$and: [{"salary": {$ne: null}}, {"age": {$gt: 30}}]})

DEPT OF CSE, SDIT 47

 INTERNSHIP REPORT

9. Write a query who is getting salary more than 30,000 and working in dept sales or
dept IT.
 db.employee.find({$and: [{"salary": {$gt: 30000}}, {$or: [{"dept": "sales"},
{"dept": "IT"}]}]})
10. Write a query who is not getting salary and who is not working in any department.
 db.employee.find({$and: [{"salary": null}, {"dept": null}]})

3.10.2 SELECTION AND PROJECTION

Selection:

Selection refers to filtering documents from a collection based on specific conditions.

It is done using the find() method.

Example:

db.users.find({ age: 25 }) # Selects users with age 25

Projection:

Projection controls which fields should be displayed in the query result. It is defined in
the second parameter of find().

Example:

db.users.find({}, { name: 1, age: 1 }) # Shows only name & age db.users.find({

city: "New York" }, { _id: 0, name: 1 }) # Hides `_id`

Example Queries:

1. Show only emp names and dept.

 db.employee.find({}, {name: 1, dept: 1, _id: 0})
2. Show names and salary of all emp.
 db.employee.find({}, {name: 1, _id: 0, salary: 1})
3. Show name, age and gender of all emp. db.employee.
 find({}, {name: 1, _id: 0, age: 1, gender: 1})
4. Show department and salary of only male employees.
 db.employee.find({gender: "male"}, {dept: 1, _id: 0, salary: 1})
5. Show only names of emp from the HR dept. db.employee.

DEPT OF CSE, SDIT 48

INTERNSHIP REPORT

 find({dept: "HR"}, {name: 1, _id: 0})

6. Show names and salary of employees who is having some salary.
 db.employee.find({salary: {$ne: null}}, {name: 1, _id: 0, salary: 1})
7. Show the emp names and salary who is getting salary more than 15000.
 db.employee.find({salary: {$gt: 15000}}, {name: 1, _id: 0, salary: 1})

3.10.3 ELEMENT OPERATORS

1. $exists: Checks if a field exists in a

document. Example:
db.users.find({ age: { $exists: true } }) # Selects users with an "age" field
2. $type: Matches documents where a field is a specific data
type. Example:
db.users.find({ age: { $type: "number" } }) # Finds users where "age" is a
number

3.10.4 ARRAY OPERATORS

1. $size: Matches arrays with a specific number of

elements. Example:
db.users.find({ skills: { $size: 3 } }) # Finds users with exactly 3 skills
2. $all: Matches arrays containing all specified values.
Example:
db.users.find({ hobbies: { $all: ["reading", "traveling"] } }) # Must have both
hobbies

3.10.5 CURSOR OBJECT METHOD

1. Count( ): Returns the total number of matching

documents. Example:
db.users.find({ age: 25 }).count()
2. Skip(n): Skips the first n documents in the query result.
Example:
db.users.find().skip(2)
3. Sort( ): Orders documents in ascending (1) or descending (-1) order.
Example:
db.users.find().sort({ age: -1 }) # Sort by age in descending order

DEPT OF CSE, SDIT 49

INTERNSHIP REPORT

4. Limit(n): Restricts the number of documents

returned. Example:
db.users.find().limit(5)

3.10.6 UPDATE METHODS

In MongoDB, the update method is used to modify documents, and various update operators
help control specific field changes.

1. $set – Updates or adds a field

Example:
db.users.updateOne({ name: "Alice" }, { $set: { age: 26 } })
2. $unset – Removes a field
Example:
db.users.updateOne({ name: "Alice" }, { $unset: { age: "" } })
3. $min – Updates the field only if the new value is lower
Example:
db.users.updateOne({ name: "Alice" }, { $min: { age: 24 } })

4. $max – Updates the field only if the new value is higher

Example:
db.users.updateOne({ name: "Alice" }, { $max: { age: 30 } })
5. $mul – Multiplies the field value by a factor
Example:
db.products.updateOne({ item: "Laptop" }, { $mul: { price: 1.10 } })
6. $rename – Renames a field
Example:
db.users.updateOne({}, { $rename: { "fullName": "name" } })
7. $inc – Increases or decreases a numerical field
Example:
db.users.updateOne({ name: "Alice" }, { $inc: { age: 1 } })

DEPT OF CSE, SDIT 50

INTERNSHIP REPORT

3.11 ELEVENTH WEEK

3.11.1 : UPDATE ARRAY OPERATORS

In MongoDB, array update operators help modify arrays inside documents. Here are three
important operators:

1. $push – Adds an element to an array

Example:

db.users.updateOne({ name: "Alice" }, { $push: { skills: "MongoDB" } })

2. $pop – Removes the first (-1) or last (1) element from an array

Example:

db.users.updateOne({ name: "Alice" }, { $pop: { skills: -1 } }) # Removes

first db.users.updateOne({ name: "Alice" }, { $pop: { skills: 1 } }) # Removes
last item
3. $pull – Removes a specific value from an array

Example:

db.users.updateOne({ name: "Alice" }, { $pull: { skills: "React" } })

3.12 TWELVETH WEEK

INDEXING IN MONGODB

Indexing is a critical aspect of database optimization in MongoDB. It helps to quickly locate

data without scanning every document in a collection, similar to how an index works in a book.
This section will cover various types of indexes and their detailed usage.

3.12.1: SINGLE FIELD INDEX

A single field index is created on one specific field. It is useful for queries that filter or sort
based on a single field. Example: db.users.createIndex({ age: 1 })

 The value '1' signifies ascending order, while '-1' would indicate descending order.
 This index is highly effective for queries like:
DEPT OF CSE, SDIT 51
INTERNSHIP REPORT
o db.users.find({ age: 30 })
o db.users.find().sort({ age: 1 })

3.12.2: COMPOUND INDEX

A compound index includes multiple fields, allowing queries to leverage more than one field
for efficient data retrieval. Example: db.users.createIndex({ age: 1, salary: -1 })

 This index will prioritize the 'age' field first, then sort by 'salary' in descending order.
 Efficient for queries like:
o db.users.find({ age: { $gt: 25 } }).sort({ salary: -1 })
o db.users.find({ age: 30, salary: 60000 })
 Order of fields in the index matters, as MongoDB can only use the prefix subset of
fields in the index for sorting.

3.12.3: TEXT INDEX

Text indexes allow for efficient search within text fields. Only one text index per collection is
permitted, but it can include multiple fields. Example: db.products.createIndex({ description:
"text", name: "text" })

 Supports queries like:

o db.products.find({ $text: { $search: "laptop" } })
o db.products.find({ $text: { $search: ""laptop" -tablet" } }) # Excludes 'tablet'

3.12.4: UNIQUE INDEX

A unique index prevents duplicate values for the indexed field. It is commonly used on fields
like email or username. Example: db.users.createIndex({ email: 1 }, { unique: true })

 Any attempt to insert a duplicate email will result in an error.

 Useful for enforcing data integrity in applications.

3.12.5: SPARSE INDEX

A sparse index only includes documents that contain the indexed field. It is useful for
collections with missing or optional fields. Example: db.users.createIndex({ phoneNumber: 1 },
{ sparse: true })

DEPT OF CSE, SDIT 52

INTERNSHIP REPORT
 Only documents with a 'phoneNumber' field will be indexed.

3.12.6: PARTIAL INDEX

A partial index only indexes documents that meet specified criteria, reducing index size and
improving write performance. Example: db.users.createIndex({ age: 1 },
{ partialFilterExpression: { age: { $gte: 30 } } })

 Only users aged 30 and above will be indexed.

3.12.7: DROP INDEX

Indexes that are no longer useful can be dropped to free up space and improve write
performance. Example: db.users.dropIndex("age_1")

 To view all indexes on a collection:

o db.users.getIndexes()

Indexing Best Practices and Use Cases:

 Limit the number of indexes to avoid write overhead.

 Analyze query patterns and use compound indexes strategically.
 Use partial and sparse indexes to optimize collections with large amounts of null or
missing values.
 Regularly monitor index performance using the explain() method.

3.13 THIRTEENTH WEEK

AGGREGATION FRAMEWORK

The Aggregation Framework in MongoDB is a powerful tool for processing and analyzing data
in multiple stages. It enables complex data transformations and computations, similar to SQL
queries involving GROUP BY, SUM, COUNT, etc.

3.13.1: INTRODUCTION TO AGGREGATION PIPELINE

 The aggregation pipeline is a framework for data aggregation, modeled as a series of

data processing stages, each performing a specific operation on the data.

DEPT OF CSE, SDIT 53

INTERNSHIP REPORT
 Common stages include: $match, $group, $sort, $project, $limit, $skip, $lookup,
$unwind, $out, and $merge.
 Syntax: db.collection.aggregate([ { stage1: { ... } }, { stage2: { ... } }, ... ])

3.13.2: $MATCH

 Filters documents by specified criteria, similar to a WHERE clause in SQL. Example:

db.sales.aggregate([ { $match: { status: "Completed" } } ])
 Supports logical operators such as $and, $or, $gt, $lt, etc.

3.13.3: $GROUP

 Groups input documents by a specified field and performs aggregate functions.

Example: db.sales.aggregate([ { $group: { _id: "$dept", totalSales: { $sum: "$amount" }
} } ])
 Aggregate functions include:
o $sum: Sums numeric values.
o $avg: Calculates the average value.
o $min: Finds the minimum value.
o $max: Finds the maximum value.
o $push: Creates an array of values.

3.13.4: $PROJECT

 Reshapes the documents by specifying fields to include or exclude. Example:

db.users.aggregate([ { $project: { name: 1, age: 1, isAdult: { $gte: ["$age", 18] } } } ])
 Can also rename fields or create computed fields using expressions.

3.13.5: $SORT

 Sorts the input documents by a specified field in ascending (1) or descending (-1) order.
Example: db.sales.aggregate([ { $sort: { totalSales: -1 } } ])
 Sorting after $group helps to rank aggregated data.

3.13.6: $LIMIT and $SKIP

 Limits the number of documents in the output or skips a specified number of

documents. Examples: db.sales.aggregate([ { $sort: { totalSales: -1 } }, { $limit: 5 } ])

DEPT OF CSE, SDIT 54

INTERNSHIP REPORT
db.sales.aggregate([ { $skip: 10 } ])

3.13.7: $UNWIND

 Deconstructs an array field from input documents to output a document for each
element. Example: db.users.aggregate([ { $unwind: "$skills" } ])
 Useful for breaking down nested arrays and analyzing individual elements.

3.13.8: $LOOKUP

 Performs a left outer join to another collection, similar to SQL JOIN. Example:
db.orders.aggregate([ { $lookup: { from: "customers", localField: "customerId",
foreignField: "_id", as: "customerDetails" } } ])
 The result is an array field named 'customerDetails' containing matched documents.

3.13.9: USE CASES AND BEST PRACTICES

 Use $match early in the pipeline to minimize data processing.

 Use $project to limit fields and reduce document size.
 Use $group to aggregate data, but be cautious of memory usage for large datasets.
 Apply $lookup only when necessary to avoid performance overhead.
 Use $sort and $limit for implementing pagination effectively.

3.14 FOURTEENTH WEEK

ADVANCED AGGREGATION OPERATORS

The Aggregation Framework in MongoDB includes advanced operators that extend its
capabilities for more complex data transformations. These operators provide powerful data
processing, restructuring, and analysis tools.

3.14.1: $OUT

 The $out stage writes the output of an aggregation pipeline to a new collection. It is
useful for creating materialized views or archiving data.
 Example: db.sales.aggregate([ { $match: { status: "Completed" } }, { $group: { _id:
"$dept", totalSales: { $sum: "$amount" } } }, { $out: "sales_summary" } ])
 If the specified collection already exists, $out will replace it.
 Note: This operation is atomic and blocks write operations during execution.
DEPT OF CSE, SDIT 55
INTERNSHIP REPORT
3.14.2: $MERGE

 $merge is similar to $out but offers more flexibility in handling existing documents in
the target collection.
 Example: db.sales.aggregate([ { $group: { _id: "$dept", totalSales: { $sum: "$amount" }
} }, { $merge: { into: "sales_report", on: "_id", whenMatched: "merge",
whenNotMatched: "insert" } } ])
 Options for 'whenMatched': "merge", "replace", "keepExisting", "fail".
 Options for 'whenNotMatched': "insert", "discard".

3.14.3: $REDUCE

 $reduce applies an expression to each element in an array, reducing it to a single value.

 Example: db.orders.aggregate([ { $project: { totalQuantity: { $reduce: { input:
"$items.quantity", initialValue: 0, in: { $add: ["this"] } } } } } ])
 Useful for computing sums, products, or concatenations of array elements.

3.14.4: $ACCUMULATOR

 Accumulators perform operations on multiple documents within a group. Common

accumulators include $sum, $avg, $min, $max, and $push.
 Example: db.sales.aggregate([ { $group: { _id: "$dept", totalRevenue: { $sum:
"$amount" }, averageRevenue: { $avg: "$amount" } } } ])

3.14.5: $SET

 The $set stage modifies or adds new fields to documents.

 Example: db.orders.aggregate([ { $set: { orderStatus: { $cond: { if: { $gte: ["$amount",
500] }, then: "Premium", else: "Standard" } } } } ])

3.14.6: $MAP

 $map iterates over each element in an array and applies a specified expression.
 Example: db.users.aggregate([ { $project: { doubledScores: { $map: { input: "$scores",
as: "score", in: { $multiply: ["$$score", 2] } } } } } ])

3.14.7: $FILTER

 $filter filters elements in an array based on specified criteria.

DEPT OF CSE, SDIT 56

INTERNSHIP REPORT
 Example: db.users.aggregate([ { $project: { highScores: { $filter: { input: "$scores", as:
"score", cond: { $gte: ["$$score", 80] } } } } } ])

3.14.8: BEST PRACTICES AND USE CASES:

 Use $merge for data warehousing or maintaining summary collections.

 Employ $reduce to calculate cumulative values across arrays.
 Utilize $filter and $map for complex data transformations within arrays.
 Apply $set to create dynamic fields based on complex logic.

3.15 FIFTEENTH WEEK

DATA MODELING IN MONGODB

Data modeling in MongoDB involves structuring documents in collections to efficiently store,

query, and update data. Unlike relational databases, MongoDB uses a flexible schema design
that can accommodate complex data structures.

3.15.1: EMBEDDED DOCUMENTS

 In MongoDB, data can be embedded as nested documents to minimize joins and

improve query performance.
 Example: A user document can include address information as a subdocument: { "_id":
1, "name": "John Doe", "address": { "street": "123 Main St", "city": "New York",
"zipcode": 10001 } }
 Pros:
o Reduces the number of queries.
o Ensures data locality.
o Suitable for 1:1 or 1:many relationships.
 Cons:
o Document size can grow excessively.

3.15.2: REFERENCING DOCUMENTS

 References store ObjectIDs that link to documents in other collections, similar to

foreign keys in SQL.

DEPT OF CSE, SDIT 57

INTERNSHIP REPORT
 Example: In a customer-orders relationship, orders can reference customers: Order
Document: { "_id": 101, "customerId": ObjectId("605b48d7e4375c4b7f8b4a6c"),
"total": 250 }
 Pros:
o Reduces document size.
o Suitable for many-to-many relationships.
 Cons:
o Requires additional queries to fetch related data.

3.15.3: ONE-TO-ONE RELATIONSHIP

 Can be modeled using embedding or referencing.

 Example: A user and profile relationship can be embedded or referenced: { "_id": 1,
"name": "Alice", "profile": { "email": "[email protected]", "age": 28 } }
 Alternatively, using referencing: User Document: { "_id": 1, "name": "Alice",
"profileId": ObjectId("605b48d7e4375c4b7f8b4a6c") }

3.15.4: ONE-TO-MANY RELATIONSHIP

 One-to-many relationships can be modeled through embedding or referencing.

 Example: A blog post with multiple comments can embed comments directly: { "_id":
1, "title": "MongoDB Data Modeling", "comments": [ { "user": "John", "comment":
"Great post!" }, { "user": "Jane", "comment": "Very informative." } ] }
 Alternatively, referencing: Comment Document: { "_id": 101, "postId": 1, "user":
"John", "comment": "Great post!" }

3.15.5: MANY-TO-MANY RELATIONSHIP

 Requires referencing with linking collections.

 Example: For a course-student relationship: Course Document: { "_id": 1, "title":
"MongoDB Basics" } Enrollment Document: { "studentId":
ObjectId("605b48d7e4375c4b7f8b4a6c"), "courseId": 1 }

3.15.6: POLYMORPHIC SCHEMAS

 Polymorphic schemas handle multiple data structures within the same collection using a
discriminator field.

DEPT OF CSE, SDIT 58

INTERNSHIP REPORT
 Example: { "_id": 1, "type": "text", "content": "This is a text post." } { "_id": 2, "type":
"image", "url": "image.jpg" }
 Allows for flexibility in document structure while maintaining a unified collection.

3.15.7: BEST PRACTICES FOR DATA MODELING

 Analyze query patterns before deciding on embedding vs. referencing.

 Use embedded documents for 1:1 or 1:many relationships with limited data size.
 Use referencing for many-to-many or large datasets to avoid exceeding the document
size limit (16MB).
 Employ polymorphic schemas to handle diverse data types within a collection.
 Optimize indexes based on query patterns and access frequency.

3.16 SIXTEENTH WEEK

BACKUP AND RESTORE IN MONGODB

Backing up and restoring data in MongoDB is essential for data integrity, disaster recovery, and
data migration. MongoDB provides several utilities and methods for effective data backup and
restoration.

3.16.1: BACKUP METHODS

 There are several ways to back up data in MongoDB:

1. Mongodump
2. File System Backup
3. MongoDB Atlas Backup

3.16.2: MONGODUMP

 Mongodump is a command-line utility that creates a binary backup of data in BSON

format. It is commonly used for backups and data migration.
 Basic Syntax:
o Backup the entire database:

mongodump --db mydatabase --out /backup/mongodump/

o Backup a specific collection:

DEPT OF CSE, SDIT 59

INTERNSHIP REPORT
mongodump --db mydatabase --collection users --out
/backup/mongodump/

o Compress the backup using gzip:

mongodump --db mydatabase --archive=/backup/mongodump.gz --gzip

3.16.3: MONGORESTORE

 Mongorestore restores data from the backups created using mongodump. It reconstructs
the database from BSON files.
 Basic Syntax:
o Restore the entire database:

mongorestore --db mydatabase /backup/mongodump/mydatabase

o Restore a specific collection:

mongorestore --db mydatabase --collection users

/backup/mongodump/mydatabase/users.bson

o Restore from a compressed archive:

mongorestore --gzip --archive=/backup/mongodump.gz

3.16.4: FILE SYSTEM BACKUP

 File system backup involves copying the database files directly from the data directory.
 This method requires the database to be in a consistent state or locked.
 Example:
o Shut down the MongoDB server:

sudo systemctl stop mongod

o Copy the data files:

cp -r /var/lib/mongodb /backup/mongodata/

o Restart MongoDB:

sudo systemctl start mongod

DEPT OF CSE, SDIT 60

INTERNSHIP REPORT

3.16.5: BACKUP USING MONGODB ATLAS

 MongoDB Atlas offers automated backups with scheduled snapshots and point-in-time
recovery options.
 Key Features:
o Scheduled backups
o Point-in-time restores
o Data encryption
o Multi-region backups
 Steps to Enable Backup in Atlas:
o Go to Atlas > Clusters > Backup
o Set up a backup schedule and define retention policies.

3.16.6: RESTORING DATA IN MONGODB ATLAS

 Atlas provides easy-to-use tools for restoring data from backups.

 Select the desired backup snapshot and choose the target cluster for restoration.
 Supports full database restores as well as individual collection restores.

3.16.7: BEST PRACTICES FOR BACKUP AND RESTORE

 Automate backups using scripts or scheduled tasks.

 Store backups in multiple locations for redundancy.
 Regularly test backups by performing mock restorations.
 Monitor disk space to ensure sufficient storage for backup files.
 Encrypt backup files to protect sensitive data.
 Maintain version control for backup scripts and configurations.

DEPT OF CSE, SDIT 61

INTERNSHIP REPORT

CHAPTER 4
TASK COMPLETED
4.1 CALCULATOR USING HTML AND CSS
The task of designing a calculator using HTML and CSS focuses on creating a visually
appealing and structured layout without incorporating functionality. The design includes
essential elements such as a display screen to show inputs and outputs and buttons for digits
(0–9), operators (+, -, *, /), and special keys like "C" (clear) and "=" (equals). HTML is used
to build the structural framework of the calculator, while CSS is applied to enhance its
appearance. Styling involves organizing the buttons and display screen, adding appropriate
spacing, color schemes, fonts, hover effects, and ensuring a clean, responsive layout. The
final result is a static mockup resembling a functional calculator, ideal for presentation or
further development.

Fig 4.1: Calculator

4.2 TIME TABLE USING HTML AND CSS

The task of designing a timetable using HTML and CSS focuses on creating a structured and
visually appealing layout to represent schedules or routines effectively. The design includes
rows and columns to display days, time slots, and subjects or activities. HTML is used to
build the framework of the table, with headers for days and time slots and cells to input
relevant details. CSS is applied to enhance the appearance by adding styles such as borders,
background colors, text alignment, padding, and hover effects. Additional styling ensures the
timetable is clean, readable, and responsive, making it suitable for various devices. The final
output is a static, well-organized timetable ideal for displaying schedules or plans.

DEPT OF CSE, SDIT 62

INTERNSHIP REPORT

Fig 4.2: Time Table

4.3 REGISTRATION FORM USING HTML AND CSS

The task of designing a registration form using HTML and CSS focuses on creating a user-
friendly and visually appealing interface for collecting user information. The form includes
essential fields such as name, email, phone number, password, and other inputs like
dropdown menus, radio buttons, or checkboxes as needed. HTML is used to structure the
form, including input fields, labels, and a submit button. CSS is applied to enhance the form's
appearance by adding styles such as padding, margins, background colors, border designs,
and responsive layouts. Additional styling features like hover effects, font selection, and error
highlighting improve the overall user experience. The final result is a static, well-designed
form ready for further development or integration.

Fig 4.3: Registration Form

DEPT OF CSE, SDIT 63

INTERNSHIP REPORT

4.4 BOUNCING BALL ANIMATION

The task of creating a bouncing ball animation using CSS focuses on designing a visually
appealing and smooth motion effect to simulate a ball bouncing. HTML is used to structure
the basic layout, defining a container and the ball element. CSS is then applied to style the
ball, specifying its size, shape, and color. The animation is achieved using CSS keyframes,
which define the ball's movement along the vertical axis to create the illusion of bouncing.
Additional styles, such as easing effects, shadows, and gradients, enhance the visual appeal.
The result is an engaging, dynamic animation showcasing the ball's motion without requiring
any JavaScript, highlighting CSS's capabilities for creating interactive designs.

Fig 4.4: Bouncing Ball

4.5 HEARTBEAT ANIMATION

The task of creating a heartbeat animation using CSS focuses on designing a visually
dynamic effect that simulates the rhythmic pulsing of a heart. HTML is used to structure the
layout by defining a container and the heart element, typically created using shapes like a
combination of circles and a square with CSS properties. CSS is then applied to style the
heart, adding colors, gradients, and rounded corners for a realistic appearance. The animation
is achieved using CSS keyframes, which define the heart's scaling effect to mimic the
expansion and contraction of a heartbeat. Additional styling, such as smooth transitions and
easing functions, enhances the visual effect.

The result is an engaging, responsive animation that replicates a heartbeat, showcasing CSS's
ability to create captivating visual designs without requiring JavaScript.

DEPT OF CSE, SDIT 64

INTERNSHIP REPORT

Fig 4.5: HeartBeat Animation

4.6 SQUARE BEAT ANIMATION

The task of creating a square beat animation using CSS focuses on designing a visually
engaging effect where square elements pulsate rhythmically, simulating a "beating" motion.
HTML is used to structure the layout by defining one or more square elements within a
container. CSS is then applied to style the squares, specifying their size, color, and
positioning. The animation is achieved using CSS keyframes, which define the scaling or
opacity changes of the squares over time to create the beat effect. Easing functions and
smooth transitions are added to enhance the animation's fluidity. The result is a dynamic and
visually appealing animation that demonstrates CSS's capability to create rhythmic and
interactive designs without additional scripting.

Fig 4.6: SquareBeat Animation

DEPT OF CSE, SDIT 65

INTERNSHIP REPORT

4.7 HALCYONIC WEBSITE CLONE

The task of creating a Halcyonic web clone using HTML and CSS involves replicating the
design and layout of the Halcyonic website to produce a visually identical static version.
HTML is used to structure the website's content, including elements like the header,
navigation bar, sections, articles, and footer. CSS is applied to style these elements, ensuring
they align with the original design in terms of colors, typography, spacing, and
responsiveness. Additional CSS properties, such as flexbox or grid layouts, are used to
achieve precise positioning and alignment of components. The focus is on accurately
reproducing the visual aesthetics and responsive behavior of the original website without
adding dynamic functionality. The result is a high-fidelity static clone showcasing attention
to detail and proficiency in HTML and CSS.

Fig 4.7: Website Clone

4.8 CHAMPIONS TROPHY

The task of creating the "Champions Trophy" team showcase involves designing an
interactive and visually appealing layout to display player profiles using HTML, CSS, and
JavaScript. Each player card includes an image, name, role (e.g., Batsman, Bowler, All-
rounder), and a brief description of their contributions. HTML is used to structure the content,
organizing player details into individual cards, while CSS enhances the appearance with
consistent card styling, shadows, borders, typography, and a responsive grid layout.
JavaScript adds interactivity, such as hover animations, dynamic filtering of players by roles
(e.g., Batsman, Bowler), or pop-ups showing additional information when a card is clicked.
The combined use of HTML, CSS, and JavaScript results in a professional, user-friendly
design that is both functional and visually engaging, suitable for sports websites or event
presentations.

DEPT OF CSE, SDIT 66

INTERNSHIP REPORT

Fig 4.8: Champion Trophy Playcard

4.9 DYNAMIC FOOD MENU DISPLAY WITH SEARCH

FUNCTIONALITY
The below images showcases a food menu webpage where users can search for dishes,
restaurants, or cuisine types using the search bar. The task involves dynamically fetching
food details such as names, images, descriptions, and sources (e.g., restaurants) from a
database or an API and displaying them as cards. Each card contains an image, name,
description, and the source of the dish. The search functionality filters the displayed items in
real time based on user input, improving user experience. The layout is designed using
HTML for structure, CSS for styling, and JavaScript for functionality, ensuring
responsiveness and ease of use. This feature can be integrated into restaurant or food delivery
websites for enhanced customer interaction.

DEPT OF CSE, SDIT 67

INTERNSHIP REPORT

Fig 4.9: Dynamic Search Bar

Fig 4.9.1: Result After Search

4.10 DYNAMIC PRODUCT SHOWCASE WITH FETCH API

The above image represents an online store webpage showcasing a collection of products
dynamically displayed in a grid layout. The task involves fetching product details such as
names, images, prices, descriptions, and categories from a database or an API and presenting
them in a visually appealing and organized format. The webpage is built using HTML for
structure, CSS for styling, and JavaScript for dynamic functionality. Each product card
includes essential details like an image, title, price, description, and category. The layout is
responsive, ensuring a user-friendly experience across devices. This approach allows real-
time updates, enabling seamless integration of new products or modifications in the
inventory.

DEPT OF CSE, SDIT 68

INTERNSHIP REPORT

Fig 4.10 Dynamic Products Showcase

4.11 SONG DISPLAY USING REACT

Develop a simple React application to display a list of songs using a predefined dataset. The
application should render song details such as title, artist, album (optional), and duration in a
visually appealing tabular or card-based format. Use a responsive design to ensure
compatibility across devices. Incorporate styling with CSS or a library like TailwindCSS to
enhance the user interface. This task focuses on data display only, with optional features like
headers or hover effects for improved user experience.

Fig 4.11 Song Display using React

DEPT OF CSE, SDIT 69

INTERNSHIP REPORT

4.12 LOGIN FORM USING REACT

Develop a simple and responsive login form using React. The form should include fields for
username/email and password, along with a login button. Implement basic validation to
ensure both fields are required, displaying error messages if left blank. Style the form using
CSS or TailwindCSS for a clean and modern look. Ensure the design is responsive for
seamless use on desktop and mobile devices. Optionally, include features like a "Remember
Me" checkbox and a "Forgot Password?" link for enhanced functionality.

Fig 4.12:- Login Form using React

4.13 DESIGN A NAVIGATION BAR (NAVBAR) USING

REACT
Create a responsive navigation bar using React that includes a brand logo or title on the left
and navigation links such as "Home," "About," "Services," and "Contact." Use CSS or
TailwindCSS for a modern and visually appealing design, highlighting the active link for a
better user experience. Ensure the navbar adapts to various screen sizes by implementing a
collapsible or hamburger menu for smaller devices. Optionally, add interactive features such
as hover effects, a search bar, or a user profile icon for enhanced functionality.

DEPT OF CSE, SDIT 70

INTERNSHIP REPORT

Fig 4.13:- Design a Navigation Bar (Navbar) using React

4.14 TO-DO LIST USING REACT

The To-Do List is a React-based task that enables users to efficiently add, delete, and mark
tasks as completed. Each task is stored with a unique identifier and dynamically displayed
within a structured list. Clicking on a task toggles its completion status, with a strikethrough
effect and green color indicating that the task has been completed, ensuring clear visual
feedback. Users can also remove tasks when necessary, providing an intuitive and responsive
experience. Here by utilizing React hooks, particularly useState, the app maintains a
dynamic, interactive experience where tasks update in real-time. Event Handling –
Functions like handleAddTask, handleDeleteTask, and toggleTaskStatus update the state
based on user interactions. The outcome of this React-based To-Do List application is an
efficient and user- friendly task management tool that allows users to organize their daily
activities.

DEPT OF CSE, SDIT 71

INTERNSHIP REPORT

Figure 4.14:- To-Do List Using React Use State

DEPT OF CSE, SDIT 72

INTERNSHIP REPORT

CHAPTER 5

CONCLUSION
The need for internship is more emergent as one need to be oriented with self-learning
capacities required at a very short notice in industry. Got to know the industrial standards, the
skills that are required to help us contribute and grow with the industry, the ability of learning
by our own, logical thinking and many more. The internship program has made me
understand the career opportunities that can be explored. An understanding is grown about
the lifelong learning one need to sustain in the industry and the curious and open-minded
attitude one need to have for the same.

The internship helped in improving the interpersonal skills. In this internship, we learnt how
to design web pages. The trainer also helped us in improving our logical thinking by giving
us small assignments to write our own codes. Some of the technical outcomes of the training
are that we can logically analyse and provide considerable solutions.

DEPT OF CSE, SDIT 73

INTERNSHIP REPORT

REFERENCES
[1] Mozilla Developer Network (MDN). HTML, CSS, and JavaScript Documentation.
Retrieved from https://developer.mozilla.org/

[2] W3Schools. Web Development Tutorials. Retrieved from https://www.w3schools.com/

[3] React – A JavaScript Library for Building User Interfaces. Official Documentation.
Retrieved from https://reactjs.org/docs/getting-started.html

[4] Node.js Foundation. Node.js Documentation. Retrieved from https://nodejs.org/en/docs/

[5] Express.js Guide. Express Web Framework Documentation. Retrieved from

https://expressjs.com/

[6] MongoDB Inc. MongoDB Manual. Retrieved from https://www.mongodb.com/docs/

[7] Axios – Promise based HTTP client for the browser and Node.js. Retrieved from
https://axios-http.com/docs/intro

[8] FreeCodeCamp. JavaScript, React, and Full Stack Development Tutorials. Retrieved from
https://www.freecodecamp.org/

[9] GeeksforGeeks. Computer Science Concepts and Programming Tutorials. Retrieved from
https://www.geeksforgeeks.org/

[10] Stack Overflow. Community-based Q&A on Programming Topics. Retrieved from

https://stackoverflow.com/

DEPT OF CSE, SDIT 74