Final Lab Report

Web Technology CO-427

Submitted to
Ms. Shristi Achari
Department of Computer Science & Engineering

Submitted By
Sankalp Gautam
2K20/EE/243
Department of Electrical Engineering

Delhi Technological University, Rohini

Delhi-110042
(Govt. of NCT of Delhi)
 TABLE OF CONTENTS
S.no Laboratory Exercises Page no. Teacher’s
Signature
1. Create a webpage with HTML describing your department. Use paragraph and list tags.
Apply various colors to suitably distinguish key words. Also apply font styling like italics,
underline to sentence you find appropriate. Also use header tags. Insert an image and 3-8
create a link such that clicking on image takes user to other page. Change the background
color of the page. At the bottom create a link to take user to the top of the page.
2. Design page that has 5 equal columns the table should look the same in all screen
9-12
resolution.
3. Write a HTML code for making table to containing different option for different questions:

13-16

4. Write a HTML code to generate following output. Put validation checks on values
entered by the user using JavaScript like email check and password and confirm
password. Also change background colour after 5 seconds of page load.

17-21

5. Create an html page containing the polynomial expression as follows

22-23
a0 + a1x+ a2x 2 + a3 x3
6. Write a HTML code to generate following output: Use of FrameSet.

24-26

7. Write a JavaScript program to display a hidden div (e.g., showing stats of a player when user
27-30
clicks on his name).
8. Write a JavaScript program to sort the items of an array. 31-32
9. Write a JavaScript program which accept a string as input and swap the case of each
character. For example, if you input 'The Quick Brown Fox' the output should be 'tHE qUICK 33-35
bROWN fOX'.
10. Write a JavaScript function to hide email addresses to protect from unauthorized user. 36
11. Write a JavaScript function to insert a string within a string at a particular position. 37-38
12. Write a JavaScript function to check whether a given value is hexadecimal value or not. 39-40
13. Write a JavaScript function to convert a decimal number to binary, hexadecimal or octal
41-42
number.
14. Write a merge sort program in JavaScript. 43-46
15. Write a JavaScript program to count number of words in string.
Note: -Remove white-space from start and end position. -Convert 2 or more spaces to 1. - 47-48
Exclude newline with a start spacing.
 Experiment – 1
AIM
Create a webpage with HTML describing your department. Use paragraph and list tags. Apply various colors to
suitably dis琀椀nguish key words. Also apply font styling like italics, underline to sentence you 昀椀nd appropriate. Also use
header tags. Insert an image and create a link such that clicking on image takes user to other page. Change the
background color of the page. At the bo琀琀om create a link to take user to the top of the page.

THEORY
HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for crea琀椀ng web pages and web
applica琀椀ons. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: Hyper Text simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click
on a link which brings you to a new webpage, you have clicked on a hypertext. Hyper Text is a way to link two or more
web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and forma琀�ng conven琀椀ons
to a text document. Markup language makes text more interac琀椀ve and dynamic. It can turn text into images, tables,
links, etc.

Paragraph Tag
The HTML <p> element de昀椀nes a paragraph. A paragraph always starts on a new line, and browsers automa琀椀cally
add some white space (a margin) before and a昀琀er a paragraph.

List Tag
HTML Lists are used to specify lists of informa琀椀on. All lists may contain one or more list elements. There are three
di昀昀erent types of HTML lists:
1. Ordered List or Numbered List (OL)
2. Unordered List or Bulleted List (UL)
3. Descrip琀椀on List or De昀椀ni琀椀on List (DL)

Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The
ordered list starts with <ol> tag and the list items start with <li> tag.

Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered
list starts with <ul> tag and list items start with the <li> tag.

Descrip琀椀on List or De昀椀ni琀椀on List

HTML Descrip琀椀on list is also a list style which is supported by HTML and XHTML. It is also known as de昀椀ni琀椀on list where
entries are listed like a dic琀椀onary or encyclopaedia. The HTML de昀椀ni琀椀on list contains following three tags:
1. <dl> tag de昀椀nes the start of the list.
2. <dt> tag de昀椀nes a term.
3. <dd> tag de昀椀nes the term de昀椀ni琀椀on (descrip琀椀on).
CSS Color Property
The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the
background color or the font color of an element.

HTML Style
HTML Style is used to change or add the style on exis琀椀ng HTML elements. There is a default style for every HTML
element e.g., background color is white, text color is black etc.

The style a琀琀ribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic knowledge
of css proper琀椀es e.g. color, background-color, text-align, font-family, font-size etc.

IMG TAG
The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image.

The <img> tag has two required a琀琀ributes:

1. src - Specifies the path to the image

2. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
A TAG
The <a> tag de昀椀nes a hyperlink, which is used to link from one page to another. The most important a琀琀ribute of
the <a> element is the href a琀琀ribute, which indicates the link's des琀椀na琀椀on.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red

CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="script.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GR
AD@48,400,0,0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="image/dtu.png" type="image/x-icon" />
<title>Delhi technological University</title>
</head>
<body>
<div class="header" id="head">
<a href="https://dtu.ac.in/"
><img
src="C:\Users\dell\OneDrive\Desktop\Web\dtu.jpeg"
class="logo"
alt="Delhi Technological University"
/></a>
<div class="details">
<h1 class="header-title">Delhi Technological University</h1>
<h4 class="dept-header">- Computer Science and Engineering</h4>
</div>
</div>
<div class="section">
<ul>
<li>
The
<b style="color: cadetblue"
>Department of Computer Science & Engineering</b
>
is an excellent centre of learning providing in-depth technical
knowledge and opportunities for innovation and research with
up-to-date computing facilities.
</li>
<li>
The Department’s mission is to
<i
>advance, evolve, and enhance computer science fundamentals to build
researchers and students’</i
>
intellectual capital. The Department has a lively and vibrant student
body and many distinguished faculties with PhD/PhD pursuing. The
Department also offers several attractive national/international
exposures to students in terms of Industrial Internship, Minor Project
and Major Project for UG Programs.
</li>
<li>
The Department is cherished and nurtured by
<b style="color: cadetblue"
>various student clubs and committees along with research groups</b
>. These clubs offer students the chance to gain experience in their
interest areas and network with their peers. Each research group holds
regular meetings and hold seminars to discuss current research topics
and results. These research groups are specialized in various domains
like Machine Learning, Databases, Artificial Intelligence, Design and
Analysis of Algorithms, Compiler Design, Web Engineering,
Cryptography, Network Security and Computer Networks. The Department’s
faculty members have published more than 30 research papers in reputed
international and national journals and presented 50 research papers
in various International and National Conferences.
</li>
<li>
The Computer Science & Engineering Department is equipped with
<b style="color: cadetblue">various labs</b> like Software Testing &
 Quality Assurance Lab, Data Structures Lab, Computer Graphics Lab,
Database Management System Lab, Operating System Lab, Software
Engineering Lab, Programming Lab, Design & Algorithm Lab, Data
Communication & Networking Lab, Project Lab, and Computer Organization
& Architecture Lab.
</li>
</ul>
</div>
<div class="section">
<h2>About DTU</h2>
<ul>
<li>Delhi Technological University (Delhi College of Engineering) operated
from the Kashmiri Gate campus in the heart of Old Delhi until 1989, when construction
began at the New Campus at Bawana Road in May. Moving of operations from Kashmiri Gate to
the new 164 acres at Bawana Road began in 1995, and the new campus formally started
classes for all four years of study starting 1999.</li>
<li>
The new DTU campus is well connected by road. Facilities include a
library, a computer centre, a sports complex, eight boys' hostels, six girls' hostels, and
a married couples' hostel. The campus has residential facilities for faculty and staff.
The campus has an auditorium and two open-air theatres out of which one is called the OAT
(Open-air Theatre) and the other is called the Mini OAT (Mini open-air theatre).
</li>
<li>
In 2010, the DTU came up with a plan to make the campus environment
friendly which included, barring entry of vehicles in the campus, generation of one-third
of the energy from alternative sources and on designing new buildings as per "green
architecture concept".
</li>
<li>
DTU has opened up a campus in Vivek Vihar, East Delhi named "University School of
Management and Entrepreneurship (USME)" in 2017. The new campus offers management courses
for graduation and post graduation. Currently, the USME, east campus of DTU offers courses
in MBA, MBA business analytics, BBA, and BA in Economics. USME offers 60 seats for MBA
students and 30 seats for MBA business analytics program. Admission to MBA is decided by
CAT score and further by rigorous group discussion and personal interviews. Moreover,
there are 120 seats for BBA and BA (hons) Economics each. The admission to the courses is
merit-based.
</li>
</ul>
</div>
<a href="#head" class="btt-btn"><span class="material-symbols-outlined">
vertical_align_top
</span> Back to Top</a>
</body>
</html>
CSS
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body{
background-color: azure;
}
.logo{
width: 100px;
cursor: pointer;
}
.header{
display: flex;
background-color: #16213E;
color:aliceblue;
padding : 25px;
font-weight: 700;
}
.details{
padding:20px;
}
.section{
padding:40px;
font-size: 20px;
font-weight: 300;
}
.dept-header{
color: #e8e8e8;
}
.header-title{
display: inline-block;
text-decoration: underline;
}
.section{
margin: 20px;
}
.section li{
margin-bottom: 20px;
}
.btt-btn{
background-color: #A1C298;
width: 150px;
height:40px;
display: flex;
margin:15px;
text-decoration: none;
align-items:center;
justify-content:center;
border-radius: 5px;
color:white;}
Output

CONCLUSION:
Through this experiment, some links and image related tags were explored in HTML, along with that some basic CSS
proper琀椀es were also explored and a webpage was created using the same.
 EXPERIMENT- 2
AIM:
Design page that has 5 equal columns the table should look the same in all screen resolu琀椀on.

THEORY:
Flexbox-CSS 1-D Layout
The Flexible Box Module, usually referred to as 昀氀exbox, was designed as a one-dimensional layout model, and as a
method that could o昀昀er space distribu琀椀on between items in an interface and powerful alignment capabili琀椀es.

Main and cross axis:

The main axis is de昀椀ned by 昀氀ex-direc琀椀on, which has four possible values:

1. row
2. row-reverse
3. column
4. column-reverse
The cross axis runs perpendicular to the main axis, therefore if your 昀氀ex-direc琀椀on (main axis) is set to row or row-
reverse the cross axis runs down the columns.

Pseudo Code
<!DOCTYPE html>

<html lang="en">

<head>

<title>Exp 5</title>

<style>

.hello{

float: left;

height: 100vh;

width: 20%;

</style>

</head>

<body>

<div class = ”hello”>Coloum 1</div>

<div class = ”hello”>Coloum 2</div>

</body>

</html>
CODE
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap"
rel="stylesheet">
<title>Table</title>
</head>

<body>
<div class="table">
<div class="column">
<div class="header">
Column 1
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a est
gravida gravida. Vivamus vel
sapien sem. Mauris condimentum massa a rhoncus placerat. Aenean efficitur
eget justo at iaculis. Integer
et dolor nisi. Sed consequat fermentum enim, ac sodales nisi consequat
vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
<div class="column">
<div class="header">
Column 2
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a est
gravida gravida. Vivamus vel
sapien sem. Mauris condimentum massa a rhoncus placerat. Aenean efficitur
eget justo at iaculis. Integer
et dolor nisi. Sed consequat fermentum enim, ac sodales nisi consequat
vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
<div class="column">
<div class="header">
Column 3
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a est
gravida gravida. Vivamus vel
 sapien sem. Mauris condimentum massa a rhoncus placerat. Aenean efficitur
eget justo at iaculis. Integer
et dolor nisi. Sed consequat fermentum enim, ac sodales nisi consequat
vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
<div class="column">
<div class="header">
Column 4
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a est
gravida gravida. Vivamus vel
sapien sem. Mauris condimentum massa a rhoncus placerat. Aenean efficitur
eget justo at iaculis. Integer
et dolor nisi. Sed consequat fermentum enim, ac sodales nisi consequat
vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
<div class="column">
<div class="header">
Column 5
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a est
gravida gravida. Vivamus vel
sapien sem. Mauris condimentum massa a rhoncus placerat. Aenean efficitur
eget justo at iaculis. Integer
et dolor nisi. Sed consequat fermentum enim, ac sodales nisi consequat
vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
</div>
</body>
</html>

CSS
*{
margin: 0;
padding: 0;
font-family: 'Lato', Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
 background-color: black;
}
.table {
background-color: rgb(38, 90, 90);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 2% 5%;
}
.column {
padding: 0 2%;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 2px solid #ccc;
}
.header, .data {
display: flex;
}
.header {
flex: 1;
}
.data {
flex: 4;
}

CONCLUSION:
Through this experiment, 昀椀ve columns of same size were made with the help of 昀氀exbox, which will further help in
layout.
 EXPERIMENT-3
AIM:
Write a HTML code for making table to containing di昀昀erent op琀椀on for di昀昀erent ques琀椀ons:

THEORY:
Table Tag
The <table> tag de昀椀nes an HTML table. An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements. The <tr> element de昀椀nes a table row, the <th> element de昀椀nes a table header, and the <td>
element de昀椀nes a table cell. An HTML table may also include <cap琀椀on>, <colgroup>, <thead>, <琀昀oot>, and <tbody>
elements.

PSEUDO CODE
<!DOCTYPE html>

<html lang="en">

<head>

<title>Exp 6</title>

</head>

<body>

<table>

<tr>

<th>

Write Table Content.

</th>

</table>

</body>

</html>
CODE
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap"
rel="stylesheet">
<title>Multiple Choices</title>
</head>

<body>
<table>
<tr>
<th>
Which is your favourite colour?
</th>
<th>
Who is your national leader?
</th>
<th>
Who has the highest test centuries in India?
</th>
</tr>
<tr>
<td>
Red
</td>
<td>
Sardar Patel
</td>
<td>
Kapil Dev
</td>
</tr>

<tr>
<td>
Green
</td>
<td>
Gandhiji
</td>
<td>
Sachin Tendulkar
</td>
</tr>
<tr>
<td>
 Yellow
</td>
<td>
Indiraji
</td>
<td>
Sunil Gawaskar
</td>
</tr>
<tr>
<td>
Blue
</td>
<td>
Nehruji
</td>
<td>
Ajay Jadeja
</td>
</tr>
</table>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: 'Lato', Arial, Helvetica, sans-serif;
color: #fff;
font-size: 20px;}
html {
height: 100vh;
}
body {
background-color: #121212;
height: 100%;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
table {
border: 2px solid #fff;
padding: 10px;
}
td, th {
padding: 10px;
}
tr:nth-child(even) {
background-color: #2c2c2c;
}
tr {
background-color: #3d3d3d;}
OUTPUT

CONCLUSION:
Through this experiment, table tag, along with its CSS proper琀椀es were understood.
 EXPERIMENT- 4
AIM:
Write a HTML code to generate following output:

THEORY:
HTML Form

An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such
as name, email address, password, phone number, etc. .

These are the following HTML <form> elements:

• <label>: It de昀椀nes label for <form> elements.

• <input>: It is used to get input data from the form in various types such as text, password, email, etc by
changing its type.

• <bu琀琀on>: It de昀椀nes a clickable bu琀琀on to control other elements or execute a func琀椀onality.

• <select>: It is used to create a drop-down list.

• <textarea>: It is used to get input long text content.

• <昀椀eldset>: It is used to draw a box around other form elements and group the related data.

• <legend>: It de昀椀nes cap琀椀on for 昀椀eldset elements.

• <datalist>: It is used to specify pre-de昀椀ned list op琀椀ons for input controls.

• <output>: It displays the output of performed calcula琀椀ons.

• <op琀椀on>: It is used to de昀椀ne op琀椀ons in a drop-down list.

• <optgroup>: It is used to de昀椀ne group-related op琀椀ons in a drop-down list.

Pseudo Code:
<!DOCTYPE html>

<html>

<head>

<title>Form</title>

</head>

<body>

<div class="wrapper">

<div class="title">

Registration Form

</div>

<div class="form">

<div class="inputfield">

<label>Username</label>

<input type="text" class="input">

</div>

<div class="inputfield">

<label>Password</label>

<input type="password" class="input">

</div>

<div class="inputfield">

<label>First Name</label>

<input type="text" class="input">

</div>

<div class="inputfield">

<label>Email Address</label>

<input type="text" class="input">

</div>

<div class="inputfield">

<input type="submit" value="Save" class="btn">

</div>

</div>

</div>

</body>

</html>
CODE:
HTML:
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="row">
<h2>Registration Form</h2>
</div>
<div class="row">
<form action="#">
<div class="row">
<div class="column">
<label for="username">Username</label>
</div>
<div class="column">
<input type="text" id="username" name="username">
</div>
</div>

<div class="row">
<div class="column">
<label for="password">Password</label>
</div>
<div class="column">
<input type="text" id="password" name="password">
</div>
</div>

<div class="row">
<div class="column">
<label for="confirmpas">Confirm Password</label>
</div>
<div class="column">
<input type="text" id="confirmpas" name="confirmpas">
</div>
</div>

<div class="row">
<div class="column">
<label for="fname">FirstName</label>
</div>
<div class="column">
<input type="text" id="fname" name="fname">
</div>
</div>

<div class="row">
 <div class="column">
<label for="lname">LastName</label>
</div>
<div class="column">
<input type="text" id="lname" name="lname">
</div>
</div>

<div class="row">
<div class="column">
<label for="email">Email</label>
</div>
<div class="column">
<input type="text" id="email" name="email">
</div>
</div>

<div class="row">
<div class="column">
<label for="phone">Phone</label>
</div>
<div class="column">
<input type="text" id="phone" name="phone">
</div>
</div>

<div class="row">
<div class="column">
<label for="location">Location</label>
</div>
<div class="column">
<input type="text" id="location" name="location">
</div>
</div>
<div class="row">
<div class="column">
<input type="submit" value="Save">
</div>

<div class="column">
<input type="reset" value="Reset">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

body {
background-color: #333333;
color: #fff;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px;
}
.column {
flex: 1;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

OUTPUT

CONCLUSION
Through this experiment, Process of crea琀椀ng a registra琀椀on form was understood, was developed too.
 EXPERIMENT – 5
AIM:
Create an html page containing the polynomial expression as follows

a0 + a1x+ a2x 2 + a3 x3

Theory:
Sub Tag

The <sub> tag de昀椀nes subscript text. Subscript text appears half a character below the normal line, and is some琀椀mes
rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

Appropriate use cases for <sub> include (but aren't necessarily limited to):

• Marking up footnote numbers.

• Marking up the subscript in mathematical variable numbers (although you may also consider using
a MathML formula for this).
• Denoting the number of atoms of a given element within a chemical formula (such as every developer's best
friend, C 8 H 10 N 4 O 2 , otherwise known as "caffeine").

CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
a₀+a₁x+a₂x²+a₃x<sup>3</
sup>
</h1>
</div>
</body>
</html>
CSS
* {
margin : 0;
padding: 0;
text-rendering: optimizeLegibility;
font-family: 'Lato', sans-serif;
}
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0 20%;
background-color: #2c2c2c;
color: #ffffff;
}

.container {
display: flex;
width: 1000px;
height: 250px;
flex-direction: column;
align-items: center;
justify-content: center;
}

sub, sup {
font-size: 20px;
}

OUTPUT

CONCLUSION
The polynomial expression was wri琀琀en with the help of <sub> tag
 EXPERIMENT 6
AIM:
Write a HTML code to generate following output: Use of FrameSet.

THEORY
Frameset Tags and Frame Tags
The <frameset> tag was used in HTML 4 to de昀椀ne a frameset.

Depleted from HTML 5

Instead of frame tag, we have used iframe

Iframe Tag
The <iframe> tag speci昀椀es an inline frame.

An inline frame is used to embed another document within the current HTML document.

Pseudo Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frameset</title>
</head>
<body>
<div class="container">
<div class="first">
<div class="row">
<iframe src="./physics.html"></iframe>
</div>
<div class="row">
<iframe src="./chemistry.html"></iframe>
</div>
<div class="row">
<iframe src="./biology.html"></iframe>
</div>
<div class="row">
<iframe src="./zoology.html"></iframe>
</div>
</div>
 </div>
</body>
</html>

CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frameset</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap"
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="first">
<div class="row">
<iframe src="./Frame 1.html"></iframe>
</div>
<div class="row">
<iframe src="./Frame 2.html"></iframe>
</div>
</div>
<div class="second">
<div class="row">
<iframe src="./Frame 3.html"></iframe>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Lato', Arial, Helvetica, sans-serif;
color: #fff;
font-size: 20px;
}

html {
height: 100vh;
}

body {
background-color: #121212;
height: 100%;
display: flex;
flex: 1;
justify-content: center;
 align-items: center;
}
.container {
width: 1000px;
display: flex;
flex-direction: row;
}
.first, .second, .third {
display: flex;
flex: 1;
flex-direction: column;
}
.row, .row1, .row2, .row3 {
display: flex;
flex: 1;
padding: 2px;
}
.row2 {
flex: 2;
}
iframe {
width: 100%;
padding: 5px;
border: 2px solid white;
}

OUTPUT

CONCLUSION
Through this experiment, iframe tag and use of iframe tag was understood.
 EXPERIMENT – 7
AIM:
Write a JavaScript program to display a hidden div (e.g. showing stats of a player when user clicks on his name).

Theory:
Const

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be
changed through reassignment (i.e. by using the assignment operator), and it can't be redeclared (i.e. through
a variable declara琀椀on). However, if a constant is an object or array its proper琀椀es or items can be updated or removed.

Var

The var statement declares a func琀椀on-scoped or globally-scoped variable, op琀椀onally ini琀椀alizing it to a value.
The scope of a variable declared with var is its current execu琀椀on context and closures thereof, which is either the
enclosing func琀椀on and func琀椀ons declared within it, or, for variables declared outside any func琀椀on, global.

CSS-in-JS

CSS-in-JS libraries have been gaining trac琀椀on since component-based JavaScript frameworks appeared in front-end
development. Angular, React, Vue, and other frameworks are all based on modules called “components” from which
you can build up an en琀椀re single-page applica琀椀on (SPA). A component is usually a UI element such as a bu琀琀on, pop-
up, or naviga琀椀on bar. You only need to create a component once and you can reuse it in any context within the
applica琀椀on.

Pseudo Code
<!DOCTYPE html>

<head>
<title>Change Style</title>
</head>

<body>
<div id="stats">
<div>Sankalp Gautam </div>
<div id="Sankalp">
<br>Roll.No : 2K20/EE/243<br>
Branch : Electrical Engineering<br>
Hobby : Reading, Cricket<br><br>
</div>
<button id="visBtn" onclick="showVishal()">Show Stats</button>
</div>
</body>

<script>
document.getElementById("Sankalp").style.display = "none";
document.getElementById("Raj").style.display = "none";

const showVishal = () => {

var x = document.getElementById("Sankalp");
if (x.style.display === "none") {
x.style.display = "block";
 document.getElementById("visBtn").innerHTML = "Hide Stats";
} else {
x.style.display = "none";
document.getElementById("visBtn").innerHTML = "Show Stats";
}
}

</script>
</html>

CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exp 7</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap"
rel="stylesheet">
<script src="./script.js" defer></script>
</head>
<body>
<div id="container">
<div id="stats">
<div>Sankalp Gautam </div>
<div id="Sankalp">
<br>Roll.No : 2K20/EE/243<br>
Branch : Electrical Engineering<br>
Hobbies : Reading, Cricket<br><br>
</div>
<button id="visBtn" onclick="showVishal()">Show Stats</button>
</div>
<div id="stats">
<div id="Yashasvi">Raj Aggarwal</div>
<div id="Raj">
<br>Roll.No : 2K20/EE/146<br>
Branch : Electrical Engineering<br>
Hobby : Gaming, Watching Anime<br><br>
</div>
<button id="yashBtn" onclick="showYash()">Show Stats</button>
</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
 margin : 0;
padding: 0;
text-rendering: optimizeLegibility;
font-family: 'Lato', sans-serif;
}

body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 20%;
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
color: white;
}

#container {
height: 50vh;
width: 50vw;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
margin: 0 20%;
background-color: #04a3ff;
color: rgb(245, 242, 242);
box-shadow: 10px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-style: solid;
font-size: 30px;
}

#Sankalp, #Raj {
font-size: 16px;
text-align: left;
box-shadow: 10px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
padding: 10px;
color: black;
background-color: #fafbfb;
border-radius: 15px;
}

button {
height: 5vh;
width: 10vw;
background-color: #fafbfb;
border: none;
border-radius: 15px;
color: rgb(6, 6, 6);
text-align: center;
font-size: 18px;
}
button:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
JAVASCRIPT
document.getElementById("Sankalp").style.display = "none";
document.getElementById("Raj").style.display = "none";

const showVishal = () => {

var x = document.getElementById("Sankalp");
if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("visBtn").innerHTML = "Hide Stats";
} else {
x.style.display = "none";
document.getElementById("visBtn").innerHTML = "Show Stats";
}
}

const showYash = () => {

var x = document.getElementById("Raj");
if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("yashBtn").innerHTML = "Hide Stats";
} else {
x.style.display = "none";
document.getElementById("yashBtn").innerHTML = "Show Stats";
}
}

Output

Conclusion
A JavaScript program to display a hidden div was implemented
 Experiment-8
Aim
Write a JavaScript program to sort the items of an array.

Theory
The JavaScript array sort() method is used to arrange the array elements in some order. By default, sort() method
follows the ascending order.

Syntax

The sort() method is represented by the following syntax:

array.sort(compareFunction)

Parameter

compareFunction - It is optional. It represents a function that provides an alternative sort order.

Return

An array of sorted elements

Code
HTML and JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<script>
var arr=[2,4,1,8,5];
var result=arr.sort();
document.writeln(result);
</script>

</body>
</html>
CSS
* {
margin : 0;
padding: 0;
text-rendering: optimizeLegibility;
 font-family: 'Lato', sans-serif;
}
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0 20%;
background-color: #2c2c2c;
color: #ffffff;
}
.container {
display: flex;
width: 1000px;
height: 250px;
flex-direction: column;
align-items: center;
justify-content: center;
}
sub, sup {
font-size: 20px;
}

Output

Conclusion
The JavaScript program to sort numbers is implemented.
 Experiment-9
Aim
Write a JavaScript program which accept a string as input and swap the case of each character. For example if you
input 'The Quick Brown Fox' the output should be 'tHE qUICK bROWN fOX'.

Theory
• function swap_case(): This is the main JavaScript function defined in the code. It's called when the "Swap the
Case" button is clicked.
• var data = document.getElementById('user_txt').value;: Retrieves the text entered by the user in the textarea
with the id "user_txt" and stores it in the variable data.
• var output = '';: Initializes an empty string called output to store the swapped text.
• document.getElementById('error').innerHTML = ""; and document.getElementById('result').innerHTML = "";:
Clears any previous error and result messages by setting their innerHTML to an empty string.
• The function then checks whether the data is empty. If it is, it displays an error message.
• If the data is not empty, it loops through each character in the input string.
• It checks if the character is an uppercase alphabetic character (A-Z) and converts it to lowercase using
.toLowerCase(), or if it's a lowercase alphabetic character (a-z) and converts it to uppercase using
.toUpperCase(). Non-alphabetic characters are left unchanged.
• The swapped characters are appended to the output string.
• Finally, the swapped text is displayed in the "result" span.

Code
<!DOCTYPE HTML>
<html>
<head>
<title>Swap the Case</title>
<style type="text/css">
.error_msg
{
color:#ff0000;
font-style:italic;
}
</style>
<script language="javascript">
function swap_case()
{
var data=document.getElementById('user_txt').value;
var output='';
document.getElementById('error').innerHTML="";
document.getElementById('result').innerHTML="";
var i,j;
if(data=="")
{
document.getElementById('error').innerHTML="Please Enter the text";
}
else
{
for(i=0; i<data.length; i++)
{
if(data.charCodeAt(i)>=65&&data.charCodeAt(i)<=90)
 {
output+=data.charAt(i).toLowerCase();
}
else if(data.charCodeAt(i)>=97&&data.charCodeAt(i)<=122)
{
output+=data.charAt(i).toUpperCase();
}
else
{
output+=data.charAt(i);
}
}
document.getElementById('result').innerHTML=output;
}
}
</script>
</head>
<body>
<form name="frm" id="frm">
<div>
<label for="user_txt">Enter the Text</label>
</div>
<div>
<textarea name="user_txt" id="user_txt" rows="10" cols="30"></textarea>
<span class="error_msg" id="error"></span>
</div>
<div>
<input type="button" name="check_btn" id="check_btn" value="Swap the Case"
onclick="swap_case()"/>
</div>
<div>
<h3>Output</h3>
<span id="result"></span>
</div>

</form>
</body>
</html>
Output

Conclusion
This Javascript program provides a simple user interface for swapping the case of alphabe琀椀c characters in the input
text.
 Experiment-10
Aim
Write a JavaScript func琀椀on to hide email addresses to protect from unauthorized user.

Theory
func琀椀on test_str() { ... }: This is a JavaScript func琀椀on named test_str that is de昀椀ned in the script. It performs the
following ac琀椀ons:

• It gets the value of an input field with the id "t1" (an email address) and stores it in the variable str.
• It searches for the index of the "@" character in the email address and stores it in the variable idx.
• It creates a new string res by replacing a portion of the email address, specifically the characters between the
5th position and the "@" character, with a string of five asterisks (stars).

Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function test_str(){
var str = document.getElementById("t1").value ;
var idx = str.indexOf('@');
var res = str.replace(str.slice(5, idx), "*".repeat(5));
document.getElementById("t2").value = res;
}
</script>
</head>
<body>
<p>
Email: <input type="text" placeholder="abc" id="t1"/><br/>
<input type="button" value="Protect" onclick="test_str()"/><br/>
Output: <input type="text" id="t2" readonly/>
</p>
</body>
</html>

Output

Conclusion
The web page provides an input 昀椀eld for an email address, a bu琀琀on to protect the email address by replacing
characters between the 5th posi琀椀on and the "@" symbol with asterisks, and an output 昀椀eld to display the protected
email address.
 Experiment-11
Aim
Write a JavaScript func琀椀on to insert a string within a string at a par琀椀cular posi琀椀on.

Theory
1. insertString(originalString, stringToInsert, position): A JavaScript function that inserts a string within another
string at a specified position.
• originalString: The original string in which to insert another string.
• stringToInsert: The string to be inserted.
• position: The position at which to insert stringToInsert.
• Checks if the position is within the bounds of the originalString.
• Returns the modified string or "Invalid position" if the position is out of bounds.
2. insertAndUpdate(): A JavaScript function that is called when the "Insert" button is clicked.
• Retrieves values from the input fields for originalString, stringToInsert, and position.
• Calls the insertString function to insert the string.
• Updates the "result" paragraph with the modified string or an error message.

Code
<!DOCTYPE html>
<html>
<head>
<title>String Insertion</title>
</head>
<body>
<h1>String Insertion</h1>
<p>Enter a string, the string to insert, and the position:</p>

<form id="insertForm">
<input type="text" id="originalString" placeholder="Original String">
<input type="text" id="stringToInsert" placeholder="String to Insert">
<input type="number" id="position" placeholder="Position">
<button type="button" onclick="insertAndUpdate()">Insert</button>
</form>

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

<script>
function insertString(originalString, stringToInsert, position) {
if (position < 0 || position > originalString.length) {
return "Invalid position";
}
return originalString.slice(0, position) + stringToInsert +
originalString.slice(position);
}

function insertAndUpdate() {
const originalString = document.getElementById('originalString').value;
const stringToInsert = document.getElementById('stringToInsert').value;
const position = parseInt(document.getElementById('position').value);
const resultElement = document.getElementById('result');
 const modifiedString = insertString(originalString, stringToInsert, position);
resultElement.textContent = "Modified String: " + modifiedString;
}
</script>
</body>
</html>

Output

Conclusion
This code provides a user-friendly web page where users can input an original string, a string to insert, and a posi琀椀on.
When they click the "Insert" bu琀琀on, the JavaScript func琀椀ons handle the inser琀椀on and display the modi昀椀ed string or
an error message.
 Experiment-12
Aim
Write a JavaScript func琀椀on to check whether a given value is hexadecimal value or not.

Theory
1. isHexadecimal(value): A JavaScript func琀椀on that checks if a given value is a valid hexadecimal value.

• value: The input value to be checked.

• hexPattern: A regular expression pattern that matches valid hexadecimal values (0-9, A-F, or a-f).
• return: Returns true if the input matches the pattern (valid hexadecimal), otherwise returns false.

2. checkHexadecimal(): A JavaScript func琀椀on that is called when the "Check" bu琀琀on is clicked.

• inputValue: Retrieves the value entered in the input field with the ID 'hexInput'.
• resultElement: Retrieves the HTML element with the ID 'result'.
• Checks if inputValue is a valid hexadecimal value using the isHexadecimal function and updates the resultElement
with the result message.

Code
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal Value Checker</title>
</head>
<body>
<h1>Hexadecimal Value Checker</h1>
<p>Enter a value to check if it's a hexadecimal value:</p>
<input type="text" id="hexInput" placeholder="Enter a value">
<button onclick="checkHexadecimal()">Check</button>
<p id="result"></p>
<script>
function isHexadecimal(value) {
const hexPattern = /^[0-9A-Fa-f]+$/;
return hexPattern.test(value);
}
function checkHexadecimal() {
const inputValue = document.getElementById('hexInput').value;
const resultElement = document.getElementById('result');

if (isHexadecimal(inputValue)) {
resultElement.textContent = inputValue + ' is a valid hexadecimal value.';
} else {
resultElement.textContent = inputValue + ' is not a valid hexadecimal value.';
}
}
</script>
</body>
</html>
Output

Conclusion
This code provides a simple web page where users can enter a value, click the "Check" bu琀琀on, and receive feedback
on whether the input is a valid hexadecimal value or not. The JavaScript func琀椀ons handle the valida琀椀on and result
display.
 Experiment 13
Aim
Write a JavaScript func琀椀on to convert a decimal number to binary, hexadecimal or octal number.

Theory
convertNumber(): A JavaScript func琀椀on that is called when the "Convert" bu琀琀on is clicked.

• Retrieves the decimal number entered by the user from the input field with the ID 'decimalNumber' and
parses it as an integer.
• Uses the toString method with base arguments to convert the decimal number to binary (base 2),
hexadecimal (base 16), and octal (base 8) representations.
• Updates the HTML elements with IDs 'binaryResult', 'hexadecimalResult', and 'octalResult' to display the
conversion results.

Code
<!DOCTYPE html>
<html>
<head>
<title>Number Conversion</title>
</head>
<body>
<h1>Number Conversion</h1>
<p>Enter a decimal number:</p>

<form id="conversionForm">
<input type="number" id="decimalNumber" placeholder="Decimal Number">
<button type="button" onclick="convertNumber()">Convert</button>
</form>

<p>Conversion Results:</p>
<p id="binaryResult"></p>
<p id="hexadecimalResult"></p>
<p id="octalResult"></p>

<script>
function convertNumber() {
const decimalNumber = parseInt(document.getElementById('decimalNumber').value);
const binaryResult = decimalNumber.toString(2);
const hexadecimalResult = decimalNumber.toString(16);
const octalResult = decimalNumber.toString(8);

document.getElementById('binaryResult').textContent = `Binary: ${binaryResult}`;

document.getElementById('hexadecimalResult').textContent = `Hexadecimal:
${hexadecimalResult}`;
document.getElementById('octalResult').textContent = `Octal: ${octalResult}`;
}
</script>
</body>
</html>
Output

Conclusion
This code provides a user-friendly web page for conver琀椀ng a decimal number to its binary, hexadecimal, and octal
representa琀椀ons. Users can input a decimal number, click the "Convert" bu琀琀on, and see the results displayed on the
page.
 Experiment 14
Aim
Write a merge sort program in JavaScript.

Theory
1. Generate Random Array (generateArray):
• generateArray(): This function generates an array of random integers. It is called when the "Generate New
Array" button is clicked.
• It creates an empty array and populates it with random numbers between 5 and 204.
• Returns the generated array.
2. Reset Array (resetArray):
• resetArray(): This function is called when the "Generate New Array" button is clicked to reset the array.
• It calls generateArray to create a new random array and displays it on the web page.
3. Display Array (displayArray):
• displayArray(array): This function displays the array on the web page, visualized as bars of varying heights.
• It takes the array as input and creates HTML elements (divs) for each element in the array to represent the
bars.
• The height and width of the bars are adjusted based on the values in the array.
4. Merge Sort Algorithm (mergeSort):
• mergeSort(): This asynchronous function is called when the "Merge Sort" button is clicked to initiate the
merge sort algorithm.
• It retrieves the array bars from the HTML and calls the helper functions to perform the sorting and
visualization.
• The sorting process involves changing the background color of bars to represent the progress of the
algorithm.
5. Merge Function (merge):
• merge(arr, left, middle, right): This is an asynchronous function that performs the merging step of the
merge sort algorithm.
• It takes an array arr and the indices left, middle, and right as input.
• During the merging process, it highlights the bars in yellow as they are being compared, and in green once
they are merged.
6. Merge Sort Helper Function (mergeSortHelper):
• mergeSortHelper(arr, left, right): This is an asynchronous helper function for the merge sort algorithm.
• It recursively divides the array into subarrays and then merges them.
• Calls merge to merge the subarrays.
7. Initial Array Generation and Display:
• At the end of the script, the resetArray function is called to generate an initial random array and display it
on the web page.

Code
<!DOCTYPE html>
<html>
<head>
<title>Merge Sort Visualization</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
 #array-container {
display: flex;
justify-content: center;
}

.array-bar {
background-color: #0074D9;
color: white;
display: inline-block;
margin: 0 2px;
padding: 5px;
}

button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #FF4136;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Merge Sort Visualization</h1>

<div id="array-container"></div>
<button onclick="resetArray()">Generate New Array</button>
<button onclick="mergeSort()">Merge Sort</button>

<script>
// Generate a random array
function generateArray() {
const array = [];
for (let i = 0; i < 50; i++) {
array.push(Math.floor(Math.random() * 200) + 5); // Random numbers between 5 and
204
}
return array;
}

// Shuffle the array to create a new random array

function resetArray() {
const array = generateArray();
displayArray(array);
}

// Display the array on the web page

function displayArray(array) {
const arrayContainer = document.getElementById("array-container");
arrayContainer.innerHTML = '';
array.forEach((value, index) => {
const arrayBar = document.createElement("div");
 arrayBar.className = "array-bar";
arrayBar.style.height = `${value}px`;
arrayBar.style.width = `${1000 / array.length - 2}px`; // Adjust width for display
arrayContainer.appendChild(arrayBar);
});
}

// Merge Sort Algorithm

async function mergeSort() {
const arrayContainer = document.getElementById("array-container");
const arrayBars = arrayContainer.getElementsByClassName("array-bar");

async function merge(arr, left, middle, right) {

const n1 = middle - left + 1;
const n2 = right - middle;
const L = new Array(n1);
const R = new Array(n2);

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

L[i] = arr[left + i];
arrayBars[left + i].style.backgroundColor = "#FFDC00"; // Yellow color
await new Promise(resolve => setTimeout(resolve, 100));
}
for (let i = 0; i < n2; i++) {
R[i] = arr[middle + 1 + i];
arrayBars[middle + 1 + i].style.backgroundColor = "#FFDC00"; // Yellow color
await new Promise(resolve => setTimeout(resolve, 100));
}

let i = 0, j = 0, k = left;

while (i < n1 && j < n2) {

if (L[i] <= R[j]) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}

while (i < n1) {

arr[k] = L[i];
i++;
k++;
}

while (j < n2) {

arr[k] = R[j];
j++;
k++;
}
 for (let i = left; i <= right; i++) {
arrayBars[i].style.backgroundColor = "#2ECC40"; // Green color
arrayBars[i].style.height = `${arr[i]}px`;
await new Promise(resolve => setTimeout(resolve, 100));
}
}

async function mergeSortHelper(arr, left, right) {

if (left < right) {
const middle = Math.floor((left + right) / 2);

await mergeSortHelper(arr, left, middle);

await mergeSortHelper(arr, middle + 1, right);

await merge(arr, left, middle, right);

}
}

const array = Array.from(arrayBars).map(bar => parseInt(bar.style.height));

await mergeSortHelper(array, 0, array.length - 1);
}

// Initial array generation and display

resetArray();
</script>
</body>
</html>

Output

Conclusion
The JavaScript code combines the merge sort algorithm with HTML and CSS to create a visual representa琀椀on of the
sor琀椀ng process. Users can generate a random array and observe the array bars changing colour as the merge sort
algorithm sorts the data.
 Experiment 15
Aim
Write a JavaScript program to count number of words in string.

Note:

• Remove white-space from start and end position.

• Convert 2 or more spaces to 1.
• Exclude newline with a start spacing.

Theory
1. Count Words (countWords):
• countWords(): This function is called when the "Count Words" button is clicked to count the words in the
entered text.
• It retrieves the input text from the text area and references the result element where the word count will be
displayed.
2. Text Processing:
• const inputText = inputBox.value.trim(): The input text is first trimmed to remove any leading or trailing
whitespace.
• const cleanedText = inputText.replace(/\s\s+/g, " "): This regular expression is used to replace two or more
consecutive spaces with a single space, ensuring that extra spaces are condensed to one.
• const words = cleanedText.split(" "): The cleaned text is split into words using the space character as the
delimiter, resulting in an array of words.
3. Word Count Calculation:
• const wordCount = words.length: The length of the words array is calculated to determine the number of
words in the input text.
4. Display Result:
• resultElement.textContent: The result paragraph's text content is updated to display the word count using
the ${wordCount} variable.

Code
<!DOCTYPE html>
<html>
<head>
<title>Word Count</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#word-count-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
#input-box {
width: 100%;
padding: 10px;
font-size: 16px;
 }
#count-button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #0074D9;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Word Count</h1>
<div id="word-count-container">
<textarea id="input-box" placeholder="Enter your text here"></textarea>
<button id="count-button" onclick="countWords()">Count Words</button>
<p id="result"></p>
</div>
<script>
function countWords() {
const inputBox = document.getElementById("input-box");
const resultElement = document.getElementById("result");
const inputText = inputBox.value.trim(); // Remove leading/trailing whitespace
const cleanedText = inputText.replace(/\s\s+/g, " "); // Replace 2 or more spaces
with 1
const words = cleanedText.split(" "); // Split the cleaned text into words
// Count the words and update the result element
const wordCount = words.length;
resultElement.textContent = `Word count: ${wordCount}`;
}
</script>
</body>
</html>

Output

Conclusion
The JavaScript code processes the input text to count the number of words while adhering to the provided
requirements. It trims leading/trailing whitespace, condenses consecu琀椀ve spaces, and displays the word count when
the bu琀琀on is clicked.