Wayanamac Education Trust®

DON BOSCO INSTITUTE OF TECHNOLOGY

Kumbalagodu, Mysuru Road, Bengaluru – 560074
www.dbit.co.in ph:+91-80-28437028/29/30 Fax:+91-80-28437031
Department of Computer Science & Engineering

A LABORATORY MANUAL FOR

WEB TECHNOLOGY LABORATORY [BCSL504]

V SEMESTER [2022 Scheme]

Faculty Incharge
Dr. Usha Kirana S P, Associate Professor

Prof. Shravya G Gowda, Assistant Professor

 Wayanamac Education Trust®
DON BOSCO INSTITUTE OF TECHNOLOGY
Kumbalagodu, Mysuru Road, Bengaluru – 560074
www.dbit.co.in ph:+91-80-28437028/29/30 Fax:+91-80-28437031
Department of Computer Science & Engineering

Vision of the Department

"To be a center of excellence to transform young minds in technical and management education
fostering innovation and entrepreneurial skills with ethical, environmental, and social
responsibility.."

Mission of the Department

M1: To impart quality education in order to meet the needs of industry and society.

M2: To collaborate with academia, industry and research institutes to strengthen teaching and
learning process.
M3: To promote equitable and harmonious development of students to work in teams.
M4: To imbibe lifelong learning skills and entrepreneurial skills exhibiting leadership.

PROGRAM EDUCATIONAL OBJECTIVES

PEO1: To produce graduates satisfying Computer Science Engineering challenges.

PEO2: To meet dynamic requirements of IT industries professionally and ethically along with
social responsibilities.
PEO3: ToprovideComputerScienceandEngineeringgraduatestosupportnationsself employment
growth with women entrepreneurial skills.
PEO4: To equip Graduates with minimum research blend for further career challenges
internationally.
 Wayanamac Education Trust®
DON BOSCO INSTITUTE OF TECHNOLOGY
Kumbalagodu, Mysuru Road, Bengaluru – 560074
www.dbit.co.in ph:+91-80-28437028/29/30 Fax:+91-80-28437031
Department of Computer Science & Engineering

Program Outcomes
Engineering Graduates will be able to:
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.

2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.

3. Design/development of solutions: Design solutions for complex engineering problems and

design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.

4. Conduct investigations of complex problems: Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering

solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.

9. Individual and team work: Function effectively as an individual, and as a member or

leader in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive
clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one‟s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.

12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

Program Specific Outcomes

Enable students to design system and system architecture, inculcating
PSO1
software, computing and analytical ability.

Enhance skills to be successful in National, International level

PSO2
competition like GATE, GRE, GMAT
 PREFACE
The HTML stands for Hyper Text Markup Language. HTML is the standard markup languagefor
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, HTML elements label
pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

CSS stands for Cascading Style Sheets, CSS describes how HTML elements are to be displayed
on screen, paper, or in other media, CSS saves a lot of work. It can control the layout of multiple
web pages all at once. External style sheets are stored in CSS files. CSS is used to define styles for
your web pages, including the design, layout and variations in display for different devices and
screen sizes.

JavaScript is a scripting or programming language that allows you to implement complexfeatures

on web pages — every time a web page does more than just sit there and display static information
for you to look at — displaying timely content updates, interactive maps, animated 2D/3D
graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

This laboratory manual is designed to help all stakeholders, especially the students, teachers,
and instructors to develop in the student the pre-determined outcomes. It is expected from
each student that at least a day in advance, they have to thoroughly read the concerned practical
procedure that they will do the next day and understand the minimum theoretical background
associated with the practical. Every practical in this manual begins by identifying the
competency, industry- relevant skills, course outcomes, and practical outcomes which serve as
a key focal point for doing the practical. Students will then become aware about the skills they
will achieve through the procedure shown there the and necessary precautions to be taken, which
will help them to apply in solving real-world problems in their professional life.

This manual also provides guidelines to teachers and instructors to effectively facilitate
student-centered lab activities through each practical exercise by arranging and managing
necessary resources in order that the students follow the procedures and precautions
systematically ensuring the achievement of outcomes in the students.

Although all care has been taken to check for mistakes in this laboratory manual, yet it is
impossible to claim perfection especially as this is the first edition. Any such errors and
suggestions for improvement can be brought to our notice and are highly welcome.
 LAB OBJECTIVES

CLO1: Learn HTML 5 elements and their use.

CLO2: Use of CSS for enhanced user interface presentation.

CLO 3: Gain knowledge of JavaScript, AJAX and jQuery for dynamic presentation.

CLO4: Use of PHP to build Web applications.

CLO5: Design and develop Websites and Web applications.

LAB OUTCOMES
At the end of the course, the student will be able to:

CO 1: Design the experiment for the given problem using HTML, Javascript and CSS.
CO 2: Develop the solution for the given real-world problem using jQuery, Ajax and PHP.
CO 3: Demonstrate the ability to design and develop input interactive techniques.
CO 4: Apply the concepts to Develop user friendly applications using Graphics and IP concepts.
 GUIDELINES TO STUDENTS

A. Standard Operating Procedure

Explanation of experiment by the concerned faculty using PPT covering the following aspects:
1. Name of the Experiment.
2. Aim.
3. Program flow and Logic Explanation.
4. Commands for executing programs.

B. Writing of the experiment in the Observation Book

The students will write the experiment in the Observation book as per the following format:
1. Name of the experiment
2. Aim
3. Writing the program
4. Errors observed(if any)during compilation/execution
5. Output for all the possible cases.

C. Guide Lines to Students in Lab

• Disciplinary to be maintained by the students in the Lab
• Students are required to carry their lab observation book and record book with
completed experiments while entering the lab.
• Students must use the equipment with care. Any damage caused student is punishable
• Students are not allowed to use their cell phones/pendrives/CDs in labs.
• Students are supposed to occupy the computers allotted to them and are not supposed
to talk or make noise in the lab. Students, after completion of each experiment they
need to be updated in observation notes and same to be updated in the record.
• Lab records need to be submitted after completion of experiment and get it corrected
with the concerned lab faculty.
• If a student is absent for any lab, they need to be completed the same experiment in
their free time before attending the next lab.

D. Steps to perform experiments in the lab by the student

Step 1: Students have to write the date, and aim for that experiment in the observation book.
Step 2: Students have to listen and understand the experiment explained by the faculty and
note down the important points in the observation book.
Step3: Students need to write a procedure/algorithm in the observation book.
Step4: Analyze and Develop/implement the logic of the program by the student in the
respective platform.
Step5: After approval of the logic of the experiment by the faculty then the experiment has to
be executed on the system.
Step 6: After successful execution, the results are to be shown to the faculty and noted the
same in the observation book.
Step 7: Students need to attend the Viva-Voce on that experiment and write the same in the
observation book.
Step8: Update the completed experiment in the record and submit it to the concerned faculty
in-charge.

E. Instructions to maintain the record

• Before the start of the first lab they have to buy the record and bring the record to the
lab.
• Regularly (Weekly) update the record after completion of the experiment and get it
corrected with the concerned lab in-charge for continuous evaluation.
• In case the record is lost inform the same day to the faculty in charge and get the new
record within 2 days the record has to be submitted and get it corrected by the faculty.
• If a record is not submitted in time or the record is not written properly, the evaluation
marks (5M) will be deducted.

F. General Laboratory Instructions

1. Students are advised to come to the laboratory at least 5 minutes before(the starting time),
those who come after 5 minutes will not be allowed into the lab.
2. Plan your task properly before the commencement, come prepared to the lab with the
synopsis/program/experiment details.
3. Students should enter the laboratory with:
a) Laboratory observation notes with all the details(Problem statement, Aim, Algorithm,
Procedure, Program, Expected Output, etc.,) filled in for the lab session.
b) Laboratory Records updated up to the last session experiments and other utensils (if
any) needed in the lab.
4. Occupy the computer system allotted to you by the faculty.
5. Execute your task in the laboratory, record the results/output in the lab observation
notebook, and get corrected by the concerned faculty.
6. All the students should be polite and cooperative with the laboratory staff and mustmaintain
discipline and decency in the laboratory.
7. Computer labs are established with sophisticated and high-end branded systems, which
should be utilized properly.
8. Students/Faculty must keep their mobile phones in SWITCHED OFF mode during the lab
sessions. Misuse of the equipment, misbehaviors with the staff and systems, etc., will attract
severe punishment.
9. Students must take the permission of the faculty in case of any urgency to go out; if anybody
is found outside the lab / class without permission during working hours will be treated
seriously and punished appropriately.
10. Students should LOG OFF/ SHUT DOWN the computer system before leaving the lab
after completing the task (experiment) in all aspects. She must ensure the system/seat is kept
properly.

HoD-CSE
 GUIDELINES TO FACULTIES

1. Faculty shall explain prior concepts to the students before starting each experiment.

2. For practical requiring tools to be used, faculty should provide the demonstration of the
practical emphasizing the skills, which the student should achieve.

3. Involve students in the activities during the conduct of each experiment.

4. Assess the skill achievement of the students and Cos of each program.

5. Faculty is expected to share the skills and competencies to be developed in the students.

6. Faculty should ensure that the respective skills and competencies are developed in the
students after the completion of the practical exercise.

7. Faculty may provide additional knowledge and skills to the students even though that may
not be covered in the manual but are expected from the students by the industries.

8. Faculty may suggest the students to refer additional related literature of the reference
books/websites/seminar proceedings etc.

9. During the assessment teacher is expected to ask questions to the students to tap their
knowledge and skill related to that practical.

HoD-CSE
 CONTENTS
Web Technology Lab Semester 5
Course Code BCSL504 CIE Marks 50
Teaching Hours/Week (L:T:P: S) 0:0:2:0 SEE Marks 50
Credits 01 Exam 100
Hours
Examination type (SEE) Practical
Course objectives:
● Learn HTML 5 elements and their use.
● Use of CSS for enhanced user interface presentation.
● Gain knowledge of JavaScript, AJAX and jQuery for dynamic presentation.
● Use of PHP to build Web applications.
● Design and develop Websites and Web applications.
Sl. NO Experiments
1 Develop the HTML page named as “Myfirstwebpage.html”. Add the following tags
with relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (<b>, <u>, <sub>, <sup> etc.)
2 Develop the HTML page named as “Table.html” to display your class time table.
a) Provide the title as Time Table with table header and table footer, row-span and col-
span etc.
b) Provide various color options to the cells (Highlight the lab hours and elective
hours with differentcolor.)
c) Provide color options for rows.
3 Develop an external style sheet named as “style.css” and provide different styles for h2,
h3, hr, p, div, span, time, img & a tags. Apply different CSS selectors for tags and
demonstrate the significance of each.
4 Develop HTML page named as “registration.html” having variety of HTML input
elements with background colors, table for alignment & provide font colors & size using
CSS styles.
5 Develop HTML page named as “newpaper.html” having variety of HTML
semantic elements with background colors, text-colors & size for figure, table, aside,
section, article, header, footer… etc.
6 Apply HTML, CSS and JavaScript to design a simple calculator to perform the
following operations: sum, product, difference, remainder, quotient, power, square-root
and square.
 7 Develop JavaScript program (with HTML/CSS) for:
a) Converting JSON text to JavaScript Object
b) Convert JSON results into a date
c) Converting From JSON To CSV and CSV to JSON
d) Create hash from string using crypto. Create Hash() method
8 a. Develop a PHP program (with HTML/CSS) to keep track of the number of
visitors visiting the webpage and to display this count of visitors, with relevant
headings.
b. Develop a PHP program (with HTML/CSS) to sort the student records which
are stored in the
database using selection sort.
9 Develop jQuery script (with HTML/CSS) for:
a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate() method
c. Change the color of any div that is animated.
10 Develop a JavaScript program with Ajax (with HTML/CSS) for:
a. Use ajax() method (without Jquery) to add the text content from the text file by
sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from the text file by
sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.
Programming Assignment (5 marks):
Construct a Website (multiple Web pages) containing „Resume‟ and Bio -data by using relevant
HTML elements and appropriate styling for presentation with CSS/jQuery/JavaScript. Host the
Website on a cloud platform.
Programming Assignment (5 marks): Build a Web application with HTML, CSS, JavaScript,
jQuery and PHP for online application/registration form. Form should accept the information and
print/display on a browser with formatting/styling upon submission (Button click) on success. Host
the application on a cloud platform.
Course outcomes (Course Skill Set):
At the end of the course, the student will be able to:
● Design the experiment for the given problem using HTML, Javascript and CSS.
● Develop the solution for the given real-world problem using jQuery, Ajax and PHP.
● Analyze the results and produce substantial written documentation.
Assessment Details (both CIE and SEE)
The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE)
is 50%. The minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of
50) and for the SEE minimum passing mark is 35% of the maximum marks (18 out of 50 marks).
A student shall be deemed to have satisfied the academic requirements and earned the credits
allotted to each subject/ course if the student secures a minimum of 40% (40 marks out of 100) in
the sum total of the CIE (Continuous Internal Evaluation) and SEE (Semester End Examination)
taken together

Continuous Internal Evaluation (CIE):

CIE marks for the practical course are 50 Marks.
The split-up of CIE marks for record/ journal and test are in the ratio 60:40.
● Each experiment is to be evaluated for conduction with an observation sheet and record
write-up. Rubrics for the evaluation of the journal/write-up for hardware/software
experiments are designed by the faculty who is handling the laboratory session and are
made known to students at the beginning of the practical session.
● Record should contain all the specified experiments in the syllabus and each experiment
write-up will be evaluated for 10 marks.
● Total marks scored by the students are scaled down to 30 marks (60% of maximum
marks).
● Weightage to be given for neatness and submission of record/write-up on time.
● Department shall conduct a test of 100 marks after the completion of all the experiments
listed in the syllabus.
● In a test, test write-up, conduction of experiment, acceptable result, and procedural
knowledge will carry a weightage of 60% and the rest 40% for viva-voce.
● The suitable rubrics can be designed to evaluate each student‟s performance and learning
ability.
● The marks scored shall be scaled down to 20 marks (40% of the maximum marks).
The Sum of scaled-down marks scored in the report write-up/journal and marks of a test is the
total CIE marks scored by the student.
Semester End Evaluation (SEE):
● SEE marks for the practical course are 50 Marks.
● SEE shall be conducted jointly by the two examiners of the same institute, examiners are
appointed by the Head of the Institute.
● The examination schedule and names of examiners are informed to the universitybefore
the conduction of the examination. These practical examinations are to be conducted
between the schedule mentioned in the academic calendar of the University.
 Wayanamac Education Trust®
DON BOSCO INSTITUTE OF TECHNOLOGY
Kumbalagodu, Mysuru Road, Bengaluru – 560074
www.dbit.co.in ph:+91-80-28437028/29/30 Fax:+91-80-28437031
Department of Computer Science & Engineering

Year of Study: 2024-2025

Laboratory Plan for Odd Semester 2024-2025

Semester & Year: V Semester [2022 Scheme]

Subject with Code: Web Technology Laboratory [BCSCSL504]
Faculty Name: Mrs. Usha Rani J, Ms. Nischitha B S

LABORATORY OUTCOMES:

CO1: Design the experiment for the given problem using HTML, Javascript and CSS.
CO2: Develop the solution for the given real-world problem using jQuery, Ajax and PHP.
CO3: Analyze the results and produce substantial written documentation.

Sl.
EXPERIMENTS COs
No.
PARTA
1 Develop the HTML page named as “Myfirstwebpage.html”. Add the CO1
following tags with relevant content.
3. Set the title of the page as “My First Web Page”
4. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (<b>, <u>, <sub>, <sup> etc.)
Develop the HTML page named as “Table.html” to display your class time
2 table. CO1
a) Provide the title as Time Table with table header and table footer, row-
span and col-span etc.
b) Provide various color options to the cells (Highlight the lab hours and
elective hours with differentcolor.)
c) Provide color options for rows.
 Develop an external style sheet named as “style.css” and provide different
3 styles for h2, h3, hr, p, div, span, time, img & a tags. Apply different CSS CO1
selectors for tags and demonstrate the significance of each.
4 Develop HTML page named as “registration.html” having variety of HTML CO1
input elements with background colors, table for alignment & provide font
colors & size using CSS styles.
5 Develop HTML page named as “newpaper.html” having variety of CO1
HTML semantic elements with background colors, text-colors & size for
figure, table, aside, section, article, header, footer… etc.
6 Apply HTML, CSS and JavaScript to design a simple calculator to perform CO1,
the following operations: sum, product, difference, remainder, quotient, CO3
power, square-root and square.
Develop JavaScript program (with HTML/CSS) for:
7 a) Converting JSON text to JavaScript Object CO1
b) Convert JSON results into a date
c) Converting From JSON To CSV and CSV to JSON
d) Create hash from string using crypto. Create Hash() method
a. Develop a PHP program (with HTML/CSS) to keep track of the
8 CO2
number of visitors visiting the webpage and to display this count of
visitors, with relevant headings.
b. Develop a PHP program (with HTML/CSS) to sort the student
records which are stored in the database using selection sort.
Develop jQuery script (with HTML/CSS) for:
9 a. Appends the content at the end of the existing paragraph and list. CO2
b. Change the state of the element with CSS style using animate() method
c. Change the color of any div that is animated.
Develop a JavaScript program with Ajax (with HTML/CSS) for:
10 a. Use ajax() method (without Jquery) to add the text content from the text CO2
file by sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from the text file
by sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.

Faculty Program Assessment HoD-CSE

Committee
 Lab Manual BCSL504-Web Technology Laboratory

INTRODUCTION TO Web Technology, HTML, CSS & JavaScript

Web Technology

Web technology refers to the means by which computers communicate with each other using
markup languages and multimedia packages. It gives us a way to interact with hosted information,
like websites. Web technology involves the use of hypertext markup language (HTML) and
cascading style sheets (CSS).

Web technology encompasses the tools, protocols, and software used to create, manage, and access
content on the World Wide Web. It includes technologies like HTML, CSS, JavaScript, web servers,
and internet protocols.
Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the Internet. A web browser is used to access
web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and
video on the Internet. Hyperlinked resources on the World Wide Web can be accessed using software
interfaces provided by Web browsers.

Web Technology can be Classified into the following sections:

World Wide Web (WWW):

The World Wide Web is based on several different technologies: Web browsers, Hypertext Markup
Language (HTML), and Hypertext Transfer Protocol (HTTP).

Web Browser:
The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and requests to the server for web documents and services.

Web Server:
Web server is a program which processes the network requests of the users and serves them with
files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).
Web Pages: A webpage is a digital document that is linked to the World Wide Web and viewable
by anyone connected to the internet has a web browser.

Dept. of CSE 1
 Lab Manual BCSL504-Web Technology Laboratory

Web Development:
Web development refers to the building, creating, and maintaining of websites. It includes aspects
such as web design, web publishing, web programming, and database management. It is the creation
of an application that works over the internet i.e. websites.

HTML:
HTML stands for HyperText Markup Language. It is the standard language used to create and
design web pages on the internet. It was introduced by Tim Berners-Lee in 1991 at CERN as a
simple markup language. Since then, it has evolved through versions from HTML 2.0 to HTML5
(the latest 2024 version).

HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the
web pages and Markup language defines the text document within the tag.

HTML consists of a series of elements, HTML elements tell the browser how to display the content,
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.

CSS:

CSS stands for Cascading Style Sheets, CSS describes how HTML elements are to be displayed on
screen, paper, or in other media, CSS saves a lot of work. It can control the layout of multiple web
pages all at once. External style sheets are stored in CSS files. CSS is used to define styles for your
web pages, including the design, layout and variations in display for different devices and screen
sizes.

JavaScript:

JavaScript is a scripting or programming language that allows you to implement complex features
on web pages — every time a web page does more than just sit there and display static information
for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics,
scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

Dept. of CSE 2
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 01

1. Develop the HTML page named as “Myfirstwebpage.html”. Add the following tags with
relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (< b >, < u >, < sub >, < sup > etc.)

PROGRAM
<!DOCTYPE html>
<head>
<title>My First Web Page | CSE</title>
</head>
<body>
<!-- Moving text -->
<marquee>Welcome to CSE</marquee>
<!-- Different heading tags -->
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<!-- Paragraph -->
<p>This is a paragraph demonstrating the use of the paragraph tag in HTML.</p>

<!-- Horizontal line -->

<hr>

Dept. of CSE 3
Lab Manual BCSL504-Web Technology Laboratory

<!-- Line break -->

<p>This is a line of text before the break.<br>This is a line of text after the break.</p>

<!-- Block Quote -->

<blockquote>
This is a blockquote. It is used to display a quotation or excerpt from another source.
</blockquote>

<!-- Pre tag -->

<pre>
This is preformatted text.
It preserves spaces and line breaks.
</pre>

<!-- Different Logical Style tags -->

<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is ^superscript text.</p>
<p>This is _subscript text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <code>inline code</code> text.</p>
</body>

</html>

Dept. of CSE 4
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 5
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 02

2. Develop the HTML page named as “Table.html” to display your class time table.
a) Provide the title as Time Table with table header and table footer, row-span and col-span
etc.
b) Provide various colour options to the cells (Highlight the lab hours and elective hours with
different colors.)
c) Provide color options for rows.

PROGRAM

<!DOCTYPE html>

<head>

<title>Time Table | 5th Sem A Section</title>

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

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

th {
background-color: #f4f4f4;

Dept. of CSE 6
Lab Manual BCSL504-Web Technology Laboratory

color: #333;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:nth-child(odd) {
background-color: #e6f7ff;
}

.lab-hour {
background-color: #ffcccc;
}

.elective-hour {
background-color: #ccffcc;
}

.highlight {
font-weight: bold;
color: #d63384;
}

tfoot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>

<body>

<h1 style="text-align: center;"> Class Time Table</h1>

<table>
<thead>
<tr>

Dept. of CSE 7
Lab Manual BCSL504-Web Technology Laboratory

<th>Day/Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>Tea Break</th>
<th>11:15 - 12:15</th>
<th>12:15 - 1:15</th>
<th>Lunch Break</th>
<th>2:15 - 3:15</th>
<th>3:15 - 4:15</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>CN</td>
<td>TOC</td>
<td rowspan="6" class="highlight">Tea Break</td>
<td>CN LAB B1 / WT LAB B2</td>
<td> CN LAB B1 / WT LAB B2</td>
<td rowspan="6" class="highlight">Break</td>
<td>Physical Activities</td>
<td>Physical Activities</td>
</tr>
<tr>
<td>Tuesday</td>
<td>USP</td>
<td>RM&IPR </td>
<td>SE&PM</td>
<td>TOC </td>
<td>Skill Lab </td>
<td>Skill Lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td>SE&PM</td>
<td>TOC</td>
<td>RM&IPR</td>
<td>EVS Studies</td>

Dept. of CSE 8
Lab Manual BCSL504-Web Technology Laboratory

<td>CN Lab B2 / WT Lab B3</td>

<td> CN Lab B2 / WT Lab B3</td>
</tr>
<tr>
<td>Thursday</td>
<td>SE&PM</td>
<td>CN</td>
<td>USP</td>
<td>RM&IPR</td>
<td>Mini-Project Work</td>
<td>Library Slot / Remedial Class</td>
</tr>
<tr>
<td>Friday</td>
<td>CN</td>
<td>RM&IPR</td>
<td>TOC</td>
<td>USP</td>
<td> CN Lab B3 / WT Lab B1</td>
<td> CN Lab B3 / WT Lab B1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9">End of Timetable</td>
</tr>
</tfoot>
</table>

</body>

</html>

Dept. of CSE 9
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 10
 Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 03

3. Develop an external style sheet named as “style.css” and provide different styles for h2, h3, hr,
p, div, span, time, img & a tags. Apply different CSS selectors for tags and demonstrate the
significance of each.
Note: make two file one is style.css and other is index.html then copy and paste the below code
for different file.

index.html

PROGRAM

<!DOCTYPE html>

<head>

<title>Styled HTML Page | CSE</title>

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

</head>

<body>

<h2>Main Heading</h2>

<h3>Subheading</h3>

<hr>

<p>This is a paragraph demonstrating the basic text styling applied by CSS.</p>

<div>

This is a styled <strong>div</strong> element with padding and a light border. Inside the div,

we can also use

<span>span elements</span> that have their own styles, like this bold and orange text.

</div>

Dept. of CSE 11
 Lab Manual BCSL504-Web Technology Laboratory

<p>Current time: <time>10:30 AM</time></p>

<img src="https://vtucode.in/wp-content/uploads/2024/08/Web-Technology-Lab.jpg"

alt="Placeholder Image">

<p>Visit <a href="https://vtucode.in">vtucode.in</a> to learn more about our services.</p>

<p class="highlight">This paragraph is highlighted with a yellow background.</p>

<p class="center">This text is centered using a class selector.</p>

<p id="special-paragraph">This is a special paragraph with unique styles applied through an ID

selector.</p>

</body>

</html>

Style.CSS

*{

margin: 0;

padding: 0;

box-sizing: border-box;

h2 {

color: #2c3e50;

font-size: 2em;

margin-bottom: 10px;

h3 {

color: #34495e;

Dept. of CSE 12
Lab Manual BCSL504-Web Technology Laboratory

font-size: 1.5em;

margin-bottom: 8px;

hr {

border: 0;

height: 2px;

background-color: #e74c3c;

margin: 20px 0;

p{

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

line-height: 1.6;

margin: 10px 0;

div {

padding: 15px;

border: 1px solid #bdc3c7;

background-color: #ecf0f1;

span {

color: #e67e22;

font-weight: bold;

Dept. of CSE 13
Lab Manual BCSL504-Web Technology Laboratory

time::before {

content: ' ';

color: #16a085;

img {

margin-left: 15px;

height: 300px;

width: 400px;

border-radius: 8px;

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

max-width: 100%;

a{

text-decoration: none;

color: #ea0e4c;

a:hover {

color: #6200ee;

text-decoration: underline;

.highlight {

background-color: yellow;

padding: 3px;
Dept. of CSE 14
Lab Manual BCSL504-Web Technology Laboratory

.center {

text-align: center;

#special-paragraph {

font-size: 1.2em;

color: #8e44ad;

background-color: #f5f5f5;

padding: 10px;

border-left: 5px solid #8e44ad;

h2,

h3,

p{

margin-left: 20px;

Dept. of CSE 15
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 16
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 04

4. Develop HTML page named as “registration.html” having variety of HTML input elements
with background colors, table for alignment & provide font colors & size using CSS styles.

PROGRAM

<!DOCTYPE html>
<head>
<title>Registration Form | Event </title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 20px;
}
h2 {
text-align: center;
color: #333;

Dept. of CSE 17
Lab Manual BCSL504-Web Technology Laboratory

margin: 0;
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
}

label {
font-size: 14px;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.gender-options {
display: flex;
gap: 10px;
align-items: center;
}
input[type="submit"],
input[type="reset"] {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
Dept. of CSE 18
Lab Manual BCSL504-Web Technology Laboratory

font-size: 16px;
flex: 1;
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
}
input[type="reset"] {
background-color: #f44336;
color: white;
}
.form-group textarea {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form action="#" method="post">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
Dept. of CSE 19
Lab Manual BCSL504-Web Technology Laboratory

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

</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</div>
<div class="form-group">
<label>Gender:</label>
<div class="gender-options">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
</div>
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select>
</div>
<div class="form-group">
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4"></textarea>
</div>
<div class="button-group">
<input type="submit" value="Register">
<input type="reset" value="Reset">
Dept. of CSE 20
Lab Manual BCSL504-Web Technology Laboratory

</div>
</form>
</div>
</body>

</html>

OUTPUT

Dept. of CSE 21
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 05

5. Develop HTML page named as “newpaper.html” having variety of HTML semantic

elements with background colors, text-colors & size for figure, table, aside, section, article,
header, footer… etc.
PROGRAM
<!DOCTYPE html>

<head>
<title>Newspaper Page | VTU </title>
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
padding: 20px;
font-family: 'Arial', sans-serif;
color: #000000;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
margin-bottom: 30px;
border-radius: 10px;
align-items: center;
background-color: #7b38f7;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;

Dept. of CSE 22
Lab Manual BCSL504-Web Technology Laboratory

text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header a {
font-size: 25px;
font-weight: 600;
color: #fff;
text-decoration: none;
}
nav {
display: flex;
gap: 20px;
color: #fff;
text-align: center;
}

nav a {
font-size: 18px;
color: #fff;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

.content {
display: flex;
justify-content: space-between;
flex: 1;
margin: auto;
padding: 20px 0;
gap: 20px;
Dept. of CSE 23
Lab Manual BCSL504-Web Technology Laboratory

position: relative;
}

.main-content {
cursor: pointer;
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
background-color: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

aside {
border: 1px solid #ccc;
padding: 20px;
width: 350px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
top: 20px;
color: #333;
right: 0;
margin-left: 20px;
}
.related-news h3 {
text-align: center;
border-radius: 7px;
padding: 8px;
background: #000;
color: #ffffff;
font-size: 1.4em;
Dept. of CSE 24
Lab Manual BCSL504-Web Technology Laboratory

margin-bottom: 15px;
}

.related-news ul {
list-style: outside;
padding: 7px;
margin: 0;
}

.related-news li {
margin-bottom: 12px;
}

.related-news a {
text-decoration: none;
color: #7b38f7;
font-weight: bold;
transition: color 0.3s ease;
}

.related-news a:hover {
text-decoration: underline;
}
footer {
border-radius: 10px;
background-color: #7b38f7;
color: #fff;
padding: 20px;
font-weight: 500;
text-align: center;
margin-top: auto;
font-size: 18px;
}

Dept. of CSE 25
Lab Manual BCSL504-Web Technology Laboratory

article {
transition: all 0.3s ease;
background-color: #fff;
padding: 15px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
border-radius: 7px;
color: #000000;
}

figure {
background-color: #fafafa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
margin: 0;
}

figcaption {
font-size: 0.9em;
color: #666;
}

img {
max-width: 100%;
height: auto;
border-radius: 8px;
}

section {
padding: 20px;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
Dept. of CSE 26
Lab Manual BCSL504-Web Technology Laboratory

section h2 {
color: #fff;
background: #000;
font-size: 24px;
border-radius: 10px;
text-align: center;
padding: 10px;
margin-bottom: 30px;
}

table {
width: 100%;
border-collapse: collapse;
}

caption {
font-size: 18px;
margin-bottom: 10px;
color: #555;
}

thead {
background-color: #007BFF;
color: #fff;
}

th,
td {
padding: 12px;
text-align: left;
}

Dept. of CSE 27
Lab Manual BCSL504-Web Technology Laboratory

th {
font-weight: bold;
}

tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

tbody tr:hover {
background-color: #eaeaea;
}

@media (max-width: 600px) {

th,
td {
padding: 8px;
font-size: 14px;
}
}
caption {
background-color: #d9d9d9;
padding: 10px;
font-weight: bold;
border-bottom: 2px solid #ddd;
border-radius: 8px 8px 0 0;
font-size: 1.1em;
color: #333;
}

section {
margin-top: 40px;
margin-bottom: 50px;
}

Dept. of CSE 28
Lab Manual BCSL504-Web Technology Laboratory

article h2 {
color: #7b38f7;
font-size: 1.3em;
margin-bottom: 12px;
}

article p {
text-align: left;
line-height: 1.2;
margin-top: 10px;
}
article:hover {
background-color: #e7ddfb;
}

@media (max-width: 768px) {

.content {
flex-direction: column;
padding: 10px;
}

aside {
width: 100%;
margin-top: 20px;
position: static;
margin-left: 0;
}

.main-content {
grid-template-columns: 1fr;
}
}
</style>
</head>

Dept. of CSE 29
 Lab Manual BCSL504-Web Technology Laboratory

<body>
<header>
<a href="#">Newspaper</a>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Marketing</a>
<a href="#">Updates</a>
</nav>
</header>

<div class="content">
<main class="main-content">
<article>
<h2>Article Title 1</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the first article. Meet the 110 year-old Sudanese refugee,
Fatima, who is helping other women achieve financial freedom.</p>
</article>

<article>
<h2>Article Title 2</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the second article. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
Dept. of CSE 30
Lab Manual BCSL504-Web Technology Laboratory

</main>
<aside class="related-news">
<h3>Related News</h3>
<ul>
<li><a href="#">Related News 1</a></li>
<li><a href="#">Related News 2</a></li>
<li><a href="#">Related News 3</a></li>
</ul>
</aside>
</div>
<section>
<h2>Recent Posts</h2>
<div>
<table>
<caption>List of Posts</caption>
<thead>
<tr>
<th>Post Title</th>
<th>Date</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>Post 1</td>
<td>2024-08-30</td>
<td>Author 1</td>
</tr>
<tr>
<td>Post 2</td>
<td>2024-08-29</td>
<td>Author 2</td>
</tr>
<tr>
<td>Post 3</td>
Dept. of CSE 31
 Lab Manual BCSL504-Web Technology Laboratory

<td>2024-08-28</td>
<td>Author 3</td>
</tr>
</tbody>
</table>
</div>
</section>

<footer>
<p>© 2024 Newspaper. All rights reserved.</p>
</footer>
</body>
</html>

Dept. of CSE 32
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 33
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 06

6. Apply HTML, CSS and JavaScript to design a simple calculator to perform the following
operations: sum, product, difference, remainder, quotient, power, square-root and square.

PROGRAM

<!DOCTYPE html>

<head>
<title>Simple Calculator </title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.calculator {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 320px;
text-align: center;
}

h1 {
border-radius: 8px;
background: #000;
font-size: 24px;
padding: 10px;
color: #ffffff;
margin-bottom: 30px;
}

input,
select,
button {
width: 100%;
margin: 10px 0;
padding: 12px;
border: 1px solid #0808081d;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}

Dept. of CSE 34
Lab Manual BCSL504-Web Technology Laboratory

#operation {
cursor: pointer;
}

input:focus,
select:focus,
button:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.25);
}

option {
background-color: #fff;
color: #000;
padding: 10px;
border: none;
}

option:hover {
background-color: #f1f1f1;
}

button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
transition: box-shadow 0.3s, transform 0.3s;
}

button:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
}

button:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
}

#result.error {
background: #ffdddd;
border-color: #ff0000;
}

#result.success {
font-size: 17px;
font-weight: 500;
color: #000;
background: #6ef08d38;
border-color: #47e56d;
}

#result {
font-size: 18px;
color: #000000;

Dept. of CSE 35
Lab Manual BCSL504-Web Technology Laboratory

border-radius: 8px;
background: #afffe2;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: opacity 0.5s, transform 0.5s;
opacity: 0;
transform: translateY(-20px);
}

#result.show {
cursor: not-allowed;
opacity: 1;
margin-top: 20px;
padding: 15px;
transform: translateY(0);
}

</style>
</head>

<body>
<div class="calculator">
<h1>Simple Calculator</h1>
<form id="calculator-form">
<input type="number" id="num1" placeholder="Enter first
number" required>
<input type="number" id="num2" placeholder="Enter second
number" required>
<select id="operation" required>
<option value="">Select Operation</option>
<option value="sum">Sum</option>
<option value="product">Product</option>
<option value="difference">Difference</option>
<option value="remainder">Remainder</option>
<option value="quotient">Quotient</option>
<option value="power">Power</option>
<option value="sqrt">Square Root</option>
<option value="square">Square</option>
</select>
<button type="button"
onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>
<script>
function calculate() {
const num1 =
parseFloat(document.getElementById('num1').value);
const num2 =
parseFloat(document.getElementById('num2').value);
const operation =
document.getElementById('operation').value;
let result = '';
let resultClass = 'success';

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

Dept. of CSE 36
Lab Manual BCSL504-Web Technology Laboratory

result = 'Please enter valid numbers.';

resultClass = 'error';
} else {
switch (operation) {
case 'sum':
result = `Sum: ${num1 + num2}`;
break;
case 'product':
result = `Product: ${num1 * num2}`;
break;
case 'difference':
result = `Difference: ${num1 - num2}`;
break;
case 'remainder':
result = `Remainder: ${num1 % num2}`;
break;
case 'quotient':
if (num2 === 0) {
result = 'Cannot divide by zero';
resultClass = 'error';
} else {
result = `Quotient: ${num1 / num2}`;
}
break;
case 'power':
result = `Power: ${Math.pow(num1, num2)}`;
break;
case 'sqrt':
if (num1 < 0 || num2 < 0) {
result = 'Square root is not defined for negative numbers';
resultClass = 'error';
} else {
result = `Square Root of ${num1}:
${Math.sqrt(num1)} <br> Square Root of ${num2}: ${Math.sqrt(num2)}`;
}
break;
case 'square':
result = `Square of ${num1}: ${Math.pow(num1, 2)}
<br> Square of ${num2}: ${Math.pow(num2, 2)}`;
break;
default:
result = 'Please select an operation.';
resultClass = 'error';
}
}

const resultDiv = document.getElementById('result');

resultDiv.innerHTML = result;
resultDiv.classList.remove('show', 'error', 'success');
resultDiv.classList.add(resultClass, 'show');
}

</script>
</body>

</html>

Dept. of CSE 37
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 38
Lab Manual BCSL504-Web Technology Laboratory

Dept. of CSE 39
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 07

7. Develop JavaScript program (with HTML/CSS) for:

a) Converting JSON text to JavaScript Object.
b) Convert JSON results into a date.
c) Converting From JSON To CSV and CSV to JSON.
d) Create hash from string using crypto.createHash() method.

PROGRAM

<!DOCTYPE html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<title>Simple Converter </title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

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

.container {
width: 60%;
margin: 0 auto;
padding: 20px;
}

.head-title h1 {

Dept. of CSE 40
Lab Manual BCSL504-Web Technology Laboratory

font-size: 28px;
padding: 10px;
color: #fff;
margin-bottom: 50px;
}

.head-title {
width: 100%;
background: #000;
text-align: center;
border-radius: 10px;
}

.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
transition: all 0.3s;
overflow: hidden;
}

.section h2 {
color: #000000;
font-size: 20px;
margin-bottom: 15px;
}
textarea {
font-size: 14px;
width: 100%;
height: 120px;
margin-bottom: 15px;
padding: 12px;
border-radius: 8px;
Dept. of CSE 41
Lab Manual BCSL504-Web Technology Laboratory

border: 1px solid #00000022;

box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
background: transparent;
border: 1px solid #00000022;
border-color: #007BFF;
box-shadow: 0 0 12px rgba(0, 123, 255, 0.5);
outline: none;
}
input[type="text"] {
width: calc(100% - 24px);
padding: 12px;
border-radius: 8px;
border: 1px solid #ddd;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 15px;
}

input[type="text"]:focus {
border-color: #007BFF;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
outline: none;
}

button {
display: inline-block;
padding: 15px 15px;
margin: 10px 0;
font-weight: 600;
border: none;
border-radius: 7px;
Dept. of CSE 42
Lab Manual BCSL504-Web Technology Laboratory

background-color: #007BFF;
color: #fff;
cursor: pointer;
font-size: 16px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

button:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007BFF;
}

button:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007BFF;
}
pre {
display: none;
background: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
overflow: auto;
transition: opacity 0.3s ease;
}
.error {
margin-top: 10px;
font-size: 14px;
color: #000;
background: #ffdddd;
border-color: #ff0000;
padding: 10px;
}
.success {
margin-top: 10px;
font-size: 14px;
color: #000;
Dept. of CSE 43
 Lab Manual BCSL504-Web Technology Laboratory

background: #6ef08d38;
border-color: #47e56d;
padding: 10px;
}
.adjust-area {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="head-title">
<h1>Simple Converter</h1>
</div>
<div class="section">
<h2>1. Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder="Enter JSON here..."></textarea>
<button onclick="convertJsonToObject()">Convert JSON</button>
<pre id="jsonOutput" class="output"></pre>
</div>
<div class="section">
<h2>2. Convert JSON Results into Date</h2>
<textarea id="jsonDateInput" placeholder='Enter JSON with date in "yyyy-mm-dd"
format'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>
<pre id="jsonDateOutput" class="output"></pre>
</div>

<div class="section">
<h2>3. Convert JSON to CSV and CSV to JSON</h2>
<textarea id="jsonCsvInput" placeholder="Enter JSON for CSV conversion..."></textarea>
<button onclick="convertJsonToCsv()">JSON to CSV</button>
<pre id="csvOutput" class="output"></pre>
<textarea id="csvInput" placeholder="Enter CSV here..." class="adjust-area"></textarea>
<button onclick="convertCsvToJson()">CSV to JSON</button>
Dept. of CSE 44
Lab Manual BCSL504-Web Technology Laboratory

<pre id="jsonCsvOutput" class="output"></pre>

</div>
<div class="section">
<h2>4. Create Hash from String</h2>
<input type="text" id="hashInput" placeholder="Enter string to hash">
<button onclick="createHash()">Create Hash</button>
<pre id="hashOutput" class="output"></pre>
</div>
</div>

<script>
function showResult(id, text, isSuccess) {
const element = document.getElementById(id);
element.textContent = text;
element.className = isSuccess ? 'success' : 'error';
element.style.display = 'block';
element.style.opacity = '1';
}

function convertJsonToObject() {
const jsonInput = document.getElementById('jsonInput').value;
try {
const jsonObject = JSON.parse(jsonInput);
showResult('jsonOutput', JSON.stringify(jsonObject, null, 2), true);
} catch (error) {
showResult('jsonOutput', 'Invalid JSON', false);
}
}

function convertJsonToDate() {
const jsonDateInput = document.getElementById('jsonDateInput').value;
try {
const data = JSON.parse(jsonDateInput);
if (data.date && !isNaN(new Date(data.date).getTime())) {
const date = new Date(data.date);
Dept. of CSE 45
Lab Manual BCSL504-Web Technology Laboratory

showResult('jsonDateOutput', date.toString(), true);

} else {
showResult('jsonDateOutput', 'Invalid Date Format', false);
}
} catch (error) {
showResult('jsonDateOutput', 'Invalid JSON', false);
}
}

function convertJsonToCsv() {
const jsonInput = document.getElementById('jsonCsvInput').value;
try {
const jsonArray = JSON.parse(jsonInput);
if (Array.isArray(jsonArray) && jsonArray.length > 0) {
const keys = Object.keys(jsonArray[0]);
const csv = [
keys.join(','),
...jsonArray.map(row => keys.map(key => JSON.stringify(row[key])).join(','))
].join('\n');
showResult('csvOutput', csv, true);
} else {
showResult('csvOutput', 'Invalid JSON: Expected an array with objects.', false);
}
} catch (error) {
showResult('csvOutput', 'Invalid JSON', false);
}
}

function convertCsvToJson() {
const csvInput = document.getElementById('csvInput').value;
try {
const lines = csvInput.trim().split('\n');
if (lines.length > 1) {
const keys = lines[0].split(',');
if (keys.length > 0) {
Dept. of CSE 46
 Lab Manual BCSL504-Web Technology Laboratory

const jsonArray = lines.slice(1).map(line => {

const values = line.split(',');
return keys.reduce((obj, key, index) => {
obj[key] = values[index];
return obj;
}, {});
});
showResult('jsonCsvOutput', JSON.stringify(jsonArray, null, 2), true);
} else {
showResult('jsonCsvOutput', 'Invalid CSV: No columns found.', false);
}
} else {
showResult('jsonCsvOutput', 'Invalid CSV: No data found.', false);
}
} catch (error) {
showResult('jsonCsvOutput', 'Invalid CSV', false);
}
}

function createHash() {
const hashInput = document.getElementById('hashInput').value.trim();
if (hashInput.length > 0) {
const hash = CryptoJS.SHA256(hashInput).toString();
showResult('hashOutput', hash, true);
} else {
showResult('hashOutput', 'Input cannot be empty', false);
}
}
</script>
</body>

</html>

Dept. of CSE 47
Lab Manual BCSL504-Web Technology Laboratory

Note: Take input from below box or you can enter you own input make sure format is correct as
per below format to convert.

1. Convert JSON Text to JavaScript Object

{
"name": "Alice",
"age": 30,
"city": "New York"
}

2. Convert JSON Results into Date

{
"date": "2024-09-01"
}

3. Convert JSON to CSV

[
{"name": "Alice", "age": 30, "city": "New York"},
{"name": "Bob", "age": 25, "city": "San Francisco"},
{"name": "Charlie", "age": 35, "city": "Chicago"}
]
4. Convert CSV to JSON
name,age,city
Alice,30,New York
Bob,25,San Francisco
Charlie,35,Chicago

e) Create Hash from String

CSE

Dept. of CSE 48
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 49
Lab Manual BCSL504-Web Technology Laboratory

Dept. of CSE 50
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 08

8 a. Develop a PHP program (with HTML/CSS) to keep track of the number of visitors visiting
the web page and to display this count of visitors, with relevant headings.
Instructions: How to Run?
Create a file name called track.php, copy the below code and paste it and save it.
Copy track.php file and open XAAMP directory if installed else install it
There you‟ll find a folder named “htdocs”.
Inside the “htdocs” folder, paste track.php file.
After then open your XAAMP and start the Apache server.
Open your favorite browser; we recommend using Google Chrome or Mozilla Firefox.
Then, go to the URL “http://localhost/track.php“.

PROGRAM

<?php
$counterFile = "counter.txt";

if (!file_exists($counterFile)) {
file_put_contents($counterFile, "0");
}

$currentCount = file_get_contents($counterFile);

$newCount = $currentCount + 1;

file_put_contents($counterFile, $newCount);
?>

Dept. of CSE 51
Lab Manual BCSL504-Web Technology Laboratory

<!DOCTYPE html>
<html lang="en">
<head>
<title>Visitor Counter </title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
background-color: #f4f4f9;
color: #333;
}
.container {
background: #fff;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin: 0 auto;
width: 60%;
}

h1 {
font-size: 2.5em;
margin: 0;
}
p{
font-size: 1.2em;
color: #555;
}
</style>
Dept. of CSE 52
Lab Manual BCSL504-Web Technology Laboratory

</head>
<body>
<div class="container">
<h1>Welcome to Our Website!</h1>
<p>You are visitor number: <strong><?php echo $newCount; ?></strong></p>
</div>
</body>
</html>

Dept. of CSE 53
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 54
 Lab Manual BCSL504-Web Technology Laboratory

8. B Develop a PHP program (with HTML/CSS) to sort the student records which are stored
in the database using selection sort.
Instructions: How to Run?
Create a database name called students or download and import click here
Create a file name called sort_students.php, copy the below code and paste it and save it.
Copy sort_students.php file and open XAAMP directory if installed else install it click here
There you‟ll find a folder named “htdocs”.
Inside the “htdocs” folder, paste sort_students.php file.
After then open your XAAMP and start the Apache server.
Open your favorite browser; we recommend using Google Chrome or Mozilla Firefox.
Then, go to the URL “http://localhost/sort_students.php“.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "students";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM students";

$result = $conn->query($sql);

$students = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}
}

function selectionSort(&$arr, $key)

Dept. of CSE 55
 Lab Manual BCSL504-Web Technology Laboratory

{
$n = count($arr);
for ($i = 0; $i < $n - 1; $i++) {
$minIndex = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($arr[$j][$key] < $arr[$minIndex][$key]) {
$minIndex = $j;
}
}

$temp = $arr[$i];
$arr[$i] = $arr[$minIndex];
$arr[$minIndex] = $temp;
}
}

selectionSort($students, 'name');
?>

<!DOCTYPE html>

<head>
<title>Sorted Student Records | vtucode</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 20px;
}

h2 {
text-align: center;
color: #4A90E2;
Dept. of CSE 56
Lab Manual BCSL504-Web Technology Laboratory

margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}

th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #4A90E2;
color: white;
text-transform: uppercase;
letter-spacing: 0.03em;
}

tr {
transition: background-color 0.3s ease;
}

tr:hover {
background-color: #f1f1f1;
}

Dept. of CSE 57
Lab Manual BCSL504-Web Technology Laboratory

td {
font-size: 0.9em;
color: #555;
}

@media (max-width: 768px) {

table,
th,
td {
display: block;
width: 100%;
}

th,
td {
box-sizing: border-box;
}

tr {
margin-bottom: 15px;
display: block;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

th {
position: absolute;
top: -9999px;
left: -9999px;
}

td {
border: none;
position: relative;
padding-left: 50%;
Dept. of CSE 58
 Lab Manual BCSL504-Web Technology Laboratory

text-align: right;
}

td:before {
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
color: #4A90E2;
}
}
</style>
</head>

<body>

<h2>Sorted Student Records by Name</h2>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>USN</th>
<th>Branch</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>
Dept. of CSE 59
 Lab Manual BCSL504-Web Technology Laboratory

<tr>
<td data-label="ID"><?php echo htmlspecialchars($student['id']); ?></td>
<td data-label="Name"><?php echo htmlspecialchars($student['name']); ?></td>
<td data-label="USN"><?php echo htmlspecialchars($student['usn']); ?></td>
<td data-label="Branch"><?php echo htmlspecialchars($student['branch']); ?></td>
<td data-label="Email"><?php echo htmlspecialchars($student['email']); ?></td>
<td data-label="Address"><?php echo htmlspecialchars($student['address']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

</body>

</html>

Dept. of CSE 60
 Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Student.sql

-- phpMyAdmin SQL Dump

-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 01, 2024 at 08:01 PM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `students`
--

--
-- Table structure for table `students`
--

CREATE TABLE `students` (

`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`usn` varchar(20) NOT NULL,
`branch` varchar(205) NOT NULL,
`email` varchar(50) NOT NULL,
`address` varchar(300) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Dumping data for table `students`
--

INSERT INTO `students` (`id`, `name`, `usn`, `branch`, `email`, `address`) VALUES
(1, 'Braham Kumar', '1ME21CS001', 'DS', 'braham@gmail.com', 'Nepal'),
(2, 'Aman Kumar', '1ME21CS002', 'CSE', 'aman@gmail.com', 'Chennai'),
(3, 'Sunil Kumar', '1ME21CS003', 'CIVIL', 'sunil@gmail.com', 'Delhi, India'),

Dept. of CSE 61
 Lab Manual BCSL504-Web Technology Laboratory

(4, 'Shubham Kumar', '1ME21CS004', 'CSE', 'shubham@gmail.com', 'Ghaziabad'),

(5, 'Bikash Kumar Singh', '1ME21CS005', 'CSE', 'bikash@gmail.com', 'Mumbai,
India'),
(6, 'Shaoib Akhtar', '1ME21CS006', 'AI&ML', 'shoaib@gmail.com', 'Patna, India'),
(7, 'Shiv Kumar Yadav', '1ME21CS007', 'ECE', 'shiv@gmail.com', 'Lucknow'),
(8, 'Arun Kumar', '1ME21CS008', 'CSE', 'arun@gmail.com', 'Bhopal'),
(9, 'Dipesh Kumar Mandal', '1ME21CS009', 'ISE', 'dipesh@gmail.com', 'Indore'),
(10, 'Shyam Kumar Singh', '1ME21CS010', 'ME', 'shyam@gmail.com', 'Pune');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `students`
--
ALTER TABLE `students`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `students`
--
ALTER TABLE `students`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Name.py

print(5>7)

Dept. of CSE 62
Lab Manual BCSL504-Web Technology Laboratory

Dept. of CSE 63
Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 9

9. Develop jQuery script (with HTML/CSS) for:

a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate() method.
c. Change the color of any div that is animated.

PROGRAM
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>jQuery Example </title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.container:hover {
transform: scale(1.02);
}

Dept. of CSE 64
Lab Manual BCSL504-Web Technology Laboratory

#paragraph {
margin-bottom: 20px;
color: #333;
font-size: 18px;
line-height: 1.5;
}
#list {
margin-bottom: 20px;
list-style: none;
padding: 0;
}

#list li {
background: #e8f0fe;
margin: 5px 0;
padding: 10px;
border-radius: 8px;
transition: background 0.3s;
}

#list li:hover {
background: #d0e2fe;
}
.box {
padding: 0 10px;
width: 100px;
height: 100px;
background-color: #007bff;
margin: 20px auto;
line-height: 100px;
color: white;
text-align: center;
border-radius: 8px;

Dept. of CSE 65
Lab Manual BCSL504-Web Technology Laboratory

transition: all 0.3s ease;

}

button {
padding: 12px 24px;
margin: 10px;
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 16px;
background: #007bff;
color: white;
transition: box-shadow 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
button:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
}

button:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
}
button:active {
background: #004494;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container">
<p id="paragraph">This is an existing paragraph.</p>
<ul id="list">
<li>List item 1</li>

Dept. of CSE 66
Lab Manual BCSL504-Web Technology Laboratory

<li>List item 2</li>

</ul>
<div class="box" id="box">Animate me!</div>
<button id="appendButton">Append Content</button>
<button id="animateButton">Animate Box</button>
</div>

<script>
$(document).ready(function () {

$("#appendButton").click(function () {
$("#paragraph").append(" Appended text.");
$("#list").append("<li>New appended list item</li>");
});
$("#animateButton").click(function () {

$("#box").stop(true, true).css({
width: "100px",
height: "100px",
opacity: 1,
backgroundColor: "blue"
}).animate({
width: "200px",
height: "200px",
opacity: 0.5
}, 1000, function () {
$(this).css("background-color", "green");
});
});
});
</script>
</body>
</html>

Dept. of CSE 67
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 68
 Lab Manual BCSL504-Web Technology Laboratory

LAB PROGRAM 10

10. Develop a JavaScript program with Ajax (with HTML/CSS) for:

a) Use ajax() method (without Jquery) to add the text content from the text file by sending ajax
request.
b) Use ajax() method (with Jquery) to add the text content from the text file by sending ajax
request.
c) Illustrate the use of getJSON() method in jQuery.
d) Illustrate the use of parseJSON() method to display JSON values.

Note: Create two separate file within the same folder one is textfile.txt and other data.json then
copy below text for the both separate file and paste it save it.

textfile.txt

hi this is example text...

data.json

{"name":"John Doe","age":30,"city":"New
York","skills":["JavaScript","React","Node.js"],"address":{"street":"123 Elm
Street","zipcode":"10001"},"projects":[{"name":"Website
Redesign","year":2023,"technologies":["HTML","CSS","JavaScript"]},{"name":"Mobile
App","year":2024,"technologies":["React Native","Expo"]}]}

PROGRAM
<!DOCTYPE html>

<head>
<title>AJAX Examples | vtucode</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;

Dept. of CSE 69
Lab Manual BCSL504-Web Technology Laboratory

background-color: #f4f4f9;
}

h1 {
text-align: center;
color: #333;
padding: 20px 0;
}

#content {
flex-direction: column;
display: flex;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
display: inline-block;
padding: 10px 15px;
margin: 12px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: box-shadow 0.3s;
}

button:hover {
Dept. of CSE 70
Lab Manual BCSL504-Web Technology Laboratory

box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;

}

button:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
}
#output {
display: none;
margin-top: 20px;
padding: 10px;
border-radius: 5px;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
}

#output.plain-ajax {
background-color: #f0f8ff;
border: 1px solid #b0c4de;
}

#output.jquery-ajax {
background-color: #f5fffa;
border: 1px solid #98fb98;
}

#output.jquery-json {
background-color: #fffaf0;
border: 1px solid #ffd700;
}

#output.parse-json {
background-color: #fff0f5;
border: 1px solid #ff69b4;
}
Dept. of CSE 71
 Lab Manual BCSL504-Web Technology Laboratory

</style>
</head>

<body>
<h1>AJAX Examples</h1>
<div id="content">
<button id="plain-ajax-btn">Load Text (Plain AJAX)</button>
<button id="jquery-ajax-btn">Load Text (jQuery AJAX)</button>
<button id="jquery-json-btn">Load JSON (jQuery getJSON)</button>
<button id="parse-json-btn">Load and Parse JSON (jQuery get)</button>
<div id="output"></div>
</div>

<script>

function showOutput(className) {
const output = document.getElementById('output');
output.className = className;
output.style.display = 'block';
}

document.getElementById('plain-ajax-btn').addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'textfile.txt', true);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById('output').innerText = xhr.responseText;
} else {
document.getElementById('output').innerText = 'Error loading file.';
}
showOutput('plain-ajax');
};
xhr.send();
});

Dept. of CSE 72
Lab Manual BCSL504-Web Technology Laboratory

$('#jquery-ajax-btn').on('click', function () {
$.ajax({
url: 'textfile.txt',
method: 'GET',
success: function (data) {
$('#output').text(data);
},
error: function () {
$('#output').text('Error loading file.');
}
}).always(function () {
showOutput('jquery-ajax');
});
});

$('#jquery-json-btn').on('click', function () {
$.getJSON('data.json')
.done(function (data) {
$('#output').text(JSON.stringify(data, null, 2));
})
.fail(function () {
$('#output').text('Error loading JSON file.');
})
.always(function () {
showOutput('jquery-json');
});
});

$('#parse-json-btn').on('click', function () {
$.get('data.json')
.done(function (data) {
try {
let jsonData;

Dept. of CSE 73
Lab Manual BCSL504-Web Technology Laboratory
if (typeof data === 'string') {

Dept. of CSE 74
 Lab Manual BCSL504-Web Technology Laboratory

jsonData = JSON.parse(data);
} else {
jsonData = data;
}
$('#output').text(JSON.stringify(jsonData, null, 2));
} catch (e) {
$('#output').text('Error parsing JSON: ' + e.message);
}
})
.fail(function () {
$('#output').text('Error loading JSON file.');
})
.always(function () {
showOutput('parse-json');
});
});

</script>
</body>

</html>

Dept. of CSE 75
Lab Manual BCSL504-Web Technology Laboratory

OUTPUT

Dept. of CSE 76