A SHORT-TERMINTERNSHIP REPORT

On
MERN FULL STACK DEVELOPMENT
By
Submitted to Department of Computer Science

BANDARU JYOSHNA
III BCA

Under the Esteemed Guidance of

K. BHAVANA SRAVANTHI
LECTURER

Department of Computer Applications

ADITYA DEGREE & PG COLLEGE for WOMEN’S

GOPALAPATNAM
 ADITYA DEGREE COLLEGE
Department of Computer Applications

CERTIFICATE

This is to certify that The Short-Term Internship entitled,

“Mern Full Stack Development” is a bonified work of BANDARU JOSHNA, bearing
123127306010, III BCA, submitted to the Department of Computer Applications,
Aditya Degree College, Gunaratnam for the academic year 2023-2026.

Internship Guide
MS. CEO DEVIKA PAKRUTHI

Head of the Department

[Link] SRAVANTHI(M.C.A)

External Examiner Principal

 ADITYA DEGREE COLLEGE for
WOMEN’S GOPALAPATNAM

Department of Computer Applications

DECLARATION BY THE STUDENT

I hereby declare that the work described in this Short-Term Internship,

entitled “Mern Full Stack Development” which is being submitted by
me in partial fulfilment of the requirements for the award of degree of
Bachelor of Applications (BCA) from the Department of Computer
Application to Aditya Degree College Women’s, Gunaratnam under the
guidance of Mr. Daniel Benjamin ,Project Coordinator of Adhoc
Network Tech Company, India and Canada.

Place: Visakhapatnam

Date: 19-07-2025
 ADITYA DEGREE COLLEGE
GOPALAPATNAM
Department of Computer Applications

CERTIFICATE FROM THE SUPERVISOR

This is to certify that the Short- Term Internship entitled,” Mern Full

Stack Development”, that is being submitted by BANDARU JOSHNA

Bearing 123127306010 ,III BCA, which is being submitted by me in

partial full filaments of the requirements for the award of degree of Bachelor of
Computer Applications from the Bachelor of Computer Applications to Aditya Degree
College, bonified work carried out by him under my guidance and Supervision.

Mrs.K. BHAVANA SRAVANTHI(MCA)

 ACKNOWLEDGEMENT
No endeavour is completed without the valuable support of others. I would like to take this opportunity to extend my
sincere gratitude to all those who have contributed to the successful completion of this Short-Term Internship Project
Report.

It is privilege to thank [Link] REDDY, Chairman Sir, Aditya group of institutions for providing state-of-the-
Art facilities, experienced and talented faculty members.

It is privilege to thank Dr. N. SUGUNA REDDY, Secretary Madam, Aditya group of institutions for providing Short-
Term Internship Project Report from Adhoc.

I thank [Link] Sir, Academic Director, Aditya Degree College for his continuous support and
encouragement in my endeavour.

At this juncture I feel deeply honored in expressing my sincere thanks toking Daniel Benjamin Sir, Chartered
Engineer, AMIE, B. Tech, Project Director, CEO Devika Pakruthi Mam of Adhoc Network Tech Company, Indiaand
Canada for making the resources available at right time and providing valuable insights leading to the successful
completion of my Short-Term Internship Project Report.
We extend our heartfelt thanks to Mr. Sai Kumar, our Technical Trainer, for his exceptional contribution throughout
this [Link] dedication, innovative approach, and ability to make sessions both interactive and insightful have
truly enhanced the learning experience for all our students.
We sincerely appreciate his strong technical expertise, clarity in teaching, and his unwavering commitment to
ensuring that each student gained the best possible understanding

I express my deep sense of gratitude to Mr. [Link] KUMAR Principal, for his Efforts and for giving us permission
for carrying out this Short-Term Internship.

I thank [Link] Sravathi,(MCA) Head of the Department of Bachelor of Computer Science, Aditya Degree
College-Gopalapatnam, for supporting and encouraging me in completion of my Short-Term [Link] I thank
all the faculty members of our Department who contributed their valuable suggestions in completion Short-Term
Internship report and I also put my sincere thanks to My Parents who stood with me during the whole Short-Term
Internship.

-BANDARU JYOSHNA
 ABOUT ADITYA DEGREE COLLEGES

Aditya Degree colleges are the precious gifts presented to the twin Godavari Districts by ADITYA.
Educational group ADITYA Degree College which was established in 1998 in Kakinada fulfilled the hopes and
aspirations of many graduates and had been acclaimed as the best degree college under Andhra University.
Encouraged by the 100% result in 2003,ADITYA added several feathers to its cap by launching Degree
Colleges in Rajahmundry in 2003, in Vizag and Palakol in 2005 and in Tatipaka in 2006.
Needless to say, in the present scenario girls excel more than boys in education and they give tough
competition to boys. Owing to their diffidence and inhibition, girls find difficulty in expressing their doubts
in a classroom of Co-ed College. Moreover, parents have many objections in sending their daughters to a
co-ed college. Realizing this, ADITYA successfully leads Degree colleges for girls to prove their talents in
curricular, co-curricular and extra- curricular activities. ADITYA started P.G College also for Women to
encourage them for higher education.

VISION
To provide inclusive education with innovative methods and strenuous efforts for inculcating human values,
professionalism and scientific instillation in the realm of Degree Education to all sections of students
irrespective of race, region and religion with special focus to stand independently and to emerge as centre
for Research and Development.
MISSION
To provide ample scope for multifaceted development of local youth. To provide quality higher education to
student community.
To Recruit Highly Qualified and Experienced Faculty to provide Quality Education.
ABOUT ADHOC NETWORK TECH COMPANY-INDIA, CANADA

AdhocNetworkisstartedintheyear2020 at
Visakhapatnam by a young Women entrepreneur
Miss. Devika Pakruti Founder & CEO with an
intention to provide employment opportunities to
the youth and to impart the best quality training
and practical exposure to the students which
enhances their employability, Skills. Her journey
started and collapsed with the wide spread of
Covid-19 but her determination and aspirations
made her journey more futuristic and she never
gave up the thought to GIVE-UP. This is where
Devika made her dreams come true and alive.
She never expected with a sole objective of
making Profit but her determination to impart the
quality training made her to reach the peaks of
success at the young age.
Adhoc Network-we are proud to have
been awarded Hattrick of Awards. This
Achievement is a testament to our
commitment to Excellence and
Innovation in the Software development
Best heading company in the market.
Devika Pakruthi, a name synonymous
with innovation, empowerment, and
success. As the proud recipient of the
YoungEntrepreneurAward,BestWomen-
LedStartupAward,WomenRisingStarof
theYearAwardandYoungestCEOofthe
YearAward, Devika Pakruthi has etched
her name into the annals of contemporary
business history.
Vision, Mission, and values of the
Organization: -VISION: -

DuevisionistobealeadingglobalproviderofinteractiveandreliableSoftware
Solution empowering business to Thrive in the digital age.
MISSION: -

Our mission is to develop cutting-edge Software Solutions that

Solve
compare business challenges, enhance Operations efficiency, and drive
Sustainable growth for our
clientwestrivetodeliverexceptionalvaluebyleveragingemergingtechnologies,fo
stering Strategic partnerships and maintaining a Customer, Centric approach
Values

● Innovation
● Excellence
● Collaboration
● Integrity
● Customer Centricity
● Continuous Learning
S. No Title Page No
1 Write a Simple HTML program for displaying “Hello World!”
2 Design a web page of displaying “Hello World!” by using Heading Tag
3 Design a web page by demonstrating the usage of Paragraph Tag
4 Design a web page by demonstrating the usage of HTML lists
5 Design a web page by demonstrating the usage of HTML list type attribute –
“A”
6 Design a web page by demonstrating the usage of HTML list type attribute –
“a”
7 Design a web page by demonstrating the usage of HTML list type attribute –
“I”
8 Design a web page by demonstrating the usage of HTML list type attribute –
“i”
9 Design a web page by demonstrating the usage of HTML list with start
attribute
10 Design a web page by demonstrating the usage of HTML list type attribute –
“square”
11 Design a web page by demonstrating the usage of HTML list type attribute –
“circle”
12 Design a web page by demonstrating the usage of HTML list type attribute –
“disc”
13 Design a web page by demonstrating the usage of HTML list type attribute –
“none”
14 Design a web page by demonstrating the usage of Nested list in HTML
15 Design a web page by demonstrating the usage of HTML Table tags
16 Design a web page demonstrating the usage of HTML Image Tag
17 Design a web page by demonstrating the usage of HTML Video Tag
18 Design a web page by demonstrating the usage of HTML Audio Tag
19 Design a web page by demonstrating the usage of Div Tag
20 Design a web page by demonstrating the usage of HTML Marquee Tag
21 Design a web page by demonstrating the usage of HTML Marquee Tag with
image
22 Design a web page by demonstrating the usage of HTML background
attribute
23 Design a web page by demonstrating the usage of Rowspan and Colspan
attributes in a table:
24 Design a web page of your class time table:
25 Design a webpage to open an external link

26 Design a webpage to an mailto

27 Design a webpage to Phone number link
28 Design a webpage to Section on the same page
29 Design a webpage to relative path
30 Design a web page by demonstrating the usage of Form Tag
31 Design a web page by demonstrating the usage of Radio Button
32 Design a web page by demonstrating the usage of Radio Button

33 Design a web page by demonstrating the usage of Dropdown

34 Design a web page by demonstrating the usage of Textarea
35 Design a web page by demonstrating the usage of Buttons
36 Design a web page by demonstrating the usage of superscript
37 Design a web page by demonstrating the usage of subscript
38 Design a web page by demonstrating the usage of del tag
39 Design a web page by demonstrating the usage of insert tag
40 Design a web page by demonstrating the usage of bold tag
41 Design a web page by demonstrating the usage of strong tag
42 Design a web page by demonstrating the usage of italic tag
43 Design a web page by demonstrating the usage of Emphasized tag
44 Design a web page by demonstrating the usage of Underlined tag
45 Design a web page by demonstrating the usage of Hightlighted tag
46 Design a web page by demonstrating the usage of small tag
47 Design a web page demonstrating the usage of the `<frameset>` tag.
48 Design a web page demonstrating the usage of the `cols` attribute in
`<frameset>`.
49 Design a web page demonstrating the usage of the `rows` attribute in
`<frameset>`.
50 Design a web page demonstrating the usage of the `frameborder` attribute
in `<frameset>`.
51 Design a web page demonstrating the usage of the `border` attribute in
`<frameset>`.
52 Design a web page demonstrating the usage of the `noresize` attribute in
`<frame>`.
53 Design a web page demonstrating the usage of the `<header>` tag.
54 Design a web page demonstrating the usage of the `<nav>` tag.
55 Design a web page demonstrating the usage of the `<main>` tag.
56 Design a web page demonstrating the usage of the `<article>` tag.
57 Design a web page demonstrating the usage of the `<section>` tag.
58 Design a web page demonstrating the usage of the `<aside>` tag.
59 Design a web page demonstrating the usage of the `<footer>` tag.
60 Design a web page demonstrating the usage of the <figure> and <figcaption>
tags

CSS
S. No Title Page No
61 Design a web page implementing Inline CSS
62 Design a web page implementing Internal CSS
63 Design a web page implementing External CSS
64 Design a web page implementing the usage of CSS background
property

65 Design a web page implementing the usage of CSS borders property

66 Design a web page implementing the usage of CSS text property
67 Demonstrate the usage of the Universal Selector (*) in CSS
68 Demonstrate the usage of the Type Selector (element) in CSS
69 Demonstrate the usage of the Class Selector (.classname) in CSS

70 Demonstrate the usage of the ID Selector (#id) in CSS

71 Demonstrate the usage of the Descendant Combinator (A B) in CSS

72 Demonstrate the usage of the Child Combinator (A > B) in CSS
73 Demonstrate the usage of the Adjacent Sibling Combinator (A + B) in CSS
74 Demonstrate the usage of the General Sibling Combinator (A ~ B) in CSS
75 Demonstrate the usage of `border-radius` for Rounded Corners in CSS

76 Demonstrate the usage of `box-shadow` in CSS

77 Demonstrate the usage of `border-image` in CSS
78 Demonstrate how to style Table Borders using CSS
79 Demonstrate the usage of the `display: block` property in CSS
80 Demonstrate the usage of the `display: inline` property in CSS
81 Demonstrate the usage of the `display: inline-block` property in CSS

82 Demonstrate the usage of the `display: none` property in CSS

83 Demonstrate the usage of `display: flex` in CSS
84 Demonstrate the usage of `flex-direc􀆟on` in CSS
85 Demonstrate the usage of `flex-wrap` in CSS
86 Demonstrate the usage of `flex-flow` in CSS
87 Demonstrate the usage of `jus􀆟fy-content` in CSS
88 Demonstrate the usage of `align-items` in CSS
89 Demonstrate the usage of `align-content` in CSS
90 Demonstrate the usage of `a:link` in CSS
91 Demonstrate the usage of `a:visited` in CSS
92 Demonstrate the usage of `a:hover` in CSS
93 Demonstrate the usage of `a:active` in CSS
94 Demonstrate the usage of `overflow` in CSS
95 Demonstrate the usage of the `float` property in CSS
96 Demonstrate the usage of `calc()` in CSS
97 Demonstrate the usage of `min()` in CSS
98 Demonstrate the usage of `max()` in CSS
99 Demonstrate the usage of `::first-line` in CSS
100 Demonstrate the usage of `::first-letter` in CSS
101 Demonstrate the usage of `::before` in CSS
102 Demonstrate the usage of `::after` in CSS
103 Demonstrate the usage of `::selection` in CSS
104 Demonstrate the usage of `:nth-child()` in CSS
105 Demonstrate the usage of `:target` in CSS
106 Demonstrate the usage of `input[type="text"]` in CSS
107 Demonstrate the usage of `::placeholder` in CSS
108 Demonstrate the usage of `z-index` in CSS
109 Demonstrate the usage of `input[type="range"]` in CSS
110 Demonstrate the usage of the `<progress>` element in CSS
111 Demonstrate the usage of `accent-color` in CSS
112 Demonstrate a simple CSS anima􀆟on using `@keyframes
113 Demonstrate the usage of `backdrop-filter` in CSS
114 Demonstrate the usage of `transform: translate()` in CSS
115 Demonstrate the usage of `transform: rotate()` in CSS
116 Demonstrate the usage of `transform: scale()` in CSS
117 Demonstrate the usage of `counter-increment` in CSS
118 Demonstrate the usage of a media query for screen width in CSS
119 Demonstrate media query to change `flex-direction` based on screen size

120 Demonstrate media query to toggle visibility based on screen size

JavaScript
S. No Title Page No
121 Demonstrate the use of getElementById to access and modify an
element
122 Demonstrate the use of getElementsByClassName to access multiple
elements
123 Demonstrate how to change content using textContent with a button
click
124 Demonstrate how to change content using innerHTML with a button
click
125 Demonstrate how to update visible text using innerText with a button

126 Demonstrate how to create an element by clicking a button

127 Demonstrate how to remove an element from the DOM
128 Demonstrate how to change the style of an element using JavaScript

129 Demonstrate how to toggle visibility of an element

130 Demonstrate how to get the value from an input field
131 Demonstrate how to loop through elements using
getElementsByTagName
132 Demonstrate an increment and decrement counter
133 Demonstrate the usage of the push() method
134 Demonstrate the usage of the pop() method
135 Demonstrate the usage of the map() method
136 Demonstrate the usage of the filter() method
137 Demonstrate the usage of the reduce() method
138 Demonstrate the usage of the forEach() method
139 Demonstrate the usage of the flat() method in JavaScript
140 Demonstrate the usage of the slice() method
141 Demonstrate the usage of the splice() method
142 Demonstrate the usage of the includes() method
143 Demonstrate the usage of the find() method
144 Demonstrate the usage of the Spread Operator (...) in arrays
145 Generate a table automatically by clicking on a link
146 Demonstrate how to send data through an object in JavaScript
147 Demonstrate how to control a form submission using preventDefault()
148 Demonstrate how to store data in local storage using
[Link]()
149 Demonstrate how to retrieve data from local storage using
[Link]()
150 Demonstrate how to clear all data from local storage using
[Link]()

MongoDB
S. No Title Page No

151 Demonstrate how to create a database in MongoDB

152 Demonstrate how to create a collection in MongoDB

153 Demonstrate how to insert a document into a MongoDB collection

154 Demonstrate how to find documents in a MongoDB collection
155 Demonstrate how to update a document in MongoDB
156 Demonstrate how to delete a document in MongoDB
157 Demonstrate how to insert multiple documents using insertMany()

158 Demonstrate how to find documents using a filter in MongoDB

159 Demonstrate how to retrieve all documents using find()

160 Demonstrate how to update multiple documents using updateMany()

161 Demonstrate how to delete multiple documents using deleteMany()

162 Demonstrate how to use the $eq (equal) operator in MongoDB

163 Demonstrate how to use the $ne (not equal) operator in MongoDB
164 Demonstrate how to use the $gt (greater than) operator in MongoDB

165 Demonstrate how to use the $gte (greater than or equal to) operator in
MongoDB

166 Demonstrate how to use the $lt (less than) operator in MongoDB
167 Demonstrate how to use the $lte (less than or equal to) operator in
MongoDB

168 Demonstrate how to use the $in operator in MongoDB

169 Demonstrate how to use the $and logical operator in MongoDB

170 Demonstrate how to use the $or logical operator in MongoDB

171 Demonstrate how to use the $not logical operator in MongoDB

172 Demonstrate how to create a new schema with bsonType and required
using [Link]() in MongoDB

173 Demonstrate how to apply or modify schema validation on an existing

MongoDB collection using collMod

174 Demonstrate the use of $currentDate to update a field with the current
date

175 Demonstrate the use of $inc to increment a field

176 Demonstrate the use of $rename to rename a field

177 Demonstrate the use of $set to set a new value to a field

178 Demonstrate the use of $unset to remove a field

179 Demonstrate the use of $addToSet to add a unique value to an array

180 Demonstrate the use of $pop to remove the last element of an array

181 Demonstrate the use of $pull to remove a matching value from an array

182 Demonstrate the use of $push to add a value to the end of an array
183 Demonstrate the use of upsert in MongoDB to update or insert a
document

184 Demonstrate the use of $group in MongoDB aggregation

185 Demonstrate the use of $limit in MongoDB aggregation

186 Demonstrate the use of $project in MongoDB aggregation

187 Demonstrate the use of $sort in MongoDB aggregation

188 Demonstrate the use of $match in MongoDB aggregation

189 Demonstrate the use of $skip in MongoDB aggregation

190 Demonstrate the use of $count in MongoDB aggregation

191 Demonstrate the use of $lookup in MongoDB aggregation

192 Demonstrate the use of $out in MongoDB aggregation

[Link] & [Link]

S. No Title Page No

193 Basic MongoDB Connectivity Setup

194 Signup API Using MongoDB

195 Create a POST API for user login using Express and MongoDB
196 Create a GET API to fetch all users from MongoDB
197 Use GET method with URL parameter to fetch specific user by email
198 Create a PUT API to update user data (e.g., name) by email
199 Create a DELETE API to remove a user by email
 Project No: 01

Title: Write a Simple HTML program for displaying “Hello World!”

Source code:

<!Doctype html>

<html>

<head>

<title>

First Web Page

</title>

</head>

<body>

Hello World!

</body>

</html>

Output:
 Project No: 02

Title: Design a web page of displaying “Hello World!” by using Heading Tag:

Source Code:

<html>

<title>

Joshna

</title>

<head>hello world</head>

<body>

<h1>

hello world

</h1>

</body>

</html>

Output:
 Project No: 03

Title: Design a web page by demonstrating the usage of Paragraph Tag:

Source code:

<html>

<title>Joshna </title>

<head>

computer

</head>

<body>

<p>

computer is two types they are software and hardware. computer is used to calculate the arithmetic
operations.

</p>

</body>

</html>

Output:
 Project No: 04

Title: Design a web page by demonstrating the usage of HTML lists:

Source Code:

<html>

<title> Joshna </title>

<head>

</head>

<body>

<h1> ordered list</h1>

<old type="A">

<li>Joshna</li>

<li>sandhya<li>

</old>

<h2>unordered list(numbered)</h2>

<ul type “circle">

<li>Jyothi</li>

<li>Jesse</li>

</ul>

<h3>definition list (core subjects) </h3>

<d1>

<dt>cloud computing</dt>

<dd>An important subjects in computers

</dd>

<dt>stat</dt>

<dd>skill subject

</dd>

</dl>

</body>

</html>
Output:
 Project No: 05

Title: Design a web page by demonstrating the usage of HTML list type attribute

– “A”

Source Code:

<html>

<title> Joshna </title>

<head>

</head>

<body>

<h1> ordered list</h1>

<old type="A">

<li>Joshna</li>

<li>sandhya</li>

<li>Jesse</li>

<li>Jyothi</li>

</old>

</body>

</html>

Output:
 Project No: 06

Title: Design a web page by demonstrating the usage of HTML list type attribute

– “a”:

Source code:

<old type="a">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</old>

Output:
 Project No: 07

Title: Design a web page by demonstrating the usage of HTML list type attribute

– “I”:

Source Code:

<old type="I">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</old>

Output:
 Project No: 08

Title: Design a web page by demonstrating the usage of HTML list type attribute – “I”:

Source Code:

<old type="I">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</old>

Output:
 Project No: 09

Title: Design a web page by demonstrating the usage of HTML list with start attribute:

Source Code:

<old start="10">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</old>

Output:
 Project No: 10

Title: Design a web page by demonstrating the usage of HTML list type attribute– “square”:

Source code:

<ul type="square">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</ul>

Output:
 Project No: 11

Title: Design a web page by demonstrating the usage of HTML list type attribute– “circle”:

Source Code:

<ul type="circle">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</ul>

Output:
 Project No: 12

Title: Design a web page by demonstrating the usage of HTML list type attribute– “disc”:

Source Code:

<ul type="disc">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</ul>

Output:
 Project No: 13

Title: Design a web page by demonstrating the usage of HTML list type attribute– “none”:

Source Code:

<ul type="none">

<li>APPLE</li>

<li>MANGO</li>

<li>BANANA</li>

</ul>

Output:
 Project No: 14

Title: Design a web page by demonstrating the usage of Nested list in HTML:

Source Code:

<old type="a">

<li>android</li>

<old>

<li>13 pro</li>

<li>15 pro</li>

</old>

<li>google pixel</li>

<old>

<li>9 flood</li>

<li>9 pro</li>

</old>

</old>

Output:
 Project No: 15

Title: Design a web page by demonstrating the usage of HTML Table tags.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Tag</title>

</head>

<body>

<table border="1">

<tr>

<the>Name</the>

<the>Age</the>

<the>City</the>

</tr>

<tr>

<td>JOSHNA</td>

<td>28</td>

<td>Vishakhapatnam</td>

</tr>

<tr>

<td>CHINNI</td>

<td>22</td>

<td>Hyderabad</td>

</tr>

</table>

</body>

</html>

Output:
 Project No: 16

Title: Design a web page demonstrating the usage of HTML Image Tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Example</title>

</head>

<body>

<imp src="[Link]
[Link]?v=1744956408" height="500" width="700">

</body>

</html>

Output:
 Project No: 17

Title: Design a web page by demonstrating the usage of HTML Video Tag:

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Videos</title>

</head>

<body>

<video sac="C:\Users\VENKY\Videos\html [Link]" height="450" width="800" controls> </video>

</body>

</html>

Output:
 Project No: 18

Title: Design a web page by demonstrating the usage of HTML Audio Tag:

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Audios</title>

</head>

<body>

<audio sac="C:\Users\ponna\Downloads\mockingbird audio.mp3" controls></audio>

</body>

</html>

Output:
 Project No: 19

Title: Design a web page by demonstrating the usage of Div Tag:

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Div Container Example</title>

</head>

<body>

<div style="border: 10px solid black; padding: 10px;">

<h2>Div Container</h2>

<p>This is a paragraph inside a div container. </p>

</div>

</body>

</html>

Output:
 Project No: 20

Title: Design a web page by demonstrating the usage of HTML Marquee Tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Marquee Tag Example</title>

</head>

<body>

<h2>Scrolling Text Example</h2>

<marquee>Welcome to our website! Stay tuned for updates. </marquee>

</body>

</html>

Output:
 Project No: 21

Title: Design a web page by demonstrating the usage of HTML Marquee Tag with image.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>marquee tag</title>

</head>

<body>

<h1> MARQUEE TAG</h1>

<marquee direction="right" bicolour="light blue" width="50%" height="50px">Scrolling Left to

Right</marquee>

<marquee direction="left" bicolour="light green" width="80%" height="50px">Scrolling Right to

Left</marquee>

<marquee direction="down" bicolour="light coral" width="50%" height="200px">

<imp src="[Link]
BV9rxniivqA&s"> </marquee>

<marquee direction="up" bicolour="light-yellow" width="50%" height="200px">

<imp src="[Link]
KJP-7_9cWzSQ&s"> </marquee>

</body>

</html>

Output:
 Project No: 22

Title: Design a web page by demonstrating the usage of HTML background attribute.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Image Background</title>

</head>

<body
background="[Link]
[Link]" >

<p>kingfishers are vibrant and small to medium-sized birds known for their striking plumage and
impressive fishing skills

they are found across there global regions of Africa Asia and Oceania, </p>

</body>

</html>

Output:
 Project No:23

Title: Design a web page by demonstrating the usage of Row span and Calspan attributes in a
table:

Source code:

<IDOCTYPE html>

<html>

<head>

<title>Table with Calspan and Row span</title>

</head>

<body>

<h2>Table Example with Calspan and Row span</h2>

<p><strong>Calspan:</strong> This header spans across two columns. </p>

<table border="1">

<tr>

<the Calspan="2">Name</the>

<the>Age</the>

</tr>

<tr>

<td>sandhya</td>

<td>Jesse</td>

<td>43</td>

<for>

<tr>

<td>john</td>

<td>Chinni</td>

<td>57</td>

</tr>

</table>

<brr>

<p><strong>Row span:</strong> This cell spans across two rows. </p>

<table border="1">

<tr>

<the>Name</the>

<the>Age</the>

<the row span="2">City</the>

<for>

<tr>

<td>Jyothi</td>

<td>28</td>

</tr>

<tr>

<td>Mahesh</td>

<td>22</td>

<td>Vishakhapatnam</td>

<for>

</table>

</body>

</html>

Output:
 Project No:24

Title: Design a web page of your class time table

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML table tag</title>

</head>

<body>

<h2>CLASS TIME TABLE</h2>

<table border="1">

<tr>

<the>DAYS</the>

<the>9AM TO 9:45AM</the>

<the>9:45 TO 10:15</the>

<the>10:15 TO 10:30</the>

<the>10:30 TO 11:45</the>

<the>11:45 TO 12:15</the>

<the>12:15 TO 1:00</the>

<the>1:00 TO 1:45</the>

<the>1:45 TO 2:30</the>

<the>2:30 To 3:15</the>

<the>3:15 TO 3:30</the>

<the>3:30 TO 4:15</the>

</tr>

<tr>

<td>MONDAY</td>

<td>OS</td>

<td>C</td>

<td>BREAK</td>
<td>PYTHON</td>

<td>DATA STRUCTURE</td>

<td>LUNCH</td>

<td>Cybersecurity</td>

<td>DMDW</td>

<td>MAD</td>

<td>BREAK</td>

<td>JAVA</td>

</tr>

<tr>

<td>TUESDAY</td>

<td>OS</td>

<td>C</td>

<td>BREAK</td>

<td>PYTHON</td>

<td>DATA STRUCTURE</td>

<td>LUNCH</td>

<td>Cybersecurity</td>

<td>DMDW</td>

<td>MAD</td>

<td>BREAK</td>

<td>JAVA</td>

</tr>

<tr>

<td>WEDNESDAY</td>

<td>OS</td>

<td>C</td>

<td>BREAK</td>

<td>PYTHON</td>

<td>DATA STRUCTURE</td>

<td>LUNCH</td>
<td>Cybersecurity</td>

<td>MAD</td>

<td>BREAK</td>

<td>JAVA</td>

</tr>

<tr>

<td>SATURDAY</td>

<td>OS</td>

<td>C</td>

<td>BREAK</td>

<td>PYTHON</td>

<td>DATA STRUCTURE</td>

<td>LUNCH</td>

<td>Cybersecurity</td>

<td>DMDW</td>

<td>MAD</td>

<td>BREAK</td>

<td>LIBRARY</td>

</tr>

</table>

</body>

</html>

Output:
 Project No:25

Title: Design a webpage to open an external link.

Source Code:

<!DOCTYPE html>

<html>

<head>

< title>External Link Example</ title>

</head>

<body>

<h2>External Website Link</h2>

<p>

Click the link below to visit Instagram:

</p>

<ahref="[Link]
sit Instagram</a>

</body>

</html>

Output:
 Project No:26

Title: Design a webpage to open a mail to link.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Send Email</title>

</head>

<body>

<h2>Contact Us</h2>

<p>Click the link below to send us an email:</p>

<a her="[Link] Email</a>

</body>

</html>

Output:
 Project No:27

Title: Design a webpage to open a phone number link.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Call Us</title>

</head>

<body>

<h2>Contact Us</h2>

<p>Click the link below to call us:</p>

<a her="[Link] 123-456-7890</a>

</body>

</html>

Output:
 Project No:28

Title: Design a webpage to open a section on the same page using links.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Section Navigation</title>

</head>

<body>

<h2>Welcome to Our Website</h2>

<p>Click the link below to go to Section 1:</p>

<a her="#section1">Go to Section 1</a>

<div style="height: 800px;"> <! -- Added for scrolling effect -->

<p>Scroll down to see the sections</p>

</div>

<h2 id="section1">Section 1</h2>

<p>This is Section 1. You have jumped to this part of the page! </p>

<a her="#top">Go Back to Top</a>

</body>

</html>

output:
 Project No:29

Title: Design a webpage to relative path

Source Code:

<html>

<head>

<title><small>-smaller text</title>

</head>

<body>

<p>my bestie is very <small>beautiful</small> girl. </p>

</body>

</html>

Output:
 Project No:30

Title: Design a web page by demonstrating the usage of Form Tag

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Simple Form</title>

</head>

<body>

<form>

Name: <input type="text"><brr><brr>

Email: <input type="text"><brr><brr>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:
 Project No:31

Title: Design a web page by demonstrating the usage of Radio Button

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Radio Button Example</title>

</head>

<body>

<h2>Select Your Gender</h2>

<form>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><brr>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><brr>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</form>

</body>

</html>

Output:
 Project No:32

Title: Design a web page by demonstrating the usage of Radio Button

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Radio Button Example</title>

</head>

<body>

<h2>Select Your Gender</h2>

<form>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><brr>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><brr>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</form>

</body>

</html>

Output:
 Project No: 33

Title: Design a web page by demonstrating the usage of Dropdown

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Dropdown Example</title>

</head>

<body>

<h2>Select Your City</h2>

<form>

<label for="city">City:</label>

<select id="city" name="city">

<option value="visage">Vizag</option>

<option value="Hyderabad">Hyderabad</option>

<option value="Vijayawada">Vijayawada</option>

<option value="Tirupati">Tirupati</option>

</select>

</form>

</body>

</html>

Output:
 Project No:34

Title: Design a web page by demonstrating the usage of Text area

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Text area Example</title>

</head>

<body>

<h2>Leave a Comment</h2>

<form>

<label for="comment">Your Comment:</label><brr>

<text area id="comment" name="comment" rows="5" cols="30"></text area>

</form>

</body>

</html>

Output;
 Project No: 35

Title: Design a web page by demonstrating the usage of Buttons

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Button Example</title>

</head>

<body>

<h2>Click a Button</h2>

<form>

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

<button type="reset">Reset</button>

<button type="button" onclick="alert ('You clicked me!')">Click

Me</button>

</form>

</body>

</html>

Output:
 Project No:36

Title: Design a web page by demonstrating the usage of superscript

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>

SUPERSCRIPT TAG

</title>

</head>

<body>

<h2>Example of superscript tag</h2>

<p>The formula for (a-b) ² is a²+b²-2ab.</p>

</body>

</html>

Output:
 Project No:37

Title: Design a web page by demonstrating the usage of subscript

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>

SUBSCRIPT TAG

</title>

</head>

<body>

<h2>Example of subscript tag</h2>

<p>The formula for sulphuric acid is H₂SO₄. </p>

</body>

</html>

Output:
 Project No:38

Title: Design a web page by demonstrating the usage of del tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>

DELETE TAG

</title>

</head>

<body>

<h2>Example of del tag</h2>

<p>HTML is a <del>programming</del> markup language. </p>

</body>

</html>

Output:
 Project No:39

Title: Design a web page by demonstrating the usage of insert tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>

Joshna 2361530252

INSERT TAG

</title>

</head>

<body>

<h2>Example of using ins tag</h2>

<p>HTML is a <ins>markup</ins> language. </p>

</body>

</html>

Output:
 Project No:40

Title: Create a web page demonstrating the use of the bold tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title><b> – Bold Text</title>

</head>

<body>

<p>This is a <b>bold</b> word. </p>

</body>

</html>

Output:
 Project No:41

Title: Create a web page demonstrating the use of the strong tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title><strong> – Strong Importance</title>

</head>

<body>

<p>This is <strong>important</strong> text. </p>

</body>

</html>

Output:
 Project No:42

Title: Create a web page demonstrating the use of the italic tag.

Source code:

<!DOCTYPE html>

<html>

<head>

<title><I> – Italic Text</title>

</head>

<body>

<p>This is an <I>italic</I> word. </p>

</body>

</html>

Output:
 Project No:43

Title: Create a web page demonstrating the use of the emphasized tag.

Source code:

<!DOCTYPE html>

<html>

<head>

<title><me> – Emphasized Text</title>

</head>

<body>

<p>This is <me>emphasized</me> text. </p>

</body>

</html>

Output:
 Project No:44

Title: Create a web page demonstrating the use of the underlined tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title><u> – Underlined Text</title>

</head>

<body>

<p>This is an <u>underlined</u> word. </p>

</body>

</html>

Output:
 Project No:45

Title: Create a web page demonstrating the use of the highlighted tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title><mark> – Highlighted Text </title>

</head>

<body>

<p>This is <mark>highlighted </mark> word. </p>

</body>

</html>

Output:
 Project No:46

Title: Design a web page by demonstrating the usage of small tag.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title><small> – Smaller Text</title>

</head>

<body>

<p>This is <small>smaller</small> text. </p>

</body>

</html>

Output:
 Project No:47

Title: Design a web page demonstrating the usage of the `<frameset>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frameset Example</title></head>

<frameset cols="50%,50%">

<frame sac="[Link]

<frame sac="[Link]

</frameset>

</html

Output:
 Project No:48

Title: Design a web page demonstrating the usage of the `cols` attribute in `<frameset>`.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frameset with Columns</title></head>

<frameset cols="30%,70%">

<frame sac="[Link]

<frame sac="[Link]

</frameset>

</html>

Output:
 Project No:49

Title: Design a web page demonstrating the usage of the `rows` attribute in `<frameset>`.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frameset with Rows</title></head>

<frameset rows="40%,60%">

<frame sac="[Link]

<frame sac="[Link]

</frameset>

</html>

Output:
 Project No:50

Title: Design a web page demonstrating the usage of the `frameborder` attribute in `<frameset>`.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frameset without Borders</title></head>

<frameset cols="50%,50%" frameborder="0">

<frame sac="[Link]

<frame sac="[Link]

</frameset>

</html>

Output:
 Project No:51

Title: Design a web page demonstrating the usage of the `border` attribute in `<frameset>`.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frameset with Custom Border</title></head>

<frameset cols="50%,50%" border="5">

<frame sac="[Link]

<frame sac="[Link]

</frameset>

</html>

Output:
 Project No:52

Title: Design a web page demonstrating the usage of the `no resize` attribute in `<frame>`.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Frame No Resize</title></head>

<frameset cols="50%,50%">

<frame sac="[Link] no resize>

<frame sac="[Link]

</frameset>

</html>

Output:
 Project No:53

Title: Design a web page demonstrating the usage of the `<header>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Header Example</title></head>

<body>

<header>

<h1>My Travel Blog</h1>

<nav>

<a her="#home">Home</a> |

<a her="#destinations">Destinations</a> |

<a her="#contact">Contact</a>

</nav>

</header>

</body>

</html>

Output:
 Project No:54

Title: Design a web page demonstrating the usage of the ‘<nav>’ tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Nav Example</title></head>

<body>

<nav>

<ul>

<li><a her="#home">Home</a></li>

<li><a her="#services">Services</a></li>

<li><a her="#blog">Blog</a></li>

</ul>

</nav>

</body>

</html>

output:
 Project No:55

Title: Design a web page demonstrating the usage of the `<main>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Main Tag Example</title></head>

<body>

<main>

<h2>Today's Weather Update</h2>

<p>It is sunny with a high of 32°C and low humidity across coastal regions. </p>

</main>

</body>

</html>

Output:
 Project No:56

Title: Design a web page demonstrating the usage of the `<article>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Article Example</title></head>

<body>

<article>

<h2>Top 5 Budget Travel Destinations</h2>

<p>Explore places like Bali, Vietnam, and Georgia without breaking the bank! </p>

</article>

</body>

</html>

Output:
 Project No:57

Title: Design a web page demonstrating the usage of the `<section>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Section Example</title></head>

<body>

<section>

<h2>About Our Company</h2>

<p>We specialize in eco-friendly home solutions. </p>

</section>

</body>

</html>

Output:
 Project No:58

Title: Design a web page demonstrating the usage of the `<aside>` tag.

Source Code

<!DOCTYPE html>

<html>

<head><title>Aside Example</title></head>

<body>

<main>

<h2>How to Bake a Cake</h2>

<p>Follow these simple steps to make a delicious chocolate cake. </p>

</main>

<aside>

<h3>Pro Tip</h3>

<p>Always use fresh eggs for better results! </p>

</aside>

</body>

</html>:

Output:
 Project No:59

Title: Design a web page demonstrating the usage of the `<footer>` tag.

Source Code:

<!DOCTYPE html>

<html>

<head><title>Footer Example</title></head>

<body>

<footer>

<p>&copy; 2025 Joshna. All rights reserved. </p>

<p>Contact: bandarujyoshna943@[Link]</p>

</footer>

</body>

</html>

Output:
 Project No:60

Title: Design a web page demonstrating the usage of the <figure> and <fig caption> tags

Source Code:

<!DOCTYPE html>

<html>

<head><title>Figure and Fig caption Example</title></head>

<body>

<h1>My Photo Gallery</h1>

<figure>

<imp src="[Link]
[Link]?cs=srgb&dl=[Link]&fm=jpg" alt="Sunset view at the beach"
width="400">

<fig caption>Sunset view at the beach during summer vacation</fig caption>

</figure>

</body>

</html>

Output:
 Project No:61

Title: Design a web page implementing Inline CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1 style="colour: blue; font-size: 24px; text-align: centre;">Welcome to Inline CSS! </h1>

<p style="colour: green; font-size: 16px;">This paragraph is styled with inline CSS. </p>

</body>

</html>

Output:
 Project No:62

Title: Design a web page implementing Internal CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Example</title>

<style>

body {

background-color: lightpink;

h1 {

color: navy;

p{

color: red;

font-size: 18px;

</style>

</head>

<body>

<h1>Welcome to Internal CSS!</h1>

<p>This paragraph is styled with Internal CSS.</p>

</body>

</html>
Output:
 Project No:63

Title: Design a web page implementing External CSS

Source Code:

HTML CODE:

<html>

<head>

<title>External CSS Example</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<h1>Welcome to External CSS!</h1>

<p>This paragraph is styled with external CSS.</p>

<button>Click Me</button>

</body>

</html>

CSS Code:

h1 {

color: blue;

font-size: 24px;

text-align: center;

p{

color: green;

font-size: 16px;

button {

background-color: orange;

color: white;

padding: 10px;

border: none;
cursor: pointer;}

output:

Output:
 Project No:64

Title: Design a web page implementing the usage of CSS background property

Source Code:

HTML CODE:

<!DOCTYPE html>

<html>

<head>

<title>CSS Background</title>

<link rel="stylesheet" href="CSS_background.css">

</head>

<body>

</body>

</html>

CSS CODE:

body {

background-image: url("[Link]
[Link]");

background-size: cover;

background-position: Right;

margin: 0;

height: 100vh;}
output:

Project No:65

Title: Design a web page implementing the usage of CSS borders property

Source Code:

HTML CODE:

<!DOCTYPE html>

<html>

<head>

<title>CSS Borders</title>

<link rel="stylesheet" href="CSS_borders.css">

</head>

<body>

<div>

<h1>CSS Borders</h1>

<p>In this page, you will learn how to set borders..!!!</p>

</div>

</body>

</html>

CSS CODE:

div {

border-style: dashed;

border-color: indigo;
border-width: 10px;

padding: 10px;}

Output:

Project No:66

Title: Design a web page implementing the usage of CSS text property

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>CSS Text Properties</title>

<style>

h1 {

color: coral;

text-transform: uppercase;

text-align: center;

p{

color:blue;

text-align: center;

letter-spacing: 10px;

word-spacing: 20px;

text-shadow: 10px 20px 2.5px black;

</style>
</head>

<body>

<h2>joshna</h2>

<u><h1>Diwali</h1></u>

<p>Diwali is a festival of beautiful lights.</p>

</body>

</html>

Output:
 Project No:67

Title: Demonstrate the usage of the Universal Selector (*) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

*{

margin: 0;

padding: 0;

colour: blue;

</style>

<title>Joshna</title>

</head>

<body>

<h1>Hello guys</h1>

<p>Welcome to my world. </p>

</body>

</html>

Output:
 Project No:68

Title: Demonstrate the usage of the Type Selector (element) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

p{

colour: green;

font-size: 18px;

</style>

<title>Joshna</title>

</head>

<body>

<p>This paragraph is targeting all the elements of a specific type. </p>

<p>It uses the type selector. </p>

</body>

</html>

Output:
 Project No:69

Title: Demonstrate the usage of the Class Selector (.class name) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. highlight {

background-colour: pink;

</style>

<title>Joshna</title>

</head>

<body>

<p class="highlight">This paragraph has a class selector targets elements with specific class attribute.
</p>

<p>Here we are listening CSS class</p>

</body>

</html>

Output:
 Project No:70

Title: Demonstrate the usage of the ID Selector (#id) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

#main-title {

text-align: centre;

colour: purple;

</style>

<title>Joshna</title>

</head>

<body>

<h1 id="main-title">Welcome to My City</h1>

<h1 id="main-title">This city was best way to explore everything. </h1>

</body>

</html>

Output:
 Project No:71

Title: Demonstrate the usage of the Descendant Combinator (A B) in CSS

Source code:

<!DOCTYPE html>

<html>

<head>

<style>

div p {

colour: blue;

</style>

<title>Joshna</title>

</head>

<body>

<div>

<p>The Descendent combinator targets elements the t is nested inside another specific element.
</p>

<p>we are listening CSS class</p>

<p>Descendant combinator</p>

</div>

</body>

</html>

Output:
 Project No:72

Title: Demonstrate the usage of the Child Combinator (A > B) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

ul > li {

color: orange;

</style>

<title>joshna</title>

</head>

<body>

<ul>

<li>Special Items</li>

<ol>

<li>Biryani</li>

<li>chicken fry</li>

</ol>

<li>Deserts</li>

<ol>

<li>Apricot delight</li>

<li>choco lova cake</li>

</ul>

</body>

</html>
Output:
 Project No:73

Title: Demonstrate the usage of the Adjacent Sibling Combinator (A + B) in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

h1 + p {

colour: orange;

</style>

<title>Joshna</title>

</head>

<body>

<h1>Adjacent Sibling Combinator</h1>

<p>This combinator selects the element that directly follows another specified element. </p>

<div>
<h1>Title</h1>

<p>This paragraph is orange because it follows the h1. </p>

<h2>Title</h2>

<p>It is usage of adjacent sibling combinator. </p>

</div>

</body>

</html>

Output:
 Project No:74

Title: Demonstrate the usage of the General Sibling Combinator (A ~ B) in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

h1 + p {

colour: orange;

</style>

<title>Joshna</title>

</head>

<body>

<h1>General Sibling Combinator</h1>

<p>This combinator selects the element that directly follows another specified element. </p>

<div>

<h1>Title</h1>

<p>This paragraph is orange because it follows the h1. </p>

<h2>Title</h2>

<p>It is usage of adjacent sibling combinator. </p>

</div>

</body>

</html>
Output:
 Project No:75

Title: Demonstrate the usage of `border-radius` for Rounded Corners in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. rounded-box {

width: 200px;

height: 100px;

background-colour: light coral;

border-radius: 20px;

padding: 10px;

</style>

<title>Rounded Corners</title>

</head>

<body>

<div class="rounded-box">This box has rounded corners. </div>

</body>

</html>

Output:
 Project No:76

Title: Demonstrate the usage of `box-shadow` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. shadow-box {

width: 400px;

height: 200px;

background-colour: purple;

box-shadow: 10px 10 pox 20px Gray;

padding: 10px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="shadow-box">This box shadow is used to apply shadow effects to elements. </div>

</body>

</html>
 Project No:77

Title: Demonstrate the usage of `border-image` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. image-border {

width: 250px;

border: 20px solid transparent;

border-image: URL (' [Link]

[Link]/images?q=tbn:ANd9GcSYzrYxGAUFA_gpvaYFyI5OpARBJfGkVoLswi4tbtVTArNnttQRP
wmqcdtx5DMmo8EvTslSGohuwb7T8AYJ5NMojMBe8T3MkU7SRSFxGTvPaA ') 30 rounds;

padding: 10px;

</style>

<title>Border Image</title>

</head>

<body>

<div class="image-border">This box uses an image as its

border. </div>

</body>

</html>

Output:
 Project No:78

Title: Demonstrate the usage of the `display: block` property in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

table {

border: 2px solid black;

border-collapse: collapse;

width: 50%;

then, td {

border: 1px solid Gray;

padding: 8px;

text-align: centre;

</style>

<title>Table Border</title>

</head>

<body>

<table>

<tr><the>Name</the><the>Class</the></tr>

<tr><td>Joshna</td><td>Degree</td></tr>

<tr><td>Keerthi</td><td>Degree</td></tr>

</table>

</body>

</html>
Output:
 Project No:79

Title: Demonstrate the usage of the `display: block` property in CSS

Source code:

<!DOCTYPE html>

<html>

<head>

<style>

. block-example {

display: block;

background-colour: light blue;

padding: 10px;

margin-bottom: 10px;

</style>

<title>Display Block</title>

</head>

<body>

<imp sac="/[Link]" alt="back ground image" width="200px"

height="200px" class="block-example">

<span>This is another span. </span>

</body>

</html>
output:
 Project No:80

Title: Demonstrate the usage of the `display: inline` property in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. inline-example {

display: inline;

background-colour: light coral;

padding: 5px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="inline-example">This is Joshna. </div>

<div class="inline-example">Another name Chinni. </div>

</body>

</html>

Output:
 Project No:81

Title: Demonstrate the usage of the `display: inline-block` property in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. inline-block-example {

display: inline-block;

width: 200px;

height: 150px;

background-colour: light blue;

margin: 5px;

text-align: centre;

line-height: 100px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="inline-block-example">mom 1</div>

<div class="inline-block-example">dad 2</div>

</body>

</html>
Output:
 Project No:82

Title: Demonstrate the usage of the `display: none` property in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. hidden {

display: none;

</style>

<title>Joshna</title>

</head>

<body>

<p>my mom is my world. </p>

<p class="hidden">This paragraph is hidden. </p>

</body>

</html>

Output:
 Project No:83

Title: Demonstrate the usage of `display: flex` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

background-colour: light Gray;

padding: 10px;

. flex-container div {

background-colour: blue;

margin: 10px;

padding: 20px;

font-size: 18px;

</style>

<title>my family </title>

</head>

<body>

<h2>my family</h2>

<div class="flex-container">

<div>Chinni </div>

<div>Pradeep </div>

<div> Joshna </div>

</div>

</body>

</html>
Output:
 Project No:84

Title: Demonstrate the usage of `flex-direction` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

flex-direction: column;

background-colour: light Gray;

padding: 10px;

. flex-container div {

background-colour: light green;

margin: 10px;

padding: 15px;

</style>

<title>Joshna</title>

</head>

<body>

<h2>Gods</h2>

<div class="flex-container">

<div>Shivayya</div>

<div>Krishna</div>

<div>Ayyappa</div>

</div>

</body>

</html>
Output:
 Project No:85

Title: Demonstrate the usage of `flex-wrap` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

flex-wrap: wrap;

background-colour: light Gray;

. flex-container div {

background-colour: light coral;

width: 150px;

margin: 10px;

padding: 10px;

font-size: 18px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="flex-container">

<div>Shivayya</div>

<div>Krishna</div>

<div>Ayyappa</div>

<div>Vishnu</div>

</div>
</body>

</html>

output:
 Project No:86

Title: Demonstrate the usage of `flex-flow` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

flex-flow: row wrap;

background-colour: light Gray;

. flex-container div {

background-colour: yellow;

width: 160px;

margin: 10px;

padding: 10px;

font-size: 16px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="flex-container">

<div>cake</div>

<div>deserts</div>

<div>chocolate</div>

<div>Juices</div>

</div>

</body>

</html>
Output:
 Project No:87

Title: Demonstrate the usage of `justify-content` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: flex;

justify-content: space-between;

background-color: lightgray;

padding: 10px;

.flex-container div {

background-color: purple;

padding: 20px;

font-size: 16px;

</style>

<title>joshna</title>

</head>

<body>

<div class="flex-container">

<div>Left</div>

<div>Middle</div>

<div>Right</div>

</div>

</body>

</html>
Output:
 Project No:88

Title: Demonstrate the usage of `align-items` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

align-items: centre;

height: 150px;

background-colour: light Gray;

. flex-container div {

background-colour: sky-blue;

padding: 20px;

font-size: 18px;

</style>

<title>Joshna</title>

</head>

<body>

<div class="flex-container">

<div>mom</div>

<div>dad</div>

</div>

</body>

</html>
output:
 Project No:89

Title: Demonstrate the usage of `align-content` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. flex-container {

display: flex;

flex-wrap: wrap;

align-content: centre;

height: 300px;

background-colour: light Gray;

. flex-container div {

background-colour: light pink;

width: 120px;

height: 80px;

margin: 10px;

text-align: centre;

line-height: 80px;

</style>

<title>Align Content</title>

</head>

<body>

<div class="flex-container">

<div>One</div>

<div>Two</div>

<div>Three</div>

<div>Four</div>
</div>

</body>

</html>

Output:
 Project No:90

Title: Demonstrate the usage of `a: link` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

a: link {

colour: Red;

text-decoration: none;

font-weight: bold;

</style>

<title>Link - a: link</title>

</head>

<body>

<a her="[Link] Example</a>

</body>

</html>

Output:
 Project No:91

Title: Demonstrate the usage of `a: visited` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

a: visited {

colour: Blue;

</style>

<title>Visited Link</title>

</head>

<body>

<a her="[Link] Example</a>

</body>

</html>

Output:
 Project No:92

Title: Demonstrate the usage of `a: hover` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

a:hover {

color: red;

text-decoration: underline;

</style>

<title>Hover Link</title>

</head>

<body>

<a href="[Link] This is joshna</a>

</body>

</html>

Output:
 Project No:93

Title: Demonstrate the usage of `a:active` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

a:active {

color: Blue;

</style>

<title>Active Link</title>

</head>

<body>

<a href="[Link] Me</a>

</body>

</html>

Output:
 Project No:94

Title: Demonstrate the usage of `overflow` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. box {

width: 200px;

height: 100px;

overflow: scroll;

border: 2px solid black;

padding: 10px;

</style>

<title>Overflow Example</title>

</head>

<body>

<div class="box">

This is a long content block. It will overflow and display scrollbars when it does not fit

within the box's fixed size.

</div>

</body>

</html>
 Project No:95

Title: Demonstrate the usage of the `float` property in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

imp {

float: left;

margin-right: 15px;

</style>

<title>Float Example</title>

</head>

<body>

<imp sac="C:\Users\jyo\Downloads\[Link]"alt="Sample">

<p>This text wraps around the image that is floated to the left. </p>

</body>

</html>

Output:
 Project No:96

Title: Demonstrate the usage of `calc () ` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. calc-box {

width: calc (100% - 500px);

background-colour: lighted;

padding: 20px;

</style>

<title>CSS Calc</title>

</head>

<body>

<div class="calc-box">This box is 50px less than the full width of the page. </div>

</body>

</html>

Output:
 Project No:97

Title: Demonstrate the usage of `min () ` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. min-box {

width: min (80%, 300px);

background-colour: light coral;

padding: 20px;

</style>

<title>CSS Min Function</title>

</head>

<body>

<div class="min-box">This box is no wider than 300px or 80% of the screen, whichever is

smaller. </div>

</body>

</html>

Output:
 Project No:98

Title: Demonstrate the usage of `max () ` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

.max-box {

width: max (200px, 50%);

background-colour: purple;

padding: 20px;

</style>

<title>CSS Max Function</title>

</head>

<body>

<div class="max-box">function returns the largest of the given values.

whichever is larger. </div>

</body>

</html>

Output:
 Project No:99

Title: Demonstrate the usage of `: first-line` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

p: first-line {

font-weight: bold;

colour: red;

</style>

<title>First Line</title>

</head>

<body>

<p>This is a long paragraph demonstrating how the first line gets a different style using

the: first-line pseudo-element. The rest of the paragraph looks normal. </p>

</body>

</html>

Output:
 Project No:100

Title: Demonstrate the usage of `: first-letter` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

p: first-letter {

font-size: 200%;

colour: blue;

</style>

<title>First Letter</title>

</head>

<body>

<p>This paragraph demonstrates how the first letter becomes large and styled differently

using the: first-letter pseudo-element. </p>

</body>

</html>

Output:
 Project No:101

Title: Demonstrate the usage of `: before` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

h1: before {

content: "★ ";

colour: gold;

</style>

<title>Before Element</title>

</head>

<body>

<h1>Welcome</h1>

</body>

</html>

Output:
 Project No:102

Title: Demonstrate the usage of `: after` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

h1: after {

content: " ✔";

colour: green;

</style>

<title>After Element</title>

</head>

<body>

<h1>Task Complete</h1>

</body>

</html>

Output:
 Project No:103

Title: Demonstrate the usage of `: selection` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

p: selection {

background: yellow;

colour: black;

</style>

<title>Selection</title>

</head>

<body>

<p>Try selecting this text to see the custom selection styling. </p>

</body>

</html>

Output:
 Project No:104

Title: Demonstrate the usage of `: nth-child () ` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

li: nth-child(odd) {

background-colour: light blue;

</style>

<title>nth-child</title>

</head>

<body>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

</body>

</html>

Output:
 Project No:105

Title: Demonstrate the usage of `: target` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

Div: target {

background-colour: yellow;

border: 2px solid black;

</style>

<title>Target Example</title>

</head>

<body>

<a her="#section1">Go to Section 1</a>

<div id="section1" style="margin-top: 50px; padding: 10px;">This is Section 1</div>

</body>

</html>

Output:
 Project No:106

Title: Demonstrate the usage of `input[type="text”] ` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

input[type="text"] {

border: 2px solid green;

padding: 5px;

</style>

<title>Attribute Selector</title>

</head>

<body>

<input type="text" placeholder="Enter name">

<input type="password" placeholder="Password">

</body>

</html>

Output:
 Project No:107

Title: Demonstrate the usage of `: placeholder` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

input: placeholder {

colour: Gray;

font-style: italic;

</style>

<title>Placeholder Styling</title>

</head>

<body>

<input type="text" placeholder="Type your name here">

</body>

</html>

Output:
 Project No:108

Title: Demonstrate the usage of `z-index` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. box1 {

position: absolute;

top: 50px;

left: 50px;

width: 150px;

height: 150px;

background-colour: red;

z-index: 1;

. box2 {

position: absolute;

top: 100px;

left: 100px;

width: 150px;

height: 150px;

background-colour: green;

z-index: 2;

</style>

<title>Z-Index Example</title>

</head>

<body>
<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

Output:
 Project No:109

Title: Demonstrate the usage of `input[type="range”] ` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

input[type="range"] {

width: 300px;

accent-colour: green;

</style>

<title>Range Input</title>

</head>

<body>

<label for="volume">Volume:</label>

<input type="range" id="volume" name="volume" min="0" max="100">

</body>

</html>

Output:
 Project No:110

Title: Demonstrate the usage of the `<progress>` element in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

progress {

width: 300px;

height: 20px;

accent-colour: blue;

</style>

<title>Progress Example</title>

</head>

<body>

<label>Download Progress:</label>

<progress value="60" max="100"></progress>

</body>

</html>

Output:
 Project No:111

Title: Demonstrate the usage of `accent-colour` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

input[type="checkbox"] {

accent-colour: purple;

</style>

<title>Accent Colour</title>

</head>

<body>

<label><input type="checkbox" checked> Accept Terms</label>

</body>

</html>

Output:
 Project No:112

Title: Demonstrate a simple CSS animation using `@keyframes`.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. animated-box {

width: 100px;

height: 100px;

background-colour: coral;

animation-name: change Colour;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

@keyframes change Colour {

from {background-colour: coral;}

to {background-colour: dodger blue;}

</style>

<title>CSS Animation</title>

</head>

<body>

<div class="animated-box"></div>

</body>

</html>

Output:
 Project No:113

Title: Demonstrate the usage of `backdrop-filter` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: url('[Link]
94cuthlksHBHMH1buqYAHaNL?r=0&rs=1&pid=ImgDetMain&o=7&rm=3') no-repeat centre/cover;

height: 100vh;

margin: 0;

. glass {

width: 600px;

height: 400px;

margin: 50px auto;

back ground- colour: grab (255,255,255,0.3);

backdrop-filter: blur(5px);

border-radius: 10px;

padding: 20px;

colour: black;

</style>

</head>

<body>

<div class="glass">

<h2>Glass Effect</h2>

<p>This box uses backdrop-filter: blur for a frosted-glass effect. </p>

</div>
</body>

</html>

Output:
 Project No:114

Title: Demonstrate the usage of `transform: translate () ` in CSS

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. box {

width: 100px;

height: 100px;

background-colour: Blue;

transform: translate (50px, 30px);

</style>

<title>Translate Transform</title>

</head>

<body>

<div class="box"></div>

</body>

</html>

Output:
 Project No:115

Title: Demonstrate the usage of `transform: rotate () ` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. box {

width: 100px;

height: 100px;

background-colour: Dark blue;

transform: rotate(45deg);

</style>

<title>Rotate Transform</title>

</head>

<body>

<div class="box"></div>

</body>

</html>

Output:
 Project No:116

Title: Demonstrate the usage of `transform: scale () ` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. box {

width: 100px;

height: 100px;

background-colour: light pink:

transform: scale (1.5, 1.2);

</style>

<title>Scale Transform</title>

</head>

<body>

<div class="box"></div>

</body>

</html>

OUTPUT:
 Project No:117

Title: Demonstrate the usage of `counter-increment` in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

body {

counter-reset: section;

h2: before {

counter-increment: section;

content: "Section " counter(section) ": ";

font-weight: bold;

</style>

<title>Counter Increment</title>

</head>

<body>

<h2>Introduction</h2>

<h2>Features</h2>

<h2>Conclusion</h2>

</body>

</html>
Output:
 Project No:118

Title: Demonstrate the usage of a media query for screen width in CSS.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-colour: light green;

@media (max-width: 900px) {

body {

background-colour: light blue;

@media (max-width: 600px) {

body {

background-colour: light coral;

</style>

<title>Media Query - Width</title>

</head>

<body>

<h2>Resize the window to see background colour change at 900px and 600px. </h2>

</body>

</html>

Output:
 Project No:119

Title: Demonstrate media query to change `flex-direction` based on screen size.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

display: flex;

gap: 10px;

. box {

width: 100px;

height: 100px;

background-colour: steel blue;

colour: white;

text-align: centre;

line-height: 100px;

@media (max-width: 900px) {

.container {

flex-direction: column;

@media (max-width: 600px) {

.container {

flex-direction: row-reverse;

</style>
<title>Media Query - Flex Direction</title>

</head>

<body>

<div class="container">

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

</div>

</body>

</html>

Output:
 Project No:120

Title: Demonstrate media query to toggle visibility based on screen size.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. note {

background-colour: gold;

padding: 10px;

margin: 20px 0;

@media (max-width: 900px) {

. note {

visibility: hidden;

@media (max-width: 600px) {

. note {

display: none;

</style>

<title>Media Query - Visibility</title>

</head>

<body>

<div class="note">This notice changes visibility at 900px and disappears under

600px. </div>

</body>
</html>

Output:
 Project No:121

Title: Demonstrate the use of `get Element Bid` to access and modify an element.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>get Element Example</title>

</head>

<body>

<h1 id="title">Original Title</h1>

<script>

document. Get Element("title").text Content = "Modified by JavaScript";

</script>

</body>

</html>

Output:
 Project No:122

Title: Demonstrate the use of `get Elements by Class Name` to access multiple Elements.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>get Elements by Class Name Example</title>

</head>

<body>

<p class="item">Item 1</p>

<p class="item">Item 2</p>

<button onclick="update Items ()">Update First Item</button>

<script>

function update Items () {

cost items = document. get t Elements by Class Name("item");

items [0].text Content = "First Item Updated!";

</script>

</body>

</html>

Output:
 Project No:123

Title: Demonstrate how to change content using `text Content` with a button.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>text Content Example</title>

</head>

<body>

<div id="info"><b>Hello</b> World</div>

<button onclick="change Text ()">Change Text</button>

<script>

function change Text () {

document. get Element by Id("info").text Content = "Plain text only!";

</script>

</body>

</html>

Output:
 Project No:124

Title: Demonstrate how to change content using `inner HTML` with a button click.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>inner HTML Example</title>

</head>

<body>

<div id="container">Original Text</div>

<button onclick="update HTML ()">Change HTML</button>

<script>

function update HTML () {

document. get Element by Id("container"). inner HTML = "<h2><I>Dynamically Added

HTML</I></h2>";

</script>

</body>

</html>

Output:
 Project No:125

Title: Demonstrate how to update visible text using `inner Text` with a button.

Source Code:

<!DOCTYPE html>

<html>

<head>

<style>

. hidden {display: none;}

</style>

</head>

<body>

<div id="note"><span class="hidden">Hidden</span> Message</div>

<p id="output"></p>

<button onclick="show Inner Text ()">Get inner Text</button>

<script>

function show Inner Text () {

document. get Element by Id("output").text Content =

document. get Element by Id("note"). inner Text;

</script>

</body>

</html>

Output:
 Project No:126

Title: Demonstrate how to create an element by clicking a button.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Create Element on Click</title>

</head>

<body>

<button onclick="create Para ()">Add Paragraph</button>

<div id="output"></div>

<script>

function create Para () {

let para = document. create Element("p");

para .text Content = "This paragraph was added by clicking the button.";

document. Get Element by Id("output"). append Child(para);

</script>

</body>

</html>

Output:
 Project No:127

Title: Demonstrate how to remove an element from the DOM.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Remove Element</title>

</head>

<body>

<div id="container">

<p id="para">This paragraph will be removed. </p>

<button onclick="remove are()">Remove</button>

</div>

<script>

function remove Para () {

let parent = document. get Element by Id("container");

let child = document. Get Element by Id("para");

parent. remove Child(child);

</script>

</body>

</html>

Output:
 Project No:128

Title: Demonstrate how to change the style of an element using JavaScript.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Change Style</title>

</head>

<body>

<h2 id="title">Hello</h2>

<button onclick="change Style ()">Change Style</button>

<script>

function change Style () {

document. get Element by Id("title"). style. colour = "red";

document. get Element by Id("title"). style. font Size = "30px";

</script>

</body>

</html>

Output:
 Project No:129

Title: Demonstrate how to toggle visibility of an element

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Toggle Visibility</title>

</head>

<body>

<div id="box">Toggle me</div>

<button onclick="toggle Box()">Toggle</button>

<script>

function toggle Box () {

cost box = document. get Element by Id("box");

if (box. style. display === "none") {

box. style. display = "block";

} else {

Box. style. display = "none";

</script>

</body>

</html>
Output:
 Project No:130

Title: 130. Demonstrate how to get the value from an input field

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Input Value</title>

</head>

<body>

<input type="text" id="name Input" placeholder="Enter your name">

<button onclick="get Name()">Submit</button>

<p id="output"></p>

<script>

function get Name () {

cost name = document. get Element by Id ("name Input").value;

document. get Element by Id("output").text Content = "Hello, " + name;

</script>

</body>

</html>

Output:
 Project No:131

Title: 131. Demonstrate how to loop through elements using `get Elements by Tag Name`.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Loop through Elements</title>

</head>

<body>

<p>Hello</p>

<p>World</p>

<button onclick="update Text ()">Change All</button>

<script>

function update Text () {

cost paras = document. get Elements by Tag Name("p");

for (let I = 0; I < paras. length; I++) {

para’s[I].text Content = "Updated!";

</script>

</body>

</html>
Output:
 Project No:132

Title: 132. Demonstrate an increment and decrement counter

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Counter</title>

</head>

<body>

<h2 id="count">0</h2>

<button onclick="increment()">+</button>

<button onclick="decrement()">-</button>

<script>

let counter = 3;

function increment () {

counter++;

document. get Element by Id("count").text Content = counter;

function decrement () {

counter--;

document. get Element by Id("count").text Content = counter;

</script>

</body>

</html>
 Project No:133

Title: Demonstrate the usage of the `push () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Push Example</title></head>

<body>

<script>

let fruits = ["Apple", "Banana"];

fruits. push("Mango");

document. write(fruits);

</script>

</body>

</html>

Output:
 Project No:134

Title: Demonstrate the usage of the `pop () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Pop Example</title></head>

<body>

<script>

let fruits = ["Apple", "Banana", "Mango"];

fruits. pop ();

document. write(fruits);

</script>

</body>

</html>

Output:
 Project No:135

Title: Demonstrate the usage of the `map () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Map Example</title></head>

<body>

<script>

let numbers = [1, 2, 3];

let squared = numbers. map (x => x * x);

document. write(squared);

</script>

</body>

</html>

Output:
 Project No:136

Title: 136. Demonstrate the usage of the `filter () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Filter Example</title></head>

<body>

<script>

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

let even = numbers. filter (x => x % 2 === 0);

document. write(even);

</script>

</body>

</html>

Output:
 Project No:137

Title: Demonstrate the usage of the `reduce () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Reduce Example</title></head>

<body>

<script>

let numbers = [1, 2, 3, 4];

let sum = numbers. reduce ((act, cur) => act + cur, 0);

document. write(sum); // Output: 10

</script>

</body>

</html>

Output:
 Project No:138

Title: Demonstrate the usage of the `for Each () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>for Each Table Example</title></head>

<body>

<table border="1" id="data Table">

<tr><the>Name</the><the>Age</the></tr>

</table>

<script>

cost students = [

{name: "Alice", age: 22},

{name: "Bob", age: 24},

{name: "Charlie", age: 23}

];

students. for Each (student => {

cost row = `<tr><td>${[Link]} </td><td>${student. age} </td></tr>`;

document. get Element by Id ("data Table"). inner HTML += row;

});

</script>

</body>

</html>
Output:
 Project No:139

Title: Demonstrate the usage of the `slice () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Slice Example</title></head>

<body>

<script>

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let sliced = fruits. slice (1, 3);

document. write(sliced);

</script>

</body>

</html>

Output:
 Project No:140

Title: Demonstrate the usage of the `splice () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Splice Example</title></head>

<body>

<script>

let fruits = ["Apple", "Banana", "Mango"];

fruits. splice (1, 1, "Orange");

document. write(fruits);

</script>

</body>

</html>

Output:
 Project No:141

Title: Demonstrate the usage of the `includes () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Includes Example</title></head>

<body>

<script>

let colours = ["Red", "Blue", "Green"];

let has Blue = colours. includes("Blue");

document. write ("Contains Blue? " + has Blue);

</script>

</body>

</html>

Output:
 Project No:142

Title: Demonstrate the usage of the `find () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Find Example</title></head>

<body>

<script>

let numbers = [10, 25, 30, 45];

let found = numbers. find (Num => Num > 20);

document. write(found);

</script>

</body>

</html>

Output:
 Project No:143

Title: Demonstrate the usage of the `sort () ` method

Source Code:

<!DOCTYPE html>

<html>

<head><title>Sort Example</title></head>

<body>

<script>

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

numbers. sort ((a, b) => a - b);

document. write(numbers);

</script>

</body>

</html>

Output:
 Project No:144

Title: Demonstrate the usage of the `Spread Operator (...)` in arrays

Source Code:

<!DOCTYPE html>

<html>

<head><title>Spread Operator Example</title></head>

<body>

<script>

cost arr1 = [1, 2, 3];

cost arr2 = [4, 5];

cost combined = [...arr1, ...arr2];

document. write(combined);

</script>

</body>

</html>

Output:
 Project No:145

Title: Generate a table automatically by clicking on a link

Source code:

<!DOCTYPE html>

<html lang="end">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button onclick="data elements ()">click me</button>

<table width="100%" border="1">

<thread>

<tr>

<the>id</the>

<the>title</the>

<the>body</the>

</tr>

</thread>

<tale body id="table body">

</ tale body>

</table>

<script>

function data elements () {

fetch('[Link] =>

response. Json ()). then((data) => {

var tab body = document. get Element by Id (' table body');

data. map ((data list) => {

var row = document. create Element('tr');

row. inner HTML = `<td>${[Link]} </td>

<td>${data list. title} </td>

<td>${data list. body} </td>`;

Tab body. append(row)

})

}). catch((err)=>

[Link](err)

})

</script>

</body>

</html>

Output:
 Project No:146

Title: Demonstrate how to send data through an object in JavaScript

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Object Data Example</title>

</head>

<body>

<h2>Check console for object data</h2>

<script>

cost user = {

name: "joy",

age: 20,

email: "govi@[Link]"

};

function show User Details (user Object) {

[Link] ("Name:", [Link]);

[Link] ("Age:", user Object. age);

[Link] ("Email:", user Object. email);

Show User Details(user);

</script>

</body>

</html>
Output:
 Project No:147

Title: Demonstrate how to control a form submission using prevent Default ()

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Prevent Form Submit</title>

</head>

<body>

<h2>Form Example</h2>

<form id="my Form">

<input type="text" id="name" placeholder="Enter name" required />

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

</form>

<script>

document. Get Element by Id ("my Form"). add Event Listener ("submit", function(e) {

[Link] event Default ();

cost name = document. Get Element by Id("name").value;

[Link] ("Submitted name:", name);

});

</script>

</body>

</html>

Output:
 Project No:148

Title: Demonstrate how to store data in local storage using local Storage. set Item ()

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Loca Storage Set</title>

</head>

<body>

<h2>Store data to local storage</h2>

<button onclick="store Data ()">Save Username</button>

<script>

function store Data () {

local Storage. set Item ("username", "Sai");

alert ("Username stored in local storage!");

</script>

</body>

</html>

Output:
 Project No:149

Title: Demonstrate how to retrieve data from local storage using local Storage. get Item ()

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Local Storage Get</title>

</head>

<body>

<h2>Get data from local storage</h2>

<button onclick="get Data ()">Get Username</button>

<script>

function get Data () {

let username = local Storage. get Item("username");

alert ("Username: " + username);

</script>

</body>

</html>

Output:
 Project No:150

Title: Demonstrate how to clear all data from local storage using local Storage. clear()

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Local Storage Clear</title>

</head>

<body>

<h2>Clear all local storage</h2>

<button onclick="clear Storage ()">Clear Storage</button>

<script>

function clear Storage () {

local Storage. clear();

alert ("Local storage has been cleared!");

</script>

</body>

</html>

Output:
 Project-151

Title-151: Demonstrate how to create a database in MongoDB.

Source Code:

use my Data base

Output:
 Project-152

Title : Demonstrate how to create a collection in MongoDB.

Source Code:

db. create Collection("students")

Output:
 Project-153

Title-153: Demonstrate how to insert a document into a MongoDB collection.

Source Code:

db. students. insert One ({name: "Joshna", course: "BCA", age: 20})

Output:
 Project-154

Title : Demonstrate how to find documents in a MongoDB collection.

Source Code:

db. student. find ()

Output:
 Project-155

Title- Demonstrate how to update a document in MongoDB.

Source Code:

db. student. Update One ({name: "Aarav”}, {$set: {age: 20}})

Output:
 Project-156

Title- Demonstrate how to delete a document in MongoDB.

Source Code:

db. student. delete One ({name: "Aarav”})

Output:
 Project-157

Title : Demonstrate how to insert multiple documents using insert Many().

Source Code:

db. student. Insert Many ([

{name: "Anita", course: "BSc", age: 20},

{name: "Rahul", course: "BCom", age: 22},

{name: "Priya", course: "BA", age: 19},

])

Output:
 Project-158

Title: Demonstrate how to find documents using a filter in MongoDB.

Source Code:

db. student. find ({age: 21})

Output:
 PROJECT-159

Title: Demonstrate how to retrieve all documents using find ().

Source Code: db. student. find ()

Output:
 PROJECT-160

Title

Demonstrate how to update multiple documents using update Many ().

Command

db. student. Update Many ({course: "BCA”}, {$set: {status: "active”}})

Output
 PROJECT-161

Title

Demonstrate how to delete multiple documents using delete Many ().

Command

db. student. delete Many ({course: "BCA”})

Output
 PROJECT-162

Title

Demonstrate how to use the $a (equal) operator in MongoDB.

Command

db. student. find ({age: {$a: 21}})

Output
 PROJECT-163

Title:

Demonstrate how to use the $ne (not equal) operator in MongoDB.

Command:

db. student. find ({course: {$ne: "BCA”}})

Output
 PROJECT-164

Title

Demonstrate how to use the $get (greater than) operator in MongoDB.

Command

db. student. find ({age: {$get: 20}})

Output:
 PROJECT-165

Title:

Demonstrate how to use the $get (greater than or equal to) operator in MongoDB.

Command

db. student. find ({age: {$get: 21}})

output:
 PROJECT-166

Title

Demonstrate how to use the $let (less than) operator in MongoDB.

Command

db. student. find ({age: {$let: 22}})

Output
 PROJECT-167

Title

Demonstrate how to use the $let (less than or equal to) operator in MongoDB.

Command

db. student. find ({age: {$let: 21}})

Output
 PROJECT-168

Title

Demonstrate how to use the $in operator in MongoDB.

Command

db. student. find ({course: {$in: ["BCA", "BSC"]}})

Output:
 PROJECT-169

Title

Demonstrate how to use the $and logical operator in MongoDB.

Command

db. student. find ({$and: [ {age: {$get: 20}}, {course: "BCA”}]})

Output
 PROJECT-170

Title:

Demonstrate how to use the $or logical operator in MongoDB.

Command:

db. student. find ({$or: [ {course: "BCA”}, {course: "BBA”}]})

Output:
 PROJECT-171

Title

Demonstrate how to use the $not logical operator in MongoDB.

Command

db. student. find ({age: {$not: {$let: 21}}})

Output:
 PROJECT-172

Title:

Demonstrate how to create a new schema with bison Type and required using db. Create
Collection () in MongoDB.

Command:

db. Create Collection ("users", {

validator: {

$Json Schema: {

B son Type: "object", required: ["name", "email", "age"], properties: {

name: {b son Type: "string", description: "must be a string and is required”},

email: {b son Type: "string", pattern: "^. +@. +$", description: "must be a valid email and is
required”},

age: {b son Type: "int", minimum: 18, maximum: 100, description: "must be an integer between 18
and 100”},

is Active: {b son Type: "bool", description: "must be a Boolean”}, created at: {b son Type: "date",
description: "must be a date”}}}}});

Output:
 PROJECT-173

Title:

Demonstrate how to apply or modify schema validation on an existing MongoDB collection using
call Mod.

Command:

db. run Command ({call Mod: "users", validator:

{$Json Schema: {b son Type: "object", required: ["name", "email"],

properties: {name: {b son Type: "string”},

email: {b son Type: "string", pattern: "^. +@.+$" } } } },

validation Level: "strict", validation Action: "error”});

Validation Test Cases ✔

Valid Insert: db. users. insert One ({name: "john",

email: "john2005@[Link]",

age: 20,

is Active: true,

created at: new Date ()});

Output
 PROJECT-174

Title

Demonstrate the use of $current Date to update a field with the current date.

Command

db. student. update One ({name: "joy”}, {$current Date: {last Modified: true}});

Output
 PROJECT-175

Title

Demonstrate the use of $ink to increment a field.

Command

db. student. update One ({name: "Riya”}, {$ink: {age: 3}});

Output:
 PROJECT-176

Title

Demonstrate the use of $rename to rename a field.

Command

db. student. update One ({name: "Riya”}, {$rename: {“Uma": "email ID”}});

output:
 PROJECT-177

Title

Demonstrate the use of $set to set a new value to a field.

Command

db. student. update One ({name: "Divya”}, {$set: {course: "BCA”}});

Output
 PROJECT-178

Title

Demonstrate the use of $unset to remove a field.

Command

db. student. Update One ({name: "JYOSHNA”}, {$unset: {status: "“}});

Output
 PROJECT-179

Title

Demonstrate the use of $add To Set to add a unique value to an array.

Command

db. student. Update One ({name: "Sai”}, {$add ToSet: {skills: "JavaScript”}});

output:
 PROJECT-180

Title

Demonstrate the use of $pop to remove the last element of an array.

Command

db. student. update One ({name: "Tanya Sri”}, {$pop: {skills: 1}});

Output
 PROJECT-181

Title

Demonstrate the use of $pull to remove a matching value from an array.

Command

db. student. update One ({name: "Tanya Sri”}, {$pull: {skills: "CSS”}});

Output
 PROJECT-182

Title

Demonstrate the use of $push to add a value to the end of an array.

Command

db. student. Update One ({name: "Joshna”},

{$push:

{skills: "MongoDB”}});

Output:
 PROJECT-183

Title

Demonstrate the use of up sort in MongoDB to update or insert a document.

Command

db. student. Update One ({name: "Chandu”}, {$set: {age: 25, city: "Hyderabad”}}, {upset: true});

Output
 PROJECT-184

Title

Demonstrate the use of `$group` in MongoDB aggregation.

Command

db. student. aggregate ([ {$group: {_id: "$customer Id", total Amount: {$sum: "$amount”}}}]);

Output
 PROJECT-185

Title

Demonstrate the use of `$limit` in MongoDB aggregation.

Command

db. orders. aggregate ([ {

$limit: 5}]);

Output
 PROJECT-186

Title

Demonstrate the use of `$project` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$project: {_id: 0, customer Id: 1, amount: 1}}]);

Output
 PROJECT-187

Title

Demonstrate the use of `$sort` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$sort: {amount: -1}}]);

Output
 PROJECT-188

Title

Demonstrate the use of `$match` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$match:

{status: "delivered”}}]);

Output
 PROJECT-189

Title

Demonstrate the use of `$skip` in MongoDB aggregation.

Command

db. orders. aggregate ([ {

$skip: 5}]);

Output:
 PROJECT-190

Title

Demonstrate the use of `$count` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$match: {status: "delivered”}}, {$count: "total Delivered”}]);

Output
 PROJECT-191

Title

Demonstrate the use of `$lookup` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$lookup: {from: "customers", local Field: "customer Id", foreign Field: "_id",
as: "customer Details”}}]);

Output
 PROJECT-192

Title

Demonstrate the use of `$out` in MongoDB aggregation.

Command

db. orders. aggregate ([ {$match: {status: "delivered”}},

{$out: "delivered_ orders_ backup”}]);

Output: