Web Technology BCA-105P Nawal shingari

A Practical File on

Web Technologies

BCA-105P

Bachelor of Computer Applications (BCA)

Guru Gobind Singh Indraprastha University, Delhi

Submitted To: Submitted By:

Ms. Priyanka Rattan Nawal Shingari

Ms. Kavita Srivastava Enrl No.:074

Batch: BCA-I-E2

Institute of Information Technology & Management,

New Delhi – 1100 58

Batch (2024-2028)

Page | 1
Web Technology BCA-105P Nawal shingari

INDEX
S. No. Program Date Sign
1. Write HTML code to demonstrate different heading
styles
2. Write an HTML code to display the different
paragraphs with different alignment. Use at least
three Container tags and empty tags.
3. Write an HTML code to print the quadratic equation
as follows:

“In mathematics, a quadratic equation is a

Polynomial equation of the second degree. The

general form is

a2x+bx+c = 0

Where a ≠ 0. (For if a = 0, the equation becomes

a linear equation.”

4. Create a web page describing IITM. Use <address>

to display address, <blockquote> for sub headings,
<pre> tag for basic features and use <em> tag
wherever you are using numbers. Use different
background color & different text color, type and
size showing text.
5. Develop an HTML document which displays your
name as heading and displays the name of any four
of your friends in a list. Each friend’s name should
be a hyperlink. When you click a friend’s name, it
must open another HTML document which tells
about your friend.
6. Create a web page that has named link to move on
the top of the page and to the bottom of the page
7. Write HTML code to insert three images that are
aligned left, center and right. Also change the

Page | 2
Web Technology BCA-105P Nawal shingari

background color as blue of the web page. Give a

proper heading to the web page.
8. Write an HTML code to display the name of courses
taught in the institute under the list headings
Morning and Evening Courses respectively using
different type of ordered and unordered list.
9. Create an unordered list nested inside ordered list and
apply the following :
1. Insert an image of Main item on top right
comer of web page.
2. Display heading as a marquee.
3. Use different font styles and colors for
different ordered list items.
4. Insert horizontal line after each ordered item.

10. Make following five different web pages:

1. Create a web page containing information
about formatting styles and headings. The
following styles should be there: Bold, italics,
Underline, Strike, Subscript, superscript and all six
type of headings
2. Another web page should contain Font Styles
and Image tag
3. The next page should contain Marquee: Move
text, image and hyperlink
4. Finally, create a web page containing other
tags: br, hr, pre, p.
5. Also, create a home page containing links to
all the above pages.

Include following specifications:

●ln all these web pages only mention about name,
use of tag, and its attributes.
●Insert a background image on home page
●Also, the topics that each page contains should
have links to other pages. Therefore, use hyperlinks
for the topics that navigate to some other page for
description
●Insert a marquee showing HTML Tutorial as
moving text.

Page | 3
Web Technology BCA-105P Nawal shingari

●Use different font style for different topics

●On every page, make a hyperlink for going back to
home page and internal link also.
11. Create a Table to display the following table with
items in the Décor using ordered lists and
Hyperlinks. On the click of the Décor items,
suitable pages with their images and information
should be displayed.

12. Create a frame as per the following layout

i. The contents of upper left frame should open in

middle right frame
ii. The content of lower left frame should open in
lower-left frame.
iii. Top right should contain iitmjanakpuri webpage

Page | 4
Web Technology BCA-105P Nawal shingari

iv. Bottom-right should contain an audio/video

13. Make an image map of a Plant showing the usage of
shape, coords, href attributes in map definition.
Create 2 hotspots and Link each hotspot to small and
bigger images with details. All the web pages should
be designed with proper background color, images,
font styles and headings.
14. Create registration form with atleast 3 section
personal details, educational details and hobbies. Use
all form controls and 2 buttons-Submit and
Cancel.Use Post method in form
15. Write an internal CSS rule that make all text size as
18pt and color as red, background color blue. Give
the heading style font size as 24pt, font family as
sans-serif; color black and text align as Center.
16. Create an external CSS for anchor, headings, ul,
sublisting in UL, LI-em, hover, and class as
selectors.
17. Create a web page to show the usage of alert box and
confirm box
18. Write a JavaScript to accept your name and display
it.
19. Write a Program in JavaScript to calculate the
reverse of a number entered by the user
20. Write a Program in JavaScript to find the factorial of
a number
a) All numbers between 1 to 10
b) Any number given by user
c) All numbers between the starting and ending
number given by the user
21. Create a menu driven program using switch case.
Functions to be performed-Addition, Subtraction,
Multiplication, Division
22. Create an array to accept the numbers from user. The
size of the array will be given by the user. Print all
the items
23. Create an array [23,45,6,13,9,12,67,12,1, 63] and

Page | 5
Web Technology BCA-105P Nawal shingari

perform the following operations

i. Remove the last item and print the new length of
array
ii. Add 3 items in array and print the updated array
and length
iii. Sort the array and print
iv. Print the index and last index of 12
v. Create another array of 3 items , concatenate the
two arrays and print
vi. Join all the items of the new concatenated array
and print using newline as separator
24. Write a JavaScript code using arrays to:
a) accept 10 numbers from user and display them
b) Print the count of how many are +ive, -ive and
zero

Display the list of numbers which are positive and,

negative
25. Write a script that displays the various Math
functions and properties
26. Write a script that reads a date from an HTML form
and creates a Date object in which to store that date.
Then, use the various method of Date object to
display the date in several formats.
27. Write a script that displays the various String
Functions based on the below conditions
i. Store a string “Apples are round, and apples are
juicy”
ii. Display the index of apples
iii. Use substr(1,2) and substring(1) to create a new
substring
iv. Display the character at location 5
v. Replace the substring creates in (iii) with “Web
Technologies Lab”
28. Make a registration form with atleast following
fields- First Name, Last Name, Qualification, course,
marks percentage, Date of birth, email id, mobile
number, Submit & reset buttons. Implement atleast
the below mentioned validations:
i. Name should be in capitals

Page | 6
Web Technology BCA-105P Nawal shingari

ii. Form should not be blank

iii. Phone should only be numeric, accepts only 10
digits
iv. Age to be calculated from date of birth, and
readonly
v. Percentage should only have whole number, if
decimal, convert it.
vi. Upon submission of form, display name &
location in alert box
vii. Upon reset, all controls should be set to default
value(or blank)
viii. Required fields- first name, D.O.B, percentage
29. Create a webpage containing
a. Bootstrap table.
b. Various types of images.
c. Various types of buttons.
d. Various, typography classes with background color.
e. heading using Jumbotron
30. Create an XML file having five tags-books, book, author,
title and price, where books tag is the parent of book tag
and author, title and price tags are the child of book tags.

31. Create a XML page as Hello Welcome to my first XML

page and in this insert a style sheets as samp.css. This
style sheet should have a user-defined format in a
browser. It should have three tags name Play, title and fm,
which take the presentation style from the style sheet.

Page | 7
Web Technology BCA-105P Nawal shingari

Practical No. 1

AIM: Write html code to demonstrate different heading styles

Solution:

<html>

<head>

<title>first program</title>

</head>

<body>

<h1> This is my first webpage </h1>

<h2> This is my first webpage </h2>

<h3> This is my first webpage</h3>

<h4> This is my first webpage</h4>

<h5> This is my first webpage</h5>

<h6> This is my first webpage</h6>

</body>

Page | 8
Web Technology BCA-105P Nawal shingari

Practical No. 2

Aim:Write an Html code to display the different paragraph with different alignment use
atleast 3 container tag and 2 empty tag

Solution:

<html>

<head>

<title>2nd Practical</title>

</head>

<body>

<h1>Web Technologies</h1><hr>

<p align="right">HTML stands for Hyper Text Markup Language. HTML is the standard
markup language for creating Web pages.

HTML describes the structure of a Web page. HTML consists of a series of elements.

HTML elements tell the browser how to display the content.</p>

<br>

<p align="center">

Page | 9
Web Technology BCA-105P Nawal shingari

The first version of HTML was written by Tim Berners-Lee in 1993.

Since then, there have been many different versions of HTML.

The most widely used version throughout the 2000's was HTML 4.01,

which became an official standard in December 1999.</p>

<br>

<p align="justify">Web browsers receive HTML documents from a web server or from
local storage and render the documents into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for
its appearance.</p>

<p align="left">In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents.

In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.

Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year,
Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for
funding, but the project was not formally adopted by CERN. In his personal notes of 1990,

Berners-Lee listed "some of the many areas in which hypertext is used"; an encyclopedia
is the first entry.

The first publicly available description of HTML was a document called "</p>

<hr>

</body>

</html>

Output

Page | 10
Web Technology BCA-105P Nawal shingari

Practical No.3

Aim:

Write an html code to print the quadratic equation as follows:

“In mathematics, a quadratic equation is a polynomial equation of the second degree. The
general form is ax²+bx+c=0 where if a ≠ 0 the equation becomes a linear equation. Or,
H2O+O=h2O2.”

Solutions:<html >

<head>

<title>3d practical

</title>

</head>

<body bgcolor="grey">

<h2 align="left"> Mathematical Equations</h2>

<p align="left">

Page | 11
Web Technology BCA-105P Nawal shingari

In mathematics, a quadratic equation is: A polynomial equation of the second degree. The
general form is

</p>

<p><font size="18" color="green" font="Calibri">ax²+bx+c=0</font>

</p>

<p>where if a ≠ 0 the equation becomes a linear equation.

Or,

</p>

<p><font size="20" color="red"

font="georgian">H₂O+O=h₂O₂</font>

</p>

</body>

</html>

Page | 12
Web Technology BCA-105P Nawal shingari

Practical Number 4

Aim: Write a html code to print create a webpage describing IItm. Use blockquote to
display address for sub heading pre tag and use em tag whenever using numbers use
different background color and different color showing text

Solution:

<html >

<head>

<title>Document</title>

</head>

<body bgcolor="pink">

<p><font color="blue">This is a information about my college. That is Institute of Information

Technology and management.</font>

<blockquote cite="https://www.iitmjanakpuri.com/">

Page | 13
Web Technology BCA-105P Nawal shingari

<pre><font color="red" align="justify" size=4><em>1.</em>Established in 1999 under the

auspices of Mata Leelawati Shikshan Sansthan (MLSS),

a registered educational society dedicated to philanthropic endeavours.

The Institute (IITM) has established a strong foundation for academic excellence.

Guided by the visionary leadership of Shri T.N. Chaturvedi, a recipient of the prestigious Padma
Vibhushan,

India's second-highest civilian honour, IITM embarked on its journey with Shri.

Chaturvedi serving as both the founding President of the society and the institute.

Shri Chaturvedi’s illustrious career marked by his tenure as the Governor of Karnataka,
Parliamentarian,

and Comptroller and Auditor General (CAG) of India, underscored his profound impact in the
realms of education, politics, and

administration.</font></pre>

<pre><font size=4 color="green"><em>2.</em>Situated in tranquil and pollution-free

surroundings, conveniently accessible via the Delhi Metro Rail.

The institute takes pride in fostering a conducive academic environment,

endowed with a dedicated faculty and state-of-the-art infrastructure.</font></pre>

</blockquote>

</body>

</html>

Page | 14
Web Technology BCA-105P Nawal shingari

Practical Number 5

AIM: Develop an HTML document which displays your name as heading and displays the
name of any four of Your friends in a list. Each friend’s name should be a hyperlink. When you
click a friend’s name, it must open another HTML document which tells about your
friend.Solution:

<html>

<head>

<title>IITM</title></head>

Page | 15
Web Technology BCA-105P Nawal shingari

<body link="orange" vlink="green" alink="red">

<H1 align="center">Nawal Shingari</H1>

<HR> <ul> <h2><li>Vasu</h2><a href="f1.html">Click Here </a>

<h2><li>Bhumik</h2><a href="f2.html">Click Here</a>

<h2><li>Adyot</h2><a href="f3.html">Click Here</a>

<h2><li>negi</h2><a href="f4.html">Click Here</a> </ul> </body> </html>

PRACTICAL-6

AIM: Create a webpage that has named link to move on the top of page and to the bottom of
page.SOLUTION

<html>

<head>

<title> links </title>

Page | 16
Web Technology BCA-105P Nawal shingari

</head>

<body>

<h3> This is the top of the page <a name="top"></a></h3>

<h3><a href="#bottom">Go to bottom</a></h3>

dome dome dome dome dome dome dome dome dome dome dome dome dome

dome dome dome dome dome dome dome dome dome dome dome dome dome dome

dome dome dome dome dome dome dome dome dome dome dome dome dome dome

dome dome dome dome dome

dome dome dome dome dome

dome dome dome dome dome

dome dome dome dome dome

dome dome dome dome dome

dome dome dome dome dome

<h3>This is the bottom of the

page<a

name="bottom"></a></h3>

<h3><a href="#top">Go to

top</a></h3>

</body>

Page | 17
Web Technology BCA-105P Nawal shingari

</html>

PRACTICAL-7

AIM: Write an HTML code to 3 images that are aligned left, center and right. Also changes
the background colour as blue of the web page. Give a proper heading to the web page.

<html>

Page | 18
Web Technology BCA-105P Nawal shingari

<head>

<title>Image Alignment </title>

<style>

body {

background-color: blue;

color: white;

text-align: center;

left {

float: left;

margin: 10px;

center {

display: inline-block;

right {

float: right;

margin: 10px; }

</style>

</head>

<body>

Page | 19
Web Technology BCA-105P Nawal shingari

<h1>images</h1>

<img src="C:\Users\Admin\Desktop\nawaltourism5.jpeg" alt="Left Image" class="left"

width="200">

<img src="C:\Users\Admin\Desktop\imagesss\nawaltourism3.jpeg" class="center"

width="200">

<img src="C:\Users\Admin\Desktop\imagesss\nawaltourism1.jpeg" alt="Right Image"

class="right" width="200">

</body>

</html>

PRACTICAL-8

Page | 20
Web Technology BCA-105P Nawal shingari

AIM: Write an HTML code to display the name of courses taught in the institute under the
list headings Morning and Evening Courses respectively using different type of ordered
and unordered list.Solution:

<html>

<head>

<title> Courses </title>

</head>

<body>

<h1> Courses available in IITM </h1>

<h2> Morning shift </h2>

<ul>

<li> BCA </li>

<li> BBA </li>

<li> MBA </li>

<li> MCA </li>

</ul>

<h2> Evening shift </h2>

<ol>

<li> BCA </li>

<li> BBA </li>

<li> BA(JMC) </li>

Page | 21
Web Technology BCA-105P Nawal shingari

<li> B.com (hons.)</li>

</ol>

</body>

</html>

Page | 22
Web Technology BCA-105P Nawal shingari

PRACTICAL-9

AIM: Create an unordered list nested inside ordered list and apply the following : 1. Insert
an image of Main item on top right comer of web page. 2. Display heading as a marquee. 3.
Use different font styles and colors for different ordered list items.
Solution

<html>

<head>

<title> My page</title>

</head>

<style>

.top-right{

position:absolute;

top:0;

right:0;

</style>

</head>

<body>

<img

src="C:\Users\Admin\Desktop\imagesss\imagemaps.jpg"

class="top right" alt="computer" width="200" height="200">

Page | 23
Web Technology BCA-105P Nawal shingari

<h1><b><marquee behaviour="scroll" direction="right"> Types of memory in

computer:</marquee></b></h1>

<ol>

<li><h2>Primary Memory</h2></li>

<ul>

<li><h3>The CPU can directly access primary memory , which is faster than

accessing secondary memory.</h3></li>

</ul>

<li><h2>Secondary Memory</h2></li>

<ul>

<li><h3>Secondary memory is used to store data and programs for long period of

time</h3></li>

</ul>

</body>

</html>

Page | 24
Web Technology BCA-105P Nawal shingari

PRACTICAL-11

AIM: Create a Table to display the following table with items in the Décor using ordered
lists and Hyper links. On the click of the Décor items, suitable pages with their images and
information should be dis played.

<html>

<head>

<title>House Types</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

padding: 8px;

Page | 25
Web Technology BCA-105P Nawal shingari

</style>

</head>

<body>

<h2>House Types</h2>

<table>

<tr>

<th>HOUSE TYPES</th>

<th>DECOR</th>

<th>ROOMS</th>

<th>PRICE/SQ FT.</th>

</tr>

<tr>

<td>Villas</td>

<td>

<ol>

<li><a href="https://antonovichdesign.ae/uploads/gallery/2019/8/antonovich-design

2019hNmS2PUw4ZM6.jpg">Dining Room</a></li>

<li><a href="https://mir-s3-cdn

cf.behance.net/project_modules/max_1200/8c5c3996344655.5eac2068b6ea8.jpg">

Master Bed Room</a></li>

Page | 26
Web Technology BCA-105P Nawal shingari

<li><a href="https://i.ytimg.com/vi/4gwdixF9BQ/maxresdefault.jpg">Kid's Room</a></li>

<li><a href="https://www.ministryofvillas.com/wpcontent/uploads/2019/03/bali-villasantaiubud

31.jpg">Kitchen</a></li>

</ol>

</td>

<td>4BHK</td>

<td>Rs.5000</td>

</tr>

<tr>

<td>Mansions</td>

<td>

<ol>

<li><a href="https://st.hzcdn.com/simgs/pictures/dining-rooms/luxemansion-dining-room-
maraya-interior-design

img~d5c1a8930b871cc8_4-8009-1-4aa0b18.jpg">Dining Room</a></li>

<li><a

href="https://t3.ftcdn.net/jpg/06/70/67/00/360_F_670670052_xZ3DP7FewRtSH4SI

R85MNwygBdsamrC1.jpg">Master Bed

Room</a></li>

<li><a

href="https://i.pinimg.com/474x/65/57/82/655782c2200d0d79819588be1f8328c8.j

pg">Kid's Room</a></li>

<li><a

Page | 27
Web Technology BCA-105P Nawal shingari

href="https://i.pinimg.com/originals/1d/5d/cb/1d5dcb87c251a8633a5a3b6de2c77a3

b.png">Kitchen</a></li>

</ol>

</td>

<td>5BHK</td>

<td>Rs.7000</td>

</tr>

<tr>

<td>Flats</td>

<td>

<ol>

<li><a href="https://www.home-designing.com/wp-content/uploads/2014/06/1-

Bedroom-Apartment-with

Patio.jpg">Single Bedroom</a></li>

<li><a href="https://www.home-designing.com/wp-content/uploads/2014/06/TwoBedroom-
Apartment-with-Unique

Balcony.jpg">Double Bedroom</a></li>

</ol>

</td>

<td>1BHK, 2BHK</td>

<td>Rs.500, Rs.700</td>

</tr>

</table>

Page | 28
Web Technology BCA-105P Nawal shingari

</body>

</html>

PRACTICAL-12

AIM:

Create a frame as per the following layout:

i. The contents of upper left frame should open in middle right frame

ii. The content of lower left frame should open in lower-left frame.

iii. Top right should contain iitmjanakpuri webpage

iv. Bottom-right should contain an audio/video

Solution

<html>

<head>

<title>Framess </title>

Page | 29
Web Technology BCA-105P Nawal shingari

</head>

<frameset rows="20%, 40%, 40%" border="1">

<!-- Top row with two frames (left for contents, right for the iitmjanakpuri website) -->

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

<frame src="contents.html" name="left_frame">

<frame src="https://www.iitmjanakpuri.com" name="right_top_frame">

</frameset>

<!-- Middle row with the content from the upper-left frame (Birds) -->

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

<frame src="" name="left_placeholder" noresize>

<frame src="birds.html" name="middle_right_frame">

</frameset>

<!-- Bottom row with the content from lower-left (Animals) and audio/video -->

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

<frame src="animals.html" name="lower_left_frame">

<frame src="audio.html" name="bottom_right_frame">

</frameset>

</frameset>

Page | 30
Web Technology BCA-105P Nawal shingari

</html>

PRACTICAL-13

AIM: Make an image map of a Plant showing the usage of shape, coords, href attributes in
map definition. Create 2 hotspots and Link each hotspot to small and bigger images with
details. All the web pages should be designed with proper background color, images, font
styles and headings.

SOLUTION:

< html>

<head>

<title>Plant Image Map</title>

Page | 31
Web Technology BCA-105P Nawal shingari

<style>

body {

background-color: pink;

font-family: Arial, sans-serif;

color: #333;

h1 {

text-align: center;

color: red;

img {

display: block;

margin: 0 auto;

p{

text-align: center;

font-size: 18px;

</style>

</head>

<body>

<h1>Explore the Plant</h1>

Page | 32
Web Technology BCA-105P Nawal shingari

<p>Click on different parts of the plant to learn more!</p>

<!-- Plant image with map -->

<img src="C:\Users\Admin\Downloads\plant.jpeg" usemap="#plantmap" alt="Plant Image"

width="600" height="400">

<!-- Image Map Definition -->

<map name="plantmap">

<!-- First hotspot linking to small image -->

<area shape="rect" coords="50,100,150,200" href="small-details.html" alt="Small Details">

<!-- Second hotspot linking to big image -->

<area shape="circle" coords="300,200,50" href="big-details.html" alt="Big Details">

</map>

</body>

</html>

Page | 33
Web Technology BCA-105P Nawal shingari

Page | 34
Web Technology BCA-105P Nawal shingari

PRACTICAL-14

AIM: Create registration form with at least 3 section personal details, educational details
and hobbies. Use all form controls and 2 buttons-Submit and Cancel. Use Post method in
form.

Solution.

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<h2>Registration Form</h2>

<form action="submit_form.php" method="POST">

<input type="text" id="name" name="fullname" required><br>

<input type="date" id="dob" name="dob" required><br>

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

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

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<select id="qualification" name="qualification">

<option value="highschool">High School</option>

<option value="intermediate">Intermediate</option>

<option value="bachelors">Bachelors</option>

Page | 35
Web Technology BCA-105P Nawal shingari

<option value="masters">Masters</option>

</select><br><br>

<input type="text" id="institute" name="institute" required><br><br>

<input type="number" id="year" name="graduation_year" min="1900"

max="2024" required><br><br>

<legend>Hobbies</legend>

<label for="hobbies">Select Your Hobbies:</label><br>

<input type="checkbox" id="reading" name="hobbies" value="reading">

<label for="reading">Reading</label><br>

<input type="checkbox" id="traveling" name="hobbies" value="traveling">

<label for="traveling">Traveling</label><br>

<input type="checkbox" id="sports" name="hobbies" value="sports">

<label for="sports">Sports</label><br>

<input type="checkbox" id="music" name="hobbies" value="music">

<label

for="music">Music</label><br>

<!-- Submit and Cancel Buttons --

>

<br>

<button

type="submit">Submit</button>

<button

Page | 36
Web Technology BCA-105P Nawal shingari

type="reset">Cancel</button>

</form>

</body>

</html>

Page | 37
Web Technology BCA-105P Nawal shingari

PRACTICAL-15

AIM: Write an internal CSS rule that make all text size as 18pt and colour as red,
background colour blue. Give the heading style font size as 24pt, font family as sans-serif;
colour black and text align as Centre.

SOLUTION:

<html>

<head><title> internal css</title>

<style>

.h{

font-size:24pt;

font-family: sans-serif;

color: black;

text-align:center;}

p{

font-size:18pt;

color:BLACK;

background-color:PINK;}

</style>

</head>

<body>

<h1 class="h">heading of internal css</h1>

Page | 38
Web Technology BCA-105P Nawal shingari

<p> text styling involves properties such as font size,background-color,textalignment to the css
</p>

<p>styles are appeared to web page which is very unique in the css </p>

</body>

</html>

Page | 39
Web Technology BCA-105P Nawal shingari

PRACTICAL-16

AIM: Create an external CSS for anchor, headings, ul, sublisting in UL, LI-em, hover, and
class as selectors

SOLUTION: /* Link Styling */

a{

color: blue;

text-decoration: none;

a:hover {

color: darkblue;

text-decoration: underline;

/* Headings Styling */

h1, h2, h3, h4, h5, h6 {

font-family: 'Arial', sans-serif;

color: yellow;

margin-bottom: 15px;

Page | 40
Web Technology BCA-105P Nawal shingari

/* Unordered List Styling */

ul {

list-style-type: disc;

padding-left: 20px;

margin-bottom: 15px;

/* Nested Unordered List Styling */

ul ul {

list-style-type: circle;

margin-left: 20px;

/* Class-based Paragraph Styling */

.special {

font-size: 18px;

color: green;

font-style: italic;

Page | 41
Web Technology BCA-105P Nawal shingari

PRACTICAL-17

AIM: Create a web page to show the usage of alert box and confirm box

SOLUTION:

<html>

<head></head>

<body>

<script language=”javascript”type=”text/javascript”>

Function warning()

Alert(“warning you have not filled anything”);

</script>

<p>click the button to check alert box</p>

<form>

<input type=”button” value=”click me” onclick=”warning();”>

</form>

Page | 42
Web Technology BCA-105P Nawal shingari

</body>

</html>

<html>

<head></head>

<body>

<script type=”text/javascript”>

Function confirmation(){

Var val=confirm(“do you want to continue?”);

If(val==true){

Document.write(“continued!”);

Return true;

}else{

Document.write(“not continued!”);

Return false;

</script>

<p>click the button to check confirm box</p>

<form>

<input type=”button”value=”click me”on click=”confirmation();”>

</form>

</body>

Page | 43
Web Technology BCA-105P Nawal shingari

</html>

Page | 44
Web Technology BCA-105P Nawal shingari

PRACTICAL-18

AIM: Write a JavaScript to accept your name and display it.

SOLUTION:

<html>

<head>

<body>

<div class="container">

<h1>Enter Your Name</h1>

<button onclick="displayUserName()">Enter Name</button>

<p id="displayName"></p>

</div>

<script>

function displayUserName() {

let userName = prompt("Please enter your name:");

if (userName) {

document.getElementById("displayName").innerText = "Hello, " +

userName + "!";

} else {

document.getElementById("displayName").innerText = "You didn't enter

a name.";

Page | 45
Web Technology BCA-105P Nawal shingari

</script>

</body>

</html>

Page | 46
Web Technology BCA-105P Nawal shingari

PRACTICAL-19

AIM: Write a Program in JavaScript to calculate the reverse of a number entered by the
user

SOLUTION:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Reverse a Number</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f9;

margin: 0;

padding: 20px;

.container {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

Page | 47
Web Technology BCA-105P Nawal shingari

max-width: 400px;

margin: auto;

text-align: center;

h1 {

color: #333;

button {

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

background-color: #007BFF;

color: white;

border: none;

border-radius: 5px;

transition: background-color 0.3s;

button:hover {

background-color: #0056b3;

.result {

font-size: 20px;

Page | 48
Web Technology BCA-105P Nawal shingari

color: #007BFF;

font-weight: bold;

margin-top: 20px;

</style>

</head>

<body>

<div class="container">

<h1>Reverse a Number</h1>

<p>Enter a number to reverse:</p>

<input type="number" id="userNumber" placeholder="Enter number" />

<button onclick="reverseNumber()">Reverse Number</button>

<p class="result" id="result"></p>

</div>

<script type="text/javascript">

function reverseNumber() {

let num = document.getElementById('userNumber').va

if (num === "" || isNaN(num)) {

document.getElementById('result').innerText = "Please enter a valid number.";

return;

let reversedNum = num.toString().split('').reverse().join('');

document.getElementById('result').innerText = "Reversed Number: " + reversedNum;

Page | 49
Web Technology BCA-105P Nawal shingari

</script>

</body>

</html>

Page | 50
Web Technology BCA-105P Nawal shingari

PRACTICAL-20

AIM: Write a Program in JavaScript to find the factorial of a number a) All numbers
between 1 to 10 b) Any number given by user c) All numbers between the starting and
ending number given by the user

SOLUTION:

<html>

<head>

<script type="text/javascript">

function factorial(num)

var i, num;

var f=1;

for(i=num;i>=1;i--)

f=f*i;

return(f);

</script></head>

Page | 51
Web Technology BCA-105P Nawal shingari

<body>

<script type="text/javascript">

document.writeln("Factorial form 1 to 10:");

document.writeln("<br>The factorial of 1 is: " +factorial(1));

document.writeln("<br>The factorial of 2 is: " +factorial(2));

document.writeln("<br>The factorial of 3 is: " +factorial(3));

document.writeln("<br>The factorial of 4 is: " +factorial(4));

document.writeln("<br>The factorial of 5 is: " +factorial(5));

document.writeln("<br>The factorial of 6 is: " +factorial(6));

document.writeln("<br>The factorial of 7 is: " +factorial(7));

document.writeln("<br>The factorial of 8 is: " +factorial(8));

document.writeln("<br>The factorial of 9is: " +factorial(9));

document.writeln("<br>The factorial of 10 is: " +factorial(10));

</script>

</body>

</html>

<html>

<head>

<script type="text/javascript">

function factorial(num) {

var i, num;

var f=1;

Page | 52
Web Technology BCA-105P Nawal shingari

for(i=num;i>=1;i--

f=f*i; }

document.write(f); }

</script>

</head>

<body>

<script type="text/javascript">

num=prompt("Enter any Number:");

factorial(num);

</script>

</body>

</html>

<html>

<head>

<title>factorial of a range</title>

<script>

fact=1;

fact=Number(fact);

var strt=prompt("Enter the First number");

var end=prompt("Enter the Second number");

Page | 53
Web Technology BCA-105P Nawal shingari

strt=Number(strt);

for(i=strt;i<=end;i++)

{ j=i;

end=Number(end);

while(j!=1) {

fact=fact*j;

j--; }

document.write("<h3>The Factorial of "+i+" is "+fact+" </h3> ");

fact=1; }

</script>

</head>

</html>

Page | 54
Web Technology BCA-105P Nawal shingari

PRACTICAL-21

AIM: Create a menu driven program using switch case. Functions to be performed-
Addition, Subtraction, Multiplication, Division

SOLUTION:

<html>

<head>

<title>Calculator Menu</title>

Page | 55
Web Technology BCA-105P Nawal shingari

</head>

<body>

<div>

<h1>Calculator Menu</h1>

<p>Select an operation:</p>

<button onclick="calculate(1)">Addition</button>

<button onclick="calculate(2)">Subtraction</button>

<button onclick="calculate(3)">Multiplication</button>

<button onclick="calculate(4)">Division</button>

<div id="result" class="result"></div>

</div>

<script>

function calculate(choice) {

let num1 = parseFloat(prompt("Enter the first number:"));

let num2 = parseFloat(prompt("Enter the second number:"));

if (isNaN(num1) || isNaN(num2)) {

document.getElementById("result").innerText = "Please enter valid numbers.";

return;

let result;

switch (choice) {

Page | 56
Web Technology BCA-105P Nawal shingari

case 1: // Addition

result = num1 + num2;

document.getElementById("result").innerText = `Addition: ${num1} + ${num2} =

${result}`;

break;

case 2: // Subtraction

result = num1 - num2;

document.getElementById("result").innerText = `Subtraction: ${num1} - ${num2}

= ${result}`;

break;

case 3: // Multiplication

result = num1 * num2;

document.getElementById("result").innerText = `Multiplication: ${num1} *

${num2} = ${result}`;

break;

case 4: // Division

if (num2 === 0) {

document.getElementById("result").innerText = "Error: Division by zero is

undefined.";

} else {

result = num1 / num2;

document.getElementById("result").innerText = `Division: ${num1} / ${num2}

Page | 57
Web Technology BCA-105P Nawal shingari

= ${result}`;

break;

default:

document.getElementById("result").innerText = "Invalid choice!";

</script>

</body>

</html>

Page | 58
Web Technology BCA-105P Nawal shingari

PRACTICAL-22

AIM: Create an array to accept the numbers from user. The size of the array will be given by the
user. Print all the items

SOLUTION:

<html>

<head>

<title>Array Input and Display</title>

</head>

<body>

<div>

<h1>Array Input and Display</h1>

<button onclick="createAndDisplayArray()">Enter Array</button>

Page | 59
Web Technology BCA-105P Nawal shingari

<div id="result" class="result"></div>

</div>

<script>

function createAndDisplayArray() {

// Ask user for the size of the array

let size = parseInt(prompt("Enter the size of the array:"));

if (isNaN(size) || size <= 0) {

document.getElementById("result").innerText = "Please enter a valid positive integer

for array size.";

return;

let numbers = [];

for (let i = 0; i < size; i++) {

let num = parseFloat(prompt(`Enter number ${i + 1}:`));

if (isNaN(num)) {

alert("Please enter a valid number.");

i--; // Decrement to retry for the same position

} else {

numbers.push(num);

// Display the array elements

Page | 60
Web Technology BCA-105P Nawal shingari

document.getElementById("result").innerText = "Array elements: " + numbers.join(",

");

</script>

</body>

PRACTICAL-23

AIM: Create an array [23,45,6,13,9,12,67,12,1, 63] and perform the following operations i.
Remove the last item and print the new length of array ii. Add 3 items in array and print
the updated array and length iii. Sort the array and print iv. Print the index and last index
of 12 v. Create another array of 3 items , concatenate the two arrays and print vi. Join all
the items of the new concatenated array and print using newline as separator

SOLUTION

<html>

<head>

<title>Array Operations</title>

</head>

Page | 61
Web Technology BCA-105P Nawal shingari

<body>

<div>

<h1>Array Operations</h1>

<button onclick="performArrayOperations()">Perform Operations</button>

<div id="result" class="result"></div>

</div>

<script>

function performArrayOperations() {

let arr = [23, 45, 6, 13, 9, 12, 67, 12, 1, 63];

let output = "";

arr.pop();

arr.push(77, 88, 99);

output += `Array after adding 3 items: [${arr}]<br>`;

output += `Updated length of the array: ${arr.length}<br><br>`;

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

output += `Sorted array: [${arr}]<br><br>`;

let firstIndex = arr.indexOf(12);

let lastIndex = arr.lastIndexOf(12);

output += `First index of 12: ${firstIndex}<br>`;

Page | 62
Web Technology BCA-105P Nawal shingari

output += `Last index of 12: ${lastIndex}<br><br>`;

let newArray = [101, 102, 103];

let concatenatedArray = arr.concat(newArray);

output += `Concatenated array: [${concatenatedArray}]<br><br>`;

output += `Joined items with newline separator:<br>`;

output += concatenatedArray.join("<br>");

document.getElementById("result").innerHTML = output;

</script>

</body>

Page | 63
Web Technology BCA-105P Nawal shingari

</html>

Page | 64
Web Technology BCA-105P Nawal shingari

PRACTICAL-24

AIM: Write a JavaScript code using arrays to: a) accept 10 numbers from user and display
them b) Print the count of how many are +ive, -ive and zero Display the list of numbers
ssssswhich are positive and, negative

<html>

<head>

</head>

<body>

<div>

<h1>Number Analysis</h1>

<button onclick="analyzeNumbers()">Enter 10 Numbers</button>

<div id="result" class="result"></div>

</div>

<script>

function analyzeNumbers() {

let numbers = [];

let positiveNumbers = [];

let negativeNumbers = [];

let zeroCount = 0;

let positiveCount = 0;

let negativeCount = 0;

Page | 65
Web Technology BCA-105P Nawal shingari

for (let i = 0; i < 10; i++) {

let num = parseFloat(prompt(`Enter number ${i + 1}:`));

if (isNaN(num)) {

alert("Please enter a valid number.");

i--;

} else {

numbers.push(num);

if (num > 0) {

positiveNumbers.push(num);

positiveCount++;

} else if (num < 0) {

negativeNumbers.push(num);

negativeCount++;

} else {

zeroCount++;

Page | 66
Web Technology BCA-105P Nawal shingari

let output = `Entered numbers: [${numbers.join(", ")}]<br><br>`;

output += `Count of positive numbers: ${positiveCount}<br>`;

output += `Count of negative numbers: ${negativeCount}<br>`;

output += `Count of zeros: ${zeroCount}<br><br>`;

output += `Positive numbers: [${positiveNumbers.join(", ")}]<br>`;

output += `Negative numbers: [${negativeNumbers.join(", ")}]<br>`;

document.getElementById("result").innerHTML = output;

</script>

</body>

</html>

Page | 67
Web Technology BCA-105P Nawal shingari

PRACTICAL-25

AIM: Write a script that displays the various Math functions and properties

SOLUTION:

<html>

<head>

<title>JavaScript Math Functions and Properties</title>

</head>

<body>

<h1>JavaScript Math Functions and Properties</h1>

<div class="buttons">

<button onclick="showPI()">PI</button>

Page | 68
Web Technology BCA-105P Nawal shingari

<button onclick="showE()">E</button>

<button onclick="showSquareRoot()">Square Root of 16</button>

<button onclick="showPower()">2 to the Power of 8</button>

<button onclick="showRound()">Round (4.7)</button>

<button onclick="showCeil()">Ceil (4.1)</button>

<button onclick="showFloor()">Floor (4.9)</button>

<button onclick="showRandom()">Random Number (0-1)</button>

<button onclick="showAbs()">Absolute (-7)</button>

<button onclick="showMax()">Max (3, 7, 1, 9)</button>

<button onclick="showMin()">Min (3, 7, 1, 9)</button>

<button onclick="showLog()">Natural Log (1)</button>

</div>

<div id="result" class="result"></div>

<script>

function showPI() {

document.getElementById("result").innerText = `Math.PI: ${Math.PI}`;

function showE() {

document.getElementById("result").innerText = `Math.E: ${Math.E}`;

function showSquareRoot() {

Page | 69
Web Technology BCA-105P Nawal shingari

document.getElementById("result").innerText = `Math.sqrt(16):

${Math.sqrt(16)}`;

function showPower() {

document.getElementById("result").innerText = `Math.pow(2, 8):

${Math.pow(2, 8)}`;

function showRound() {

document.getElementById("result").innerText = `Math.round(4.7):

${Math.round(4.7)}`;

function showCeil() {

document.getElementById("result").innerText = `Math.ceil(4.1):

${Math.ceil(4.1)}`;

function showFloor() {

document.getElementById("result").innerText = `Math.floor(4.9):

${Math.floor(4.9)}`;

function showRandom() {

document.getElementById("result").innerText = `Math.random():

${Math.random()}`;

Page | 70
Web Technology BCA-105P Nawal shingari

function showAbs() {

document.getElementById("result").innerText = `Math.abs(-7): ${Math.abs(-

7)}`;

function showMax() {

document.getElementById("result").innerText = `Math.max(3, 7, 1, 9):

${Math.max(3, 7, 1, 9)}`;

function showMin() {

document.getElementById("result").innerText = `Math.min(3, 7, 1, 9):

${Math.min(3, 7, 1, 9)}`;

function showLog() {

document.getElementById("result").innerText = `Math.log(1):

${Math.log(1)}`;

</script>

</body>

</html>

Page | 71
Web Technology BCA-105P Nawal shingari

PRACTICAL-26

AIM: Write a script that reads a date from an HTML form and creates a Date object in
which to store that date. Then, use the various method of Date object to display the date in
several formats.

SOLUTION:

!DOCTYPE html>

<html lang="en">

<head>

<title>Date Format Display</title>

Page | 72
Web Technology BCA-105P Nawal shingari

<style>

body { font-family: Arial, sans-serif; }

.output { margin-top: 10px; }

</style>

</head>

<body>

<h2>Enter a Date</h2>

<!-- Form to input a date -->

<form id="dateForm">

<label for="inputDate">Select a date:</label>

<input type="date" id="inputDate" required>

<button type="button" onclick="displayDateFormats()">Show Date Formats</button>

</form>

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

<script>

function displayDateFormats() {

const inputDate = document.getElementById("inputDate").value;

if (!inputDate) {

document.getElementById("output").innerHTML = "Please select a date.";

Page | 73
Web Technology BCA-105P Nawal shingari

return;

const dateObj = new Date(inputDate);

if (isNaN(dateObj.getTime())) {

document.getElementById("output").innerHTML = "Invalid date format.";

return;

const fullDate = dateObj.toDateString();

const isoString = dateObj.toISOString();

const localeString = dateObj.toLocaleString();

const timeString = dateObj.toLocaleTimeString();

const localeDateString = dateObj.toLocaleDateString();

document.getElementById("output").innerHTML = `

<p><strong>Original Date:</strong> ${inputDate}</p>

<p><strong>Full Date:</strong> ${fullDate}</p>

<p><strong>ISO String:</strong> ${isoString}</p>

<p><strong>Locale String:</strong> ${localeString}</p>

<p><strong>Locale Date:</strong> ${localeDateString}</p>

<p><strong>Time Only:</strong> ${timeString}</p>

`;

Page | 74
Web Technology BCA-105P Nawal shingari

</script>

</body>

</html>

PRACTICAL-27

AIM: Write a script that displays the various String Functions based on the below
conditions i. Store a string “Apples are round, and apples are juicy” ii. Display the index of
apples iii. Use substr(1,2) and substring(1) to create a new substring iv. Display the
character at location 5 v. Replace the substring creates in (iii) with “Web Technologies
Lab”

SOLUTION:

<!DOCTYPE html>

Page | 75
Web Technology BCA-105P Nawal shingari

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>String Functions Demonstration</title>

</head>

<body>

<h1>String Functions Demonstration</h1>

<div id="result" class="result"></div>

<script>

const originalString = "Apples are round, and apples are juicy";

const indexOfApples = originalString.indexOf("apples");

const substringUsingSubstr = originalString.substr(1, 2);

const substringUsingSubstring = originalString.substring(1);

const charAtLocation5 = originalString.charAt(5);

const replacedString = originalString.replace(substringUsingSubstr, "Web Technologies

Lab");

const output = `Original String: "${originalString}"\n\n` +

`Index of "apples": ${indexOfApples}\n` +

`Substring using substr(1,2): "${substringUsingSubstr}"\n` +

Page | 76
Web Technology BCA-105P Nawal shingari

`Substring using substring(1): "${substringUsingSubstring}"\n` +

`Character at location 5: "${charAtLocation5}"\n` +

`String after replacement: "${replacedString}"`;

document.getElementById("result").innerText = output;

</script>

</body>

</html>

PRACTICAL-28

Make a registration form with atleast following fields- First Name, Last Name,
Qualification, course, marks percentage, Date of birth, email id, mobile number, Submit &
reset buttons. Implement atleast the below mentioned validations: i. Name should be in
capitals ii. Form should not be blank iii. Phone should only be numeric, accepts only 10
digits iv. Age to be calculated from date of birth, and readonly v. Percentage should only
have whole number, if decimal, convert it. vi. Upon submission of form, display name &
location in alert box vii. Upon reset, all controls should be set to default value(or blank) viii.
Required fields- first name, D.O.B, percentage

Page | 77
Web Technology BCA-105P Nawal shingari

SOLUTION

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Registration Form</title>

<style>

body { font-family: Arial, sans-serif; max-width: 600px; margin: auto; }

form { padding: 20px; border: 1px solid #ccc; }

input, select, button { display: block; margin: 10px 0; padding: 8px; width: 100%; }

.error { color: red; }

</style>

</head>

<body>

<h2>Registration Form</h2>

<form id="registrationForm">

<label for="firstName">First Name (in capitals):</label>

<input type="text" id="firstName" required>

<label for="lastName">Last Name:</label>

<input type="text" id="lastName">

Page | 78
Web Technology BCA-105P Nawal shingari

<label for="qualification">Qualification:</label>

<input type="text" id="qualification">

<label for="course">Course:</label>

<input type="text" id="course">

<label for="percentage">Marks Percentage:</label>

<input type="number" id="percentage" required>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" required onchange="calculateAge()">

<label for="age">Age:</label>

<input type="text" id="age" readonly>

<label for="email">Email ID:</label>

<input type="email" id="email">

<label for="phone">Mobile Number:</label>

<input type="text" id="phone" maxlength="10">

Page | 79
Web Technology BCA-105P Nawal shingari

<button type="button" onclick="submitForm()">Submit</button>

<button type="button" onclick="resetForm()">Reset</button>

<p id="error" class="error"></p>

</form>

<script>

function calculateAge() {

const dob = document.getElementById("dob").value;

if (dob) {

const birthDate = new Date(dob);

const today = new Date();

let age = today.getFullYear() - birthDate.getFullYear();

const m = today.getMonth() - birthDate.getMonth();

if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {

age--;

document.getElementById("age").value = age;

function submitForm() {

Page | 80
Web Technology BCA-105P Nawal shingari

const firstName = document.getElementById("firstName").value.trim();

const percentage = document.getElementById("percentage").value;

const phone = document.getElementById("phone").value;

if (!firstName || !percentage || !document.getElementById("dob").value) {

document.getElementById("error").innerText = "First Name, D.O.B, and Percentage

are required.";

return;

if (firstName !== firstName.toUpperCase()) {

document.getElementById("error").innerText = "First Name should be in capital

letters.";

return;

if (isNaN(phone) || phone.length !== 10) {

document.getElementById("error").innerText = "Phone number should be numeric and

10 digits.";

return;

if (percentage % 1 !== 0) {

document.getElementById("percentage").value = Math.floor(percentage);

alert(`Name: ${firstName}\nLocation: Enter your location here`);

Page | 81
Web Technology BCA-105P Nawal shingari

document.getElementById("error").innerText = "";

function resetForm() {

document.getElementById("registrationForm").reset();

document.getElementById("age").value = "";

document.getElementById("error").innerText = "";

</script>

</body>

</html>

Page | 82