FULL STACK DEVELOPMENT

L T P C
II Year II Semester 0 1 2 2

FULL STACK DEVELOPMENT – 1

(SKILL ENHANCEMENT COURSE)

Course Objectives:
The main objectives of the course are to x Make use of HTML elements and their attributes for
designing static web pages x Build a web page by applying appropriate CSS styles to HTML elements x
Experiment with JavaScript to develop dynamic web pages and validate forms

Experiments covering the Topics:

x Lists, Links and Images x HTML Tables, Forms and Frames x HTML 5 and Cascading Style Sheets, Types
of CSS x Selector forms x CSS with Color, Background, Font, Text and CSS Box Model x Applying
JavaScript - internal and external, I/O, Type Conversion x JavaScript Conditional Statements and Loops,
Pre-defined and User-defined Objects x JavaScript Functions and Events x Node.js

Sample Experiments:

1. Lists, Links and Images

a. Write a HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists and ordered list in an unordered list and
definition lists.
b. Write a HTML program, to explain the working of hyperlinks using <a> tag and href, target Attributes.
c. Create a HTML document that has your image and your friend’s image with a specific height and width.
Also when clicked on the images it should navigate to their respective profiles.
d. Write a HTML program, in such a way that, rather than placing large images on a page, the preferred
technique is to use thumbnails by setting the height and width parameters to something like to 100*100
pixels. Each thumbnail image is also a link to a full sized version of the image. Create an image gallery
using this technique

2. HTML Tables, Forms and Frames

a. Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>, <th>, <td> and
attributes: border, rowspan, colspan).

b. Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use <caption>
tag to set the caption to the table & also use cell spacing, cell padding, border, rowspan, colspan etc.).
c. Write a HTML program, to explain the working of forms by designing Registration form. (Note: Include
text field, password field, number field, date of birth field, checkboxes, radio buttons, list boxes using
<select>&<option> tags, <text area> and two buttons ie: submit and reset. Use tables to provide a better
view).
d. Write a HTML program, to explain the working of frames, such that page is to be divided into 3 parts on
either direction. (Note: first frame image, second frame paragraph, third frame hyperlink. And also make
sure of using “no frame” attribute such that frames to be fixed).

1|Page
FULL STACK DEVELOPMENT
3. HTML 5 and Cascading Style Sheets, Types of CSS
a. Write a HTML program, that makes use of <article>, <aside>, <figure>, <figcaption>, <footer>, <header>,
<main>, <nav>, <section>, <div>, <span> tags.
b. Write a HTML program, to embed audio and video into HTML web page.
c. Write a program to apply different types (or levels of styles or style specification formats) - inline, internal,
external styles to HTML elements. (identify selector, property and value).

4. Selector forms
a. Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal) ii. Combinator selector (descendant, child,
adjacent sibling, general sibling) iii. Pseudo-class selector iv. Pseudo-element selector v. Attribute
selector

5. CSS with Color, Background, Font, Text and CSS Box Model
a. Write a program to demonstrate the various ways you can reference a color in CSS.
b. Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The
image should remain in place when the user scrolls up or down.
c. Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment
d. Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding

6. Applying JavaScript - internal and external, I/O, Type Conversion

a. Write a program to embed internal and external JavaScript in a web page.
b. Write a program to explain the different ways for displaying output.
c. Write a program to explain the different ways for taking input.
d. Create a webpage which uses prompt dialogue box to ask a voter for his name and age. Display the
information in table format along with either the voter can vote or not

7. Java Script Pre-defined and User-defined Objects

a. Write a program using document object properties and methods.
b. Write a program using window object properties and methods.
c. Write a program using array object properties and methods.
d. Write a program using math object properties and methods.
e. Write a program using string object properties and methods.
f. Write a program using regex object properties and methods.
g. Write a program using date object properties and methods.
h. Write a program to explain user-defined object by using properties, methods, accessors, constructors and
display.

8. Java Script Conditional Statements and Loops

a. Write a program which asks the user to enter three integers, obtains the numbers from the user and outputs
HTML text that displays the larger number followed by the words “LARGER NUMBER” in an information
message dialog. If the numbers are equal, output HTML text as “EQUAL NUMBERS”.
b. Write a program to display week days using switch case.
c. Write a program to print 1 to 10 numbers using for, while and do-while loops.
2|Page
FULL STACK DEVELOPMENT
d. Write aprogram to print data in object using for-in, for-each and for-of loops
e. Develop a program to determine whether a given number is an ‘ARMSTRONG NUMBER’ or not. [Eg:
153 is an Armstrong number, since sum of the cube of the digits is equal to the number i.e.,13 + 53+ 33 =
153]
f. Write a program to display the denomination of the amount deposited in the bank in terms of 100’s, 50’s,
20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the output should be 1-100’s, 1-50’s, 1- 10’s,
1-2’s & 1-1’s)

9. Java Script Functions and Events

a. Design a appropriate function should be called to display
i. Factorial of that number ii. Fibonacci series up to that number iii.
Prime numbers up to that number iv. Is it palindrome or not
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime, and Palindrome.
When a button is pressed an appropriate function should be called to display
i. Factorial of that number ii. Fibonacci series up to that number iii.
Prime numbers up to that number
iv. Is it palindrome or not
c. Write a program to validate the following fields in a registration page
i. Name (start with alphabet and followed by alphanumeric and the
length should not be less than 6 characters)
ii. Mobile (only numbers and length 10 digits) iii. E-mail (should
contain format like [email protected])

Text Books:
1. Programming the World Wide Web, 7th Edition, Robet W Sebesta, Pearson, 2013.
2. Web Programming with HTML5, CSS and JavaScript, John Dean, Jones & Bartlett Learning, 2019
(Chapters 1-11).
3. Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node, Vasan
Subramanian, 2nd edition, APress, O’Reilly.

Web Links:

1. https://www.w3schools.com/html
2. https://www.w3schools.com/css
3. https://www.w3schools.com/js/
4. https://www.w3schools.com/nodejs

3|Page
FULL STACK DEVELOPMENT

Experiments

1. a ) Write a HTML program, to explain the working of lists.

Aim:
The aim of this project is to demonstrate the different types of lists available in HTML and their usage.
Lists are essential for organizing and structuring information in web pages. This project will help
learners understand:

1. Ordered Lists (<ol>) – Used for displaying items in a sequential or ranked order.
2. Unordered Lists (<ul>) – Used for listing items without any specific order, often with bullet
points.
3. Definition Lists (<dl>) – Used for presenting terms and their corresponding descriptions.

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Lists Example</title>
</head>
<body>
<h1>Understanding Lists in HTML</h1>

<h2>1. Ordered List</h2>

<p>An ordered list uses numbers to list items sequentially.</p>
<ol>
<li>Wake up early</li>
<li>Have breakfast</li>
<li>Go to work</li>
<li>Exercise in the evening</li>
<li>Sleep on time</li>
</ol>

<h2>2. Unordered List</h2>

<p>An unordered list uses bullet points to list items.</p>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Mangoes</li>
<li>Grapes</li>
</ul>

<h2>3. Definition List</h2>

<p>A definition list consists of terms and their descriptions.</p>
<dl>
<dt><strong>HTML</strong></dt>
<dd>HyperText Markup Language - used for structuring web pages.</dd>

<dt><strong>CSS</strong></dt>

4|Page
FULL STACK DEVELOPMENT
<dd>Cascading Style Sheets - used for styling web pages.</dd>

<dt><strong>JavaScript</strong></dt>
<dd>A programming language used to add interactivity to web pages.</dd>
</dl>
</body>
</html>

Output :

1. b) Write a HTML program, to explain the working of hyperlinks using <a> tag
and href, target Attributes.

Aim :
The aim of this project is to demonstrate the usage of hyperlinks (<a> tag) in HTML and how they
function with different attributes. Hyperlinks are essential for navigation in web pages, allowing users
to move between different web pages or sections within the same page.

This project helps learners understand:

1. The <a> Tag – Used to create hyperlinks in HTML.
2. href Attribute – Specifies the URL of the destination page.
3. target Attribute – Controls how the link opens (same tab, new tab, or new window).
4. Internal Links – Navigation within the same page.
5. External Links – Navigation to other websites.
6. Email Links (mailto:) – Opens an email client for sending emails.

5|Page
FULL STACK DEVELOPMENT

Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hyperlinks in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
}
a {
display: block;
margin: 10px 0;
color: blue;
text-decoration: none;
font-size: 18px;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Understanding Hyperlinks in HTML</h1>

<h2>1. Basic Hyperlink</h2>

<p>Click the link below to visit Google:</p>
<a href="https://www.google.com">Visit Google</a>

<h2>2. Open Link in a New Tab</h2>

<p>Click the link below to visit Wikipedia in a new tab:</p>
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>

<h2>3. Open Link in the Same Tab</h2>

<p>Click the link below to visit YouTube in the same tab:</p>
<a href="https://www.youtube.com" target="_self">Visit YouTube</a>

<h2>4. Open Link in a New Window</h2>

<p>Click the link below to open GitHub in a new window:</p>
<a href="https://www.github.com" target="_blank">Visit GitHub</a>

<h2>5. Email Link</h2>

<p>Click the link below to send an email:</p>
<a href="mailto:[email protected]">Send Email</a>

<h2>6. Internal Linking</h2>

<p>Click below to go to the About Us section:</p>
<a href="#about">Go to About Us</a>

<h2 id="about">About Us Section</h2>

<p>This is an internal section of the same page.</p>
</body>
</html>

Output :

6|Page
FULL STACK DEVELOPMENT

1. C) The aim of this project is to demonstrate the creation of profile pages using
HTML and how images can be used as clickable hyperlinks to navigate between
different web pages.
Through this project, learners will understand:
1. Using the <img> tag to display images with a specific height and width.
2. Creating hyperlinks (<a> tag) around images to make them clickable.
3. Navigating between multiple HTML pages within a website.
4. Styling elements using CSS to improve visual presentation.
5. Implementing a simple webpage layout for user-friendly navigation.

Code :
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profile Images with Hyperlinks</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.profile {
display: inline-block;
margin: 20px;

7|Page
FULL STACK DEVELOPMENT
}
.profile img {
width: 200px;
height: 200px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.profile img:hover {
transform: scale(1.1);
}
h2 {
font-size: 20px;
}
</style>
</head>
<body>
<h1>My Profile and My Friend's Profile</h1>

<div class="profile">
<h2>My Profile</h2>
<a href="./my-profile.html" target="_blank">
<img
src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
alt="My Profile Picture"
/>
</a>
</div>

<div class="profile">
<h2>Friend Profile</h2>
<a href="./friend-profile.html" target="_blank">
<img
src="https://media.istockphoto.com/id/1136413215/photo/young-man-at-street-
market.jpg?s=612x612&w=0&k=20&c=obnaR5III0jRxHKd4ZPl3LRC2pI792KbHYR2eBzKKe8="
alt="Friend's Profile Picture"
/>
</a>
</div>
</body>
</html>

My-profile.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Profile</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.profile-container {
width: 50%;
margin: auto;

8|Page
FULL STACK DEVELOPMENT
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
h1 {
color: #333;
}
p {
font-size: 18px;
}
a {
text-decoration: none;
color: white;
background: #007bff;
padding: 10px 15px;
border-radius: 5px;
display: inline-block;
margin-top: 10px;
}
a:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="profile-container">
<h1>My Profile</h1>
<img
src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
alt="My Profile Picture"
/>
<p><strong>Name:</strong> Sai M</p>
<p><strong>Role:</strong> Junior Java Full Stack Trainer</p>
<p><strong>Company:</strong> RVIT.edu.in</p>
<p><strong>Location:</strong> Guntur, India</p>
<a href="home.html">Back to Home</a>
</div>
</body>
</html>

Friend-profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Friend's Profile</title>
<style>body {
font-family: Arial, sans-serif;

text-align: center;
margin: 50px;
}

9|Page
FULL STACK DEVELOPMENT
.profile-container {
width: 50%;
margin: auto;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
h1 {
color: #333;
}
p {
font-size: 18px;
}
a {
text-decoration: none;
color: white;
background: #28a745;
padding: 10px 15px;
border-radius: 5px;
display: inline-block;
margin-top: 10px;
}
a:hover {
background: #218838;
}
</style>
</head>
<body>
<div class="profile-container">
<h1>Friend's Profile</h1>
<img
src="https://media.istockphoto.com/id/1136413215/photo/young-man-at-street-
market.jpg?s=612x612&w=0&k=20&c=obnaR5III0jRxHKd4ZPl3LRC2pI792KbHYR2eBzKKe8="
alt="Friend's Profile Picture"
/>
<p><strong>Name:</strong> John Doe</p>
<p><strong>Role:</strong> Software Developer</p>
<p><strong>Company:</strong> Tech Solutions</p>
<p><strong>Location:</strong> Bangalore, India</p>
<a href="home.html">Back to Home</a>
</div>
</body>
</html>

Output :

10 | P a g e
FULL STACK DEVELOPMENT

1.D) Write a HTML program, in such a way that, rather than placing large
images on a page, the preferred technique is to use thumbnails by setting the
height and width parameters to something like to 100*100 pixels. Each
thumbnail image is also a link to a full sized version of the image. Create an
image gallery using this technique

Aim :

11 | P a g e
FULL STACK DEVELOPMENT
The aim of this project is to demonstrate the use of HTML elements such as images (<img>),
hyperlinks (<a>), and attributes like src, href, target, width, and height to create an interactive image
gallery with thumbnail previews.

This project helps in:

➢ Understanding how to use absolute and relative image paths in HTML.
➢ Implementing thumbnails to optimize page load speed while linking to full-sized images.
➢ Using hyperlinks to navigate to profile pages when clicking on images.
➢ Enhancing user experience by making a structured and visually appealing gallery.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profile Image Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
h1 {
color: #333;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
margin: 10px;
display: inline-block;
text-decoration: none;
}
.gallery img {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>Profile Image Gallery</h1>

<div class="gallery">

<a href="https://example.com/profile1-large.jpg" target="_blank">

<img
src="https://randomuser.me/api/portraits/men/1.jpg"

12 | P a g e
FULL STACK DEVELOPMENT
alt="Person 1"
/>
</a>
<a href="https://example.com/profile2-large.jpg" target="_blank">
<img
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Person 2"
/>
</a>
<a href="https://example.com/profile3-large.jpg" target="_blank">
<img
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Person 3"
/>
</a>
<a href="https://example.com/profile4-large.jpg" target="_blank">
<img
src="https://randomuser.me/api/portraits/women/4.jpg"
alt="Person 4"
/>
</a>
<a href="https://example.com/profile5-large.jpg" target="_blank">
<img
src="https://randomuser.me/api/portraits/men/5.jpg"
alt="Person 5"
/>
</a>
</div>
</body>
</html>

Output :

2a ) Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>, <th>,
<td> and attributes: border, rowspan, colspan).

Aim :
The aim of this project is to demonstrate the working of tables in HTML using various table-related tags
and attributes. This project helps in understanding how to structure and present tabular data efficiently by
utilizing:
• <table> for creating tables
• <tr> for defining table rows
13 | P a g e
FULL STACK DEVELOPMENT
• <th> for table headers
• <td> for table data
• Attributes like border, cellpadding, cellspacing, rowspan, and colspan for improving table
appearance and functionality

Table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Table Example with Attributes</title>
</head>
<body>
<h2 align="center">Student Timetable</h2>

<table
border="2"
cellpadding="10"
cellspacing="0"
align="center"
width="70%"
>
<tr bgcolor="#f4a261">
<th rowspan="2">Day</th>
<th colspan="2">Time</th>
<th rowspan="2">Subject</th>
</tr>
<tr bgcolor="#f4a261">
<th>Start</th>
<th>End</th>
</tr>
<tr bgcolor="#f8e1d9">
<td>Monday</td>
<td>9:00 AM</td>
<td>10:30 AM</td>
<td>Mathematics</td>
</tr>
<tr bgcolor="#f8e1d9">
<td>Tuesday</td>
<td>10:00 AM</td>
<td>11:30 AM</td>
<td>Physics</td>
</tr>
<tr bgcolor="#f8e1d9">
<td rowspan="2">Wednesday</td>
<td>8:30 AM</td>
<td>9:30 AM</td>
<td>English</td>
</tr>
<tr bgcolor="#f8e1d9">
<td>10:00 AM</td>
<td>11:30 AM</td>
<td>Chemistry</td>
</tr>
</table>
</body>

14 | P a g e
FULL STACK DEVELOPMENT
</html>

Output :

2b). Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use
<caption> tag to set the caption to the table & also use cell spacing, cell padding, border, rowspan,
colspan etc.).

Aim of the Project: Employee Work Schedule Using HTML Tables

The aim of this project is to demonstrate the use of HTML tables for organizing and presenting structured
data efficiently. The project focuses on creating an Employee Work Schedule, utilizing various table tags
(<table>, <tr>, <th>, <td>) and attributes such as border, rowspan, colspan, cellpadding, cellspacing,
and caption.

By implementing this table, users will understand how to:

✔ Design structured tabular data for real-world applications.
✔ Use rowspan and colspan to merge cells for better organization.
✔ Apply styling attributes like background color and alignment for improved readability.
✔ Implement caption and cell spacing for enhanced presentation.

Table1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Employee Work Schedule</title>
</head>
<body>
<h2 align="center">Employee Work Schedule</h2>

<table
border="2"

cellpadding="10"
cellspacing="0"
align="center"

15 | P a g e
FULL STACK DEVELOPMENT
width="80%"
>
<caption>
<b>Weekly Employee Work Schedule</b>
</caption>

<!-- Table Header -->

<tr bgcolor="#4CAF50" style="color: white">
<th rowspan="2">Day</th>
<th rowspan="2">Employee Name</th>
<th colspan="2">Work Hours</th>
<th rowspan="2">Department</th>
<th rowspan="2">Project</th>
</tr>
<tr bgcolor="#4CAF50" style="color: white">
<th>Start</th>
<th>End</th>
</tr>

<!-- Monday -->

<tr bgcolor="#f2f2f2">
<td rowspan="2">Monday</td>
<td>John Doe</td>
<td>9:00 AM</td>
<td>5:00 PM</td>
<td>IT</td>
<td>Web Development</td>
</tr>
<tr bgcolor="#f2f2f2">
<td>Jane Smith</td>
<td>10:00 AM</td>
<td>6:00 PM</td>
<td>HR</td>
<td>Recruitment</td>
</tr>

<!-- Tuesday -->

<tr bgcolor="#e6f7ff">
<td>Tuesday</td>
<td>Michael Johnson</td>
<td>8:00 AM</td>
<td>4:00 PM</td>
<td>Finance</td>
<td>Budget Planning</td>
</tr>

<!-- Wednesday -->

<tr bgcolor="#f2f2f2">
<td rowspan="2">Wednesday</td>
<td>Emily Davis</td>
<td>9:00 AM</td>
<td>5:00 PM</td>
<td rowspan="2">IT</td>
<td rowspan="2">Software Testing</td>
</tr>
<tr bgcolor="#f2f2f2">
<td>Robert Brown</td>
<td>10:00 AM</td>
<td>6:00 PM</td>
</tr>

16 | P a g e
FULL STACK DEVELOPMENT

<!-- Thursday -->

<tr bgcolor="#e6f7ff">
<td>Thursday</td>
<td colspan="5" align="center"><b>Team Meeting & Training</b></td>
</tr>

<!-- Friday -->

<tr bgcolor="#f2f2f2">
<td>Friday</td>
<td>Sarah Wilson</td>
<td>9:30 AM</td>
<td>5:30 PM</td>
<td>Marketing</td>
<td>Campaign Planning</td>
</tr>
</table>
</body>
</html>

Output :

2c ) Write a HTML program, to explain the working of forms by designing Registration

form. (Note: Include text field, password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and two
buttons ie: submit and reset. Use tables to provide a better view).

Aim of the Project: Registration Form Using HTML

The aim of this project is to demonstrate the use of HTML forms for designing a structured and user-
friendly Registration Form. The project focuses on utilizing various form elements such as text fields,
password fields, checkboxes, radio buttons, dropdown lists, text areas, and buttons.
This project helps in understanding:
✔ How to create and structure a form using HTML.

✔Therole of different form elements for collecting user data.

17 | P a g e
FULL STACK DEVELOPMENT
✔ The use of attributes like required, type, name, placeholder, etc.
✔ Organizing form fields in a table for a better visual presentation.

Register.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 50%;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}
h2 {
text-align: center;
color: #333;
}
table {
width: 100%;
}
td {
padding: 10px;
}
input,
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"],
input[type="reset"] {
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
padding: 10px;
}
input[type="reset"] {
background-color: #f44336;
}
</style>
</head>
<body>
<div class="container">

18 | P a g e
FULL STACK DEVELOPMENT
<h2>Registration Form</h2>
<form action="#" method="post">
<table border="1" cellspacing="5" cellpadding="10">
<tr>
<td><label for="name">Full Name:</label></td>
<td>
<input
type="text"
id="name"
name="name"
style="width: 90%"
required
/>
</td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td>
<input
type="email"
id="email"
name="email"
style="width: 90%"
required
/>
</td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>
<input
type="password"
id="password"
name="password"
style="width: 90%"
required
/>
</td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td>
<input
type="number"
id="phone"
name="phone"
style="width: 90%"
required
/>
</td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td>
<input type="date" id="dob" name="dob" style="width: 90%" />
</td>
</tr>
<tr>
<td>Gender:</td>
<td>

19 | P a g e
FULL STACK DEVELOPMENT
<input type="radio" name="gender" value="male" id="male" />
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female" />
<label for="female">Female</label>
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobby" value="reading" /> Reading
<input type="checkbox" name="hobby" value="sports" /> Sports
<input type="checkbox" name="hobby" value="music" /> Music
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" style="width: 90%">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>
</td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td>
<textarea
id="address"
name="address"
style="width: 90%"
rows="4"
></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Register" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

Output :

20 | P a g e
FULL STACK DEVELOPMENT

2d) Write a HTML program, to explain the working of frames, such that page is to be
divided into 3 parts on either direction. (Note: first frame image, second frame paragraph,
third frame hyperlink. And also make sure of using “no frame” attribute such that
frames to be fixed).

Aim of the Project: Understanding Frames in HTML

The aim of this project is to demonstrate the working of frames in HTML by dividing a webpage into
three sections using the <frameset> tag. This project helps in understanding:
✔ How to divide a webpage into multiple frames.
✔ How to display different types of content (images, text, hyperlinks) in separate sections.
✔ The use of attributes like rows, cols, border, and name to structure frames efficiently.
✔ The importance of the <noframes> tag for browsers that do not support frames.

Code :
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Example</title>
</head>
<frameset rows="30%, 40%, 30%" border="2">
<frame src="image.html" name="imageFrame">
<frame src="paragraph.html" name="paragraphFrame">
<frame src="link.html" name="linkFrame">
<noframes>
<body>
<p>Your browser does not support frames. Please update your browser.</p>
</body>
</noframes>
</frameset>
</html>

21 | P a g e
FULL STACK DEVELOPMENT
image.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Frame</title>
</head>
<body>
<h2>Image Frame</h2>
<img
src="https://rvit.edu.in/img/RVIT%20building3.jpg"
alt="Sample Image"
width="400"
height="200"
/>
</body>
</html>

link.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hyperlink Frame</title>
</head>
<body>
<h2>Hyperlink Frame</h2>
<p>Click the link below to visit a webpage:</p>
<a href="https://www.example.com" target="_blank">Visit Example Website</a>
</body>
</html>

Paragraph.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Frame</title>
</head>
<body>
<h2>Paragraph Frame</h2>
<p>This is a sample paragraph explaining how frames work in HTML. Frames allow you to divide a webpage
into multiple sections that can display different content simultaneously.</p>
</body>
</html>

Output :

22 | P a g e
FULL STACK DEVELOPMENT

3a) Write a HTML program, that makes use of <article>, <aside>, <figure>, <figcaption>,
<footer>, <header>, <main>, <nav>, <section>, <div>, <span> tags.

Aim of the Project: Understanding Semantic and Non-Semantic Tags in HTML

The aim of this project is to demonstrate the use of semantic and non-semantic HTML elements for
structuring a webpage effectively.
By implementing this project, learners will:
✔ Understand the importance of semantic tags (<header>, <nav>, <main>, <section>, <article>,
<aside>, <figure>, <figcaption>, <footer>) in improving SEO and accessibility.
✔ Learn how to organize content meaningfully using sections and articles.
✔ Use <div> and <span> to group and style content without affecting semantics.
✔ Create a well-structured webpage that is readable, maintainable, and visually appealing.

Code :

Semantic.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Semantic Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}

header,
footer {
background-color: #333;

23 | P a g e
FULL STACK DEVELOPMENT
color: white;
text-align: center;
padding: 15px;
}
nav {
background-color: #444;
padding: 10px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 15px;
}
main {
display: flex;
margin-top: 20px;
}
section {
flex: 2;
padding: 15px;
}
aside {
flex: 1;
background-color: #f4f4f4;
padding: 15px;
}
article {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
}
figure {
text-align: center;
}
figcaption {
font-style: italic;
color: gray;
}
div {
background-color: #eef;
padding: 10px;
margin: 10px 0;
}
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Website</h1>
</header>

<!-- Navigation Section -->

<nav>
<a href="#">Home</a>
<a href="#">About</a>

24 | P a g e
FULL STACK DEVELOPMENT
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

<!-- Main Content -->

<main>
<section>
<h2>Latest Articles</h2>

<article>
<h3>Understanding HTML5 Semantic Tags</h3>
<p>
Semantic tags help structure the webpage content meaningfully. They
improve SEO and accessibility.
</p>
</article>

<article>
<h3>Benefits of Using the &lt;figure&gt; Tag</h3>
<figure>
<img
src="https://rvit.edu.in/img/RVIT%20building3.jpg"
alt="Sample Image"
height="200"
width="350"
/>
<figcaption>
This is a sample image using the &lt;figure&gt; and
&lt;figcaption&gt; tags.
</figcaption>
</figure>
</article>

<div>
<p>This is a content block inside a **div**.</p>
</div>
</section>

<!-- Sidebar -->

<aside>
<h2>Related Topics</h2>
<ul>
<li>HTML5 Basics</li>
<li>CSS Styling Techniques</li>
<li>JavaScript Fundamentals</li>
</ul>
</aside>
</main>

<!-- Footer -->

<footer>
<p>© 2025 My Website. All rights reserved.</p>
<p>Designed with <span>❤</span> using HTML & CSS.</p>
</footer>
</body>
</html>

Output:

25 | P a g e
FULL STACK DEVELOPMENT

3b) Write a HTML program, to embed audio and video into HTML web page.

Aim of the Project: Embedding Audio and Video in HTML

The aim of this project is to demonstrate how to embed multimedia elements (audio and video) into a
web page using HTML.
Through this project, learners will:
✔ Understand the usage of <audio> and <video> tags for embedding media.
✔ Learn how to provide multiple formats for better browser compatibility.
✔ Implement controls for better user interaction (play, pause, volume control, seeking).
✔ Enhance the user experience by incorporating multimedia content.
✔ Gain knowledge of HTML5 multimedia capabilities for modern web development.

Code :
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedding Audio and Video</title>
</head>
<body>
<!-- Header Section -->
<h1>Embedding Audio and Video in HTML</h1>

<!-- Audio Section -->

<h2>Audio Example</h2>
<audio controls>
<source
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mp3"
/>
Your browser does not support the audio element.
</audio>

26 | P a g e
FULL STACK DEVELOPMENT
<!-- Video Section -->
<h2>Video Example</h2>
<video width="600" height="340" controls>
<source
src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</body>
</html>

Output :

3c) Write a program to apply different types (or levels of styles or style specification
formats)- inline, internal, external styles to HTML elements. (identify selector, property
and value).

Aim of the Project:

The aim of this project is to demonstrate different types of CSS styles used in web development.
By completing this project, learners will:
✔ Understand how to apply inline, internal, and external CSS styles.
✔ Learn CSS selectors, properties, and values.
✔ Differentiate between the three levels of CSS and their impact on styling.
✔ Improve code organization by using external CSS for maintainability.

Code :

Home.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27 | P a g e
FULL STACK DEVELOPMENT
<title>CSS Levels Example</title>

<!-- Linking External CSS -->

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

<!-- Internal CSS -->

<style>
h2 {
color: blue;
text-align: center;
font-style: italic;
}
.internal-style {
background-color: lightgray;
padding: 10px;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Inline CSS -->
<h1 style="color: green; text-decoration: underline">Inline CSS Example</h1>

<h2>Internal CSS Example</h2>

<p>This paragraph is styled using **External CSS**.</p>

<div class="internal-style">This div is styled using Internal CSS.</div>

<div class="box">This div is styled using External CSS.</div>

</body>
</html>

Style.css
/* External CSS */
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}

h1 {
color: #ff4500;
text-align: center;
text-transform: uppercase;
}

p {
font-size: 18px;
color: #333;
padding: 10px;
}

.box {

border: 2px solid #333;

background-color: #ddd;
padding: 15px;

28 | P a g e
FULL STACK DEVELOPMENT
text-align: center;
}

4. Selector forms
a. Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal)
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii. Pseudo-class selector
iv. Pseudo-element selector
v. Attribute selector

Aim of the Project: CSS Selectors Demonstration

The aim of this project is to demonstrate different types of CSS selectors used to style web pages
efficiently and effectively.
Objectives:
✔ Understand and apply simple selectors (element, class, ID, group, universal).
✔ Learn combinator selectors (descendant, child, adjacent sibling, general sibling) to control element
relationships.
✔ Implement pseudo-class selectors for interactive styles.
✔ Explore pseudo-element selectors to style parts of elements.
✔ Use attribute selectors to target specific elements based on their attributes.

Code :

Index.html

<!DOCTYPE html>
<html lang="en">
<head>

29 | P a g e
FULL STACK DEVELOPMENT
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Selectors Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Simple Selectors -->
<h1>Element Selector Example</h1>
<p id="unique">This paragraph uses an ID selector.</p>
<p class="highlight">This paragraph uses a class selector.</p>
<h2>Group Selector Example</h2>
<p>Both H2 and P are italicized using group selectors.</p>

<!-- Combinator Selectors -->

<div>
<p>This is inside a div (Descendant Selector).</p>
<p>This is a child of div (Child Selector).</p>
</div>

<h3>Adjacent Sibling Selector</h3>

<p>This paragraph follows the H3 tag (Adjacent Sibling).</p>
<p>This paragraph is a general sibling of H3 (General Sibling).</p>

<!-- Pseudo-Class Selector -->

<a href="#">Hover over me</a>
<button>Click me</button>

<!-- Pseudo-Element Selector -->

<p>
This paragraph demonstrates pseudo-elements like first-letter and after.
</p>

<!-- Attribute Selectors -->

<input type="text" placeholder="Text input (border in blue)" />
<input type="password" placeholder="Password input" />
<input
type="email"
required
placeholder="Required field (yellow background)"
/>
</body>
</html>

Styles.css
/* 1. Simple Selectors */
/* Element Selector */
h1 {
color: blue;
text-align: center;
}

/* ID Selector */
#unique {
color: red;
font-weight: bold;
}

/* Class Selector */
.highlight {

30 | P a g e
FULL STACK DEVELOPMENT
background-color: yellow;
padding: 5px;
}

/* Group Selector */
h2,
p {
font-style: italic;
}

/* Universal Selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 2. Combinator Selectors */
/* Descendant Selector */
div p {
color: green;
}

/* Child Selector */
div > p {
font-size: 20px;
}

/* Adjacent Sibling Selector */

h3 + p {
color: brown;
font-weight: bold;
}

/* General Sibling Selector */

h3 ~ p {
text-decoration: underline;
}

/* 3. Pseudo-Class Selectors */
a:hover {
color: orange;
font-weight: bold;
}

button:focus {
background-color: lightblue;
}

/* 4. Pseudo-Element Selectors */
p::first-letter {
font-size: 2em;
color: purple;
}

p::after {
content: " ✅";
}

/* 5. Attribute Selectors */
input[type="text"] {

31 | P a g e
FULL STACK DEVELOPMENT
border: 2px solid blue;
}

input[required] {
background-color: lightyellow;
}

5a) Write a program to demonstrate the various ways you can reference a color in CSS.

Aim of the Project: Demonstrating Different Ways to Reference Colors in CSS

The aim of this project is to explore and demonstrate the various methods of applying colors in CSS,
enabling effective and flexible styling of web elements.

Objectives:
✅ Understand and use different color formats in CSS, including:
• Named colors (e.g., red, blue, green)
• Hexadecimal colors (e.g., #FF5733)
• RGB colors (e.g., rgb(255, 87, 51))
• RGBA colors (e.g., rgba(255, 87, 51, 0.5))
• HSL colors (e.g., hsl(9, 100%, 64%))
• HSLA colors (e.g., hsla(9, 100%, 64%, 0.5))
✅ Learn how different color models impact web design.
✅ Apply colors effectively using backgrounds, text, and transparency effects.
✅ Gain hands-on experience in CSS styling to enhance visual aesthetics.

Code :
Index.html
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8" />

32 | P a g e
FULL STACK DEVELOPMENT
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Color Reference</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}

.color-box {
width: 200px;
height: 100px;
margin: 10px auto;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Different ways to reference color */

.named-color {
background-color: red;
} /* Named Color */
.hex-color {
background-color: #fff833;
} /* Hexadecimal */
.rgb-color {
background-color: rgb(51, 245, 255);
} /* RGB */
.rgba-color {
background-color: rgba(255, 87, 51, 0.5);
color: black;
} /* RGBA */
.hsl-color {
background-color: hsl(269, 100%, 64%);
} /* HSL */
.hsla-color {
background-color: hsla(36, 100%, 64%, 0.5);
color: black;
} /* HSLA */
</style>
</head>
<body>
<h2>Different Ways to Reference Colors in CSS</h2>

<div class="color-box named-color">Named Color (Red)</div>

<div class="color-box hex-color">Hexadecimal (#FF5733)</div>
<div class="color-box rgb-color">RGB (255, 87, 51)</div>
<div class="color-box rgba-color">RGBA (255, 87, 51, 0.5)</div>
<div class="color-box hsl-color">HSL (9, 100%, 64%)</div>
<div class="color-box hsla-color">HSLA (9, 100%, 64%, 0.5)</div>
</body>
</html>

Output :

33 | P a g e
FULL STACK DEVELOPMENT

5b ) Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.

Aim:
The aim of this project is to demonstrate how to apply a background image in a webpage using internal
CSS styling. The program ensures the image is placed halfway down the page, remains fixed while
scrolling, and is flipped horizontally. This helps in understanding key CSS background properties like
background-image, background-position, background-attachment, background-size, and transformations
using transform: scaleX(-1).
✅ Key Learnings:
• Applying background images using CSS.
• Using background-attachment: fixed for non-scrolling backgrounds.
• Positioning images at specific locations using background-position.
• Flipping images horizontally using transform: scaleX(-1).
• Implementing internal CSS styling within a webpage.

Explanation:
• The <style> tag inside the <head> section contains the CSS rules.
• The background-image is applied to the body and is:
✅ Centered horizontally and placed halfway down (background-position: center 50%).
✅ Fixed while scrolling (background-attachment: fixed).
✅ Flipped horizontally (transform: scaleX(-1)).
✅ Covers the full background (background-size: cover).

Code :

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

34 | P a g e
FULL STACK DEVELOPMENT
<title>Background Image Example</title>
<style>
body {
background-image: url("https://i.ytimg.com/vi/v3uOIBkp0e8/sddefault.jpg"); /* Replace with your
image path */
background-position: center 50%; /* Center horizontally, halfway down */
background-repeat: no-repeat; /* Prevent repeating */
background-size: cover; /* Ensure full coverage */
background-attachment: fixed; /* Keep background fixed while scrolling */
transform: scaleX(-1); /* Flip the image horizontally */
}

h1 {
text-align: center;
color: black;
padding-top: 20px;
background-color: aliceblue;
}
p {
width: 500px;
margin: 0 auto;
backdrop-filter: blur(50px);
}
</style>
</head>
<body>
<h1>Background Image Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus velit modi
repudiandae tempora. Nisi fuga itaque odio dignissimos possimus at soluta
sint eos labore, sunt quasi provident laborum. A, natus!
</p>
</body>
</html>

35 | P a g e
FULL STACK DEVELOPMENT

5c) Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment

Aim:
The aim of this project is to demonstrate the use of different CSS font and text properties to control the
appearance of text on a webpage.

Key Learnings:
• font-size → Adjusts the size of text.
• font-weight → Controls the boldness of text.
• font-style → Applies italic styling.
• text-decoration → Adds underlining, overlining, or strike-through effects.
• text-transform → Modifies text case (uppercase, lowercase, capitalize).
• text-align → Aligns text (left, right, center, justify).

Index.html

• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8" />
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />
• <title>CSS Font and Text Properties</title>
• <style>
• body {
• font-family: Arial, sans-serif;
• background-color: #f4f4f4; /* Light gray background */

36 | P a g e
FULL STACK DEVELOPMENT
• color: #333; /* Default text color */
• padding: 20px;
• }
•
• h2 {
• text-align: center;
• background-color: #0073e6; /* Blue background */
• color: white; /* White text */
• padding: 10px;
• border-radius: 5px;
• }
•
• .font-size {
• font-size: 24px;
• background-color: #ffcc00; /* Yellow background */
• color: black; /* Black text */
• padding: 10px;
• }
•
• .font-weight {
• font-weight: bold;
• background-color: #ff5733; /* Orange background */
• color: white; /* White text */
• padding: 10px;
• }
•
• .font-style {
• font-style: italic;
• background-color: #33cc33; /* Green background */
• color: white; /* White text */
• padding: 10px;
• }
•
• .text-decoration {
• text-decoration: underline;
• background-color: #9933cc; /* Purple background */
• color: white; /* White text */
• padding: 10px;
• }
•
• .text-transformation {
• text-transform: uppercase;
• background-color: #0099cc; /* Light blue background */
• color: white; /* White text */
• padding: 10px;
• }
•
• .text-alignment {
• text-align: center;
• background-color: #ff6666; /* Light red background */
• color: white; /* White text */
• padding: 10px;
• }
• </style>
• </head>

• <body>
• <h2>CSS Font and Text Properties</h2>
• <p class="font-size">This text has a larger font size.</p>

37 | P a g e
FULL STACK DEVELOPMENT
• <p class="font-weight">This text is bold.</p>
• <p class="font-style">This text is in italic style.</p>
• <p class="text-decoration">This text is underlined.</p>
• <p class="text-transformation">This text is in uppercase.</p>
• <p class="text-alignment">This text is center-aligned.</p>
• </body>
• </html>
•

Output:

5d) Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. Padding

Aim:
The aim of this program is to demonstrate the CSS Box Model, which plays a crucial role in layout and
spacing in web design.

Key Learnings:
• Content → The actual text or image inside the box.
• Border → The outer boundary of the box (can be solid, dashed, etc.).
• Margin → Space outside the border to separate elements.
• Padding → Space between content and border.

code :
index.html

38 | P a g e
FULL STACK DEVELOPMENT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Box Model Demonstration</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 20px;
}

.box {
width: 300px;
background-color: #ffcc00; /* Yellow background */
color: black; /* Black text */
padding: 20px; /* Space inside the border */
border: 5px solid #333; /* Border around the box */
margin: 20px auto; /* Space outside the border, auto for centering */
text-align: left;
}

h2 {
text-align: center;
color: #0073e6;
}

.content {
background-color: #ff5733;
padding: 10px;
color: white;
}

.border {
border: 4px dashed black;
padding: 10px;
background-color: #33cc33;
color: white;
}

.margin {
margin: 30px;
background-color: #9933cc;
color: white;
padding: 10px;
}

.padding {
padding: 20px;
background-color: #0099cc;
color: white;
}
</style>
</head>
<body>
<h2>CSS Box Model Demonstration</h2>

<div class="box">

39 | P a g e
FULL STACK DEVELOPMENT
<p class="content">
📌 <b>Content:</b> This is the main text inside the box.
</p>
<p class="border">
🖼️ <b>Border:</b> The border surrounds the content and padding.
</p>
<p class="margin">
📏 <b>Margin:</b> Space outside the border to separate elements.
</p>
<p class="padding">
📦 <b>Padding:</b> Space between content and border.
</p>
</div>
</body>
</html>

Output:

6a. Write a program to embed internal and external JavaScript in a web page.

Aim:

To demonstrate embedding JavaScript in a webpage using both internal and external methods.

Internal JavaScript Example:

<!DOCTYPE html>
<html>
<head>

40 | P a g e
FULL STACK DEVELOPMENT
<title>Internal JavaScript</title>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
<p id="message"></p>

<script>
function showMessage() {
document.getElementById("message").innerHTML = "Hello from Internal
JavaScript!";
}
</script>
</body>
</html>

External JavaScript Example:

HTML File:

<!DOCTYPE html>
<html>
<head>
<title>External JavaScript</title>
</head>
<body>
<button onclick="displayMessage()">Click Me</button>
<p id="externalMessage"></p>

<script src="script.js"></script>
</body>
</html>

External JS (script.js):

function displayMessage() {
document.getElementById("externalMessage").innerHTML = "Hello from External
JavaScript!";
}

Output:

When the user clicks the button, the respective messages appear on the webpage.

6b. Write a program to explain the different ways for displaying output.

Aim:

To demonstrate various ways to display output in JavaScript, including innerHTML, document.write(),

alert(), and console.log().

Code :

<!DOCTYPE html>
<html>

41 | P a g e
FULL STACK DEVELOPMENT
<head>
<title>Output Methods</title>
</head>
<body>
<button onclick="displayOutputs()">Show Outputs</button>
<p id="output1"></p>

<script>
function displayOutputs() {
// Using innerHTML
document.getElementById("output1").innerHTML = "This is innerHTML output";

// Using document.write()
document.write("This is document.write() output.<br>");

// Using alert()
alert("This is alert() output");

// Using console.log()
console.log("This is console.log() output");
}
</script>
</body>
</html>

Output:

• Message displayed on webpage using innerHTML.

• Message printed using document.write().
• Alert box appears with a message.
• Message logged in the browser console.

6c. Write a program to explain the different ways for taking input.

Aim:

To demonstrate different methods for taking user input in JavaScript, including prompt(), form inputs, and
confirm().

Program:

<!DOCTYPE html>
<html>
<head>
<title>Input Methods</title>
</head>
<body>
<label>Enter Age: </label>
<input type="number" id="ageInput"><br>
<button onclick="getInputs()">Submit</button>
<p id="output"></p>

<script>

function getInputs() {
// Using prompt()
let name = prompt("Enter your name:");

42 | P a g e
FULL STACK DEVELOPMENT
// Using HTML form input
let age = document.getElementById("ageInput").value;

// Using confirm()
let confirmMsg = confirm("Are you sure you want to proceed?");

document.getElementById("output").innerHTML =
"Name: " + name + "<br>Age: " + age + "<br>Confirmed: " + confirmMsg;
}
</script>
</body>
</html>

Output:

• User enters a name via prompt().

• User enters an age in the form input field.
• Confirmation box appears.
• Output displayed on the webpage.

6d. Create a webpage which uses prompt dialogue box to ask a voter for his name and
age. Display the information in table format along with whether the voter can vote or
not.

Aim:

To create a webpage that takes a voter's name and age via prompt() and displays the details in a table along
with voting eligibility.

<!DOCTYPE html>
<html>
<head>
<title>Voter Eligibility</title>
</head>
<body>
<button onclick="checkEligibility()">Check Voting Eligibility</button>
<div id="voterTable"></div>

<script>
function checkEligibility() {
let name = prompt("Enter your name:");
let age = prompt("Enter your age:");
let eligibility = (age >= 18) ? "Eligible to Vote" : "Not Eligible to Vote";

document.getElementById("voterTable").innerHTML =
`<table border='1'>
<tr>
<th>Name</th><th>Age</th><th>Eligibility</th>
</tr>
<tr>
<td>${name}</td><td>${age}</td><td>${eligibility}</td>
</tr>
</table>`;

}
</script>
</body>

43 | P a g e
FULL STACK DEVELOPMENT
</html>

Output:

• The user is prompted to enter their name and age.

• A table displays the name, age, and whether the person is eligible to vote.

7. JavaScript Pre-defined and User-defined Objects

a. Write a program using document object properties and methods.

Aim:

To demonstrate the use of the document object properties and methods in JavaScript.

Explanation:

The document object is a part of the DOM (Document Object Model) and represents the HTML page. It
allows JavaScript to dynamically access and manipulate the content, structure, and styles of the web page.
Common methods include getElementById(), write(), querySelector(), and properties like title, URL,
and body.

Solution:
<!DOCTYPE html>
<html>
<head>
<title>Document Object Example</title>
</head>
<body>
<h2>Document Object Example</h2>
<p id="demo"></p>
<button onclick="showDetails()">Show Details</button>
<button onclick="changeTitle()">Change Title</button>

<script>
function showDetails() {
document.getElementById("demo").innerHTML =
"Title: " + document.title + "<br> URL: " + document.URL;
}

function changeTitle() {
document.title = "New Document Title";
alert("Title changed to: " + document.title);
}
</script>
</body>
</html>

Output:

44 | P a g e
FULL STACK DEVELOPMENT
1. Displays the current title and URL of the page.
2. Changes the document title when the button is clicked.

7b. Write a program using window object properties and methods.

Aim:

To demonstrate the use of the window object properties and methods in JavaScript.

Explanation:

The window object represents the browser window and is the global object in JavaScript. It provides useful
properties such as innerHeight, innerWidth, and methods like alert(), confirm(), prompt(), and
open().

Solution:
<!DOCTYPE html>
<html>
<head>
<title>Window Object Example</title>
</head>
<body>
<h2>Window Object Example</h2>
<button onclick="showWindowDetails()">Show Window Details</button>
<button onclick="openNewWindow()">Open New Window</button>

<script>
function showWindowDetails() {
alert("Window Width: " + window.innerWidth + "\nWindow Height: " +
window.innerHeight);
}

function openNewWindow() {
window.open("https://www.google.com", "_blank", "width=500,height=500");
}
</script>
</body>
</html>

Output:

1. Displays an alert with the browser window dimensions.

2. Opens a new window with a specified size.

7c. Write a program using array object properties and methods.

Aim:

To demonstrate the use of JavaScript Array object properties and methods.

Explanation:
45 | P a g e
FULL STACK DEVELOPMENT
The Array object provides methods to manipulate arrays efficiently. Some commonly used methods include:

• push(): Adds an element to the end.

• pop(): Removes the last element.
• shift(): Removes the first element.
• unshift(): Adds an element to the beginning.
• sort(): Sorts elements.
• join(): Converts an array to a string.

Solution:
<!DOCTYPE html>
<html>
<head>
<title>Array Object Example</title>
</head>
<body>
<h2>Array Object Example</h2>
<button onclick="arrayOperations()">Show Array Operations</button>
<p id="result"></p>

<script>
function arrayOperations() {
let fruits = ["Apple", "Banana", "Cherry"];
fruits.push("Mango");
fruits.sort();
let removedItem = fruits.pop();
document.getElementById("result").innerHTML = "Fruits: " + fruits.join(", ")
+ "<br>Removed: " + removedItem;
}
</script>
</body>
</html>

Output:

1. Displays the list of fruits with a new element added and sorted.
2. Removes the last element and displays the result.

7d. Write a program using math object properties and methods.

Aim:

To demonstrate the use of JavaScript Math object properties and methods.

Explanation:

The Math object provides various mathematical functions, such as:

• Math.sqrt(x): Square root of x.

• Math.random(): Generates a random number between 0 and 1.

• Math.max(x, y, ...): Returns the largest number.
• Math.min(x, y, ...): Returns the smallest number.

46 | P a g e
FULL STACK DEVELOPMENT
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Math Object Example</title>
</head>
<body>
<h2>Math Object Example</h2>
<button onclick="mathOperations()">Show Math Operations</button>
<p id="mathResult"></p>

<script>
function mathOperations() {
let num = 25;
let sqrtNum = Math.sqrt(num);
let randomNum = Math.random() * 100;
let maxNum = Math.max(10, 45, 78, 12);
document.getElementById("mathResult").innerHTML =
"Square root: " + sqrtNum + "<br>Random number (0-100): " +
randomNum.toFixed(2) + "<br>Max number: " + maxNum;
}
</script>
</body>
</html>

Output:

1. Displays the square root of a number.

2. Generates a random number between 0-100.
3. Finds the maximum number in a given set.

7 E. Using String Object Properties and Methods

Aim:

To demonstrate the use of JavaScript String object properties and methods.

Explanation:

JavaScript provides a built-in String object with various properties and methods that allow manipulation of
string data. This program demonstrates some common methods such as length, toUpperCase(),
toLowerCase(), slice(), and includes().

Code:
let str = "Hello, JavaScript!";
console.log("Original String: ", str);
console.log("String Length: ", str.length);
console.log("Uppercase: ", str.toUpperCase());
console.log("Lowercase: ", str.toLowerCase());
console.log("Substring (0,5): ", str.slice(0,5));
console.log("Contains 'Java': ", str.includes("Java"));

Expected Output:
47 | P a g e
FULL STACK DEVELOPMENT
Original String: Hello, JavaScript!
String Length: 18
Uppercase: HELLO, JAVASCRIPT!
Lowercase: hello, javascript!
Substring (0,5): Hello
Contains 'Java': true

7f . Using RegExp Object Properties and Methods

Aim:

To demonstrate the use of JavaScript RegExp object properties and methods.

Explanation:

JavaScript provides a built-in RegExp (Regular Expression) object to work with pattern matching and text
manipulation. This program shows how to use test(), exec(), and match() methods.

Code:
let text = "JavaScript is amazing!";
let pattern = /JavaScript/;

console.log("RegExp Test: ", pattern.test(text));

console.log("RegExp Exec: ", pattern.exec(text));
console.log("String Match: ", text.match(pattern));

Expected Output:
RegExp Test: true
RegExp Exec: [ 'JavaScript', index: 0, input: 'JavaScript is amazing!', groups:
undefined ]
String Match: [ 'JavaScript', index: 0, input: 'JavaScript is amazing!', groups:
undefined ]

7g. Using Date Object Properties and Methods

Aim:

To demonstrate the use of JavaScript Date object properties and methods.

Explanation:

JavaScript provides a Date object that enables handling and formatting of dates and times. This program
shows how to get the current date and extract different parts of it.

Code:
let currentDate = new Date();
console.log("Current Date: ", currentDate);
console.log("Year: ", currentDate.getFullYear());
console.log("Month: ", currentDate.getMonth() + 1);
console.log("Date: ", currentDate.getDate());
console.log("Hours: ", currentDate.getHours());
48 | P a g e
FULL STACK DEVELOPMENT
console.log("Minutes: ", currentDate.getMinutes());

Expected Output:
Current Date: (Displays current system date)
Year: 2024
Month: 3 (Depends on the current month)
Date: 25 (Depends on the current date)
Hours: 14 (Depends on current time)
Minutes: 30 (Depends on current time)

7h. User-Defined Object with Properties, Methods, Accessors, and Constructors

Aim:

To demonstrate the creation and usage of a user-defined object with properties, methods, accessors, and a
constructor function.

Explanation:

In JavaScript, user-defined objects can be created using constructor functions or classes. This program defines
a Person class with properties, methods, getters, and setters.

Code:
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}

get name() {
return this._name;
}

set name(newName) {
this._name = newName;
}

get age() {
return this._age;
}

set age(newAge) {
if(newAge > 0) {
this._age = newAge;
}
}

display() {
console.log(`Name: ${this._name}, Age: ${this._age}`);
}
}

let
person1 = new Person("John Doe", 25);
person1.display();
person1.age = 30;

49 | P a g e
FULL STACK DEVELOPMENT
person1.display();

Expected Output:
Name: John Doe, Age: 25
Name: John Doe, Age: 30

8. Java Script Conditional Statements and Loops

a. Write a program which asks the user to enter three integers, obtains the numbers from the
user and outputs HTML text that displays the larger number followed by the words “LARGER
NUMBER” in an information message dialog. If the numbers are equal, output HTML text as
“EQUAL NUMBERS”.

Aim:

To accept three integers from the user, compare them, and display the largest number or indicate if they are
equal.

Code:
let num1 = parseInt(prompt("Enter first number:"));
let num2 = parseInt(prompt("Enter second number:"));
let num3 = parseInt(prompt("Enter third number:"));

if (num1 === num2 && num2 === num3) {

document.write("EQUAL NUMBERS");
} else {
let larger = Math.max(num1, num2, num3);
document.write(larger + " LARGER NUMBER");
}

Expected Output:
Input: 10, 20, 30 → Output: 30 LARGER NUMBER
Input: 15, 15, 15 → Output: EQUAL NUMBERS

8b. Write a program to display week days using switch case.

Code:
let day = parseInt(prompt("Enter a number (1-7) for the day of the week:"));
let dayName;

switch(day) {
case 1: dayName = "Sunday"; break;
case 2: dayName = "Monday"; break;
case 3: dayName = "Tuesday"; break;
case 4: dayName = "Wednesday"; break;

case 5: dayName = "Thursday"; break;

case 6: dayName = "Friday"; break;
case 7: dayName = "Saturday"; break;
default: dayName = "Invalid Input";
50 | P a g e
FULL STACK DEVELOPMENT
}

console.log("Day: " + dayName);

Expected Output:
Input: 3 → Output: Day: Tuesday
Input: 7 → Output: Day: Saturday

8c. Write a program to print 1 to 10 numbers using for, while and do-while loops.

Code:
console.log("Using for loop:");
for(let i = 1; i <= 10; i++) {
console.log(i);
}

console.log("Using while loop:");

let j = 1;
while(j <= 10) {
console.log(j);
j++;
}

console.log("Using do-while loop:");

let k = 1;
do {
console.log(k);
k++;
} while(k <= 10);

Expected Output:
Using for loop:
1 2 3 4 5 6 7 8 9 10
Using while loop:
1 2 3 4 5 6 7 8 9 10
Using do-while loop:
1 2 3 4 5 6 7 8 9 10

8d. Write a program to print data in object using for-in, for-each and for-of loops.

Code:
let person = {name: "John", age: 25, city: "New York"};

console.log("Using for-in loop:");

for (let key in person) {
console.log(key + ": " + person[key]);
}

console.log("Using Object.entries() and forEach:");

Object.entries(person).forEach(([key, value]) => console.log(key + ": " + value));

Expected Output:
51 | P a g e
FULL STACK DEVELOPMENT
Using for-in loop:
name: John
age: 25
city: New York
Using Object.entries() and forEach:
name: John
age: 25
city: New York

8e. Develop a program to determine whether a given number is an ‘ARMSTRONG NUMBER’

or not.

Code:
function isArmstrong(num) {
let sum = 0, temp = num;
while (temp > 0) {
let digit = temp % 10;
sum += Math.pow(digit, 3);
temp = Math.floor(temp / 10);
}
return sum === num;
}

let number = parseInt(prompt("Enter a number:"));

console.log(number + (isArmstrong(number) ? " is an Armstrong number" : " is not an
Armstrong number"));

Expected Output:
Input: 153 → Output: 153 is an Armstrong number
Input: 123 → Output: 123 is not an Armstrong number

8f. Write a program to display the denomination of the amount deposited in the bank in terms
of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s.

Code:
function getDenominations(amount) {
let denominations = [100, 50, 20, 10, 5, 2, 1];
let result = {};
for (let note of denominations) {
if (amount >= note) {
result[note] = Math.floor(amount / note);
amount %= note;
}
}
return result;
}

let deposit = parseInt(prompt("Enter deposited amount:"));

console.log("Denominations: ", getDenominations(deposit));

52 | P a g e
 FULL STACK DEVELOPMENT
Expected Output:
Input: 163
Output: {100: 1, 50: 1, 10: 1, 2: 1, 1: 1}

9. JavaScript Functions and Events

Aim:

A . To design appropriate JavaScript functions that display:

I. The factorial of a given number.

II. The Fibonacci series up to the given number.
III. The prime numbers up to the given number.
IV. Whether the given number is a palindrome or not.

I. Factorial of a Number

Code:

function factorial(n) {
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
}

console.log("Factorial of 5: ", factorial(5));

Explanation:

• The function factorial(n) is a recursive function that calculates the factorial of a number.
• It multiplies n by factorial(n-1) until it reaches 1.

Output:

Factorial of 5: 120

II . Fibonacci Series Up to a Given Number

Code:

function fibonacci(n) {
let fib = [0, 1];
for (let i = 2; i < n; i++) {
fib[i] = fib[i - 1] + fib[i - 2];
}
return fib;
}

console.log("Fibonacci Series: ", fibonacci(10));

53 | P a g e
FULL STACK DEVELOPMENT

Explanation:

• The function initializes an array with [0,1].

• It generates the next Fibonacci number by adding the previous two numbers.

Output:

Fibonacci Series: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

III. Prime Numbers Up to a Given Number

Code:

function isPrime(num) {
if (num < 2) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}

function primeNumbers(n) {
let primes = [];
for (let i = 2; i <= n; i++) {
if (isPrime(i)) primes.push(i);
}
return primes;
}

console.log("Prime numbers up to 20: ", primeNumbers(20));

Explanation:

• isPrime(num) checks if a number is prime by ensuring it has no divisors other than 1 and itself.
• primeNumbers(n) iterates through numbers up to n and checks if each number is prime.

Output:

Prime numbers up to 20: [2, 3, 5, 7, 11, 13, 17, 19]

IV. Check if a Number is a Palindrome

Code:

function isPalindrome(num) {
let str = num.toString();
let reversed = str.split('').reverse().join('');
return str === reversed;
}

console.log("Is 121 a palindrome?: ", isPalindrome(121));

console.log("Is 123 a palindrome?: ", isPalindrome(123));

54 | P a g e
FULL STACK DEVELOPMENT
Explanation:

• The function converts the number to a string and reverses it.

• If the reversed string matches the original, the number is a palindrome.

Output:

Is 121 a palindrome?: true

Is 123 a palindrome?: false

9b. Design a HTML having a text box and four buttons named Factorial,
Fibonacci, Prime, and Palindrome. When a button is pressed an appropriate
function should be called to display

i. Factorial of that number

ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not

Aim: To design an HTML page that includes a text box and four buttons labeled Factorial, Fibonacci, Prime,
and Palindrome. Each button triggers a JavaScript function to compute and display the respective operation's
result.

Code Implementation:

<!DOCTYPE html>
<html>
<head>
<title>Math Operations</title>

</head>
<body>
<h2>Math Operations</h2>
<input type="text" id="inputBox" placeholder="Enter a number or text">
<button onclick="calculateFactorial()">Factorial</button>
<button onclick="generateFibonacci()">Fibonacci</button>
<button onclick="checkPrime()">Prime</button>
<button onclick="checkPalindrome()">Palindrome</button>
<p id="output"></p>
<script>
function calculateFactorial() {
let num = parseInt(document.getElementById('inputBox').value);
let fact = 1;
for (let i = 1; i <= num; i++) {
fact *= i;
}
document.getElementById('output').innerText = "Factorial: " + fact;
}

function generateFibonacci() {
let num = parseInt(document.getElementById('inputBox').value);

let fib = [0, 1];

for (let i = 2; i < num; i++) {
fib[i] = fib[i - 1] + fib[i - 2];

55 | P a g e
FULL STACK DEVELOPMENT
}
document.getElementById('output').innerText = "Fibonacci: " + fib.slice(0,
num).join(', ');
}

function checkPrime() {
let num = parseInt(document.getElementById('inputBox').value);
let isPrime = num > 1;
for (let i = 2; i < num; i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
document.getElementById('output').innerText = num + (isPrime ? " is a Prime
Number" : " is not a Prime Number");
}

function checkPalindrome() {
let str = document.getElementById('inputBox').value;
let reversed = str.split('').reverse().join('');
let result = (str === reversed) ? "is a Palindrome" : "is not a Palindrome";
document.getElementById('output').innerText = str + " " + result;
}
</script>

</body>
</html>

Explanation:

• The HTML file contains an input box where users can enter a number or text.
• Four buttons are provided for different operations.
• JavaScript functions handle each operation:
o Factorial: Computes the factorial of a number using a loop.
o Fibonacci: Generates a sequence up to the entered number.
o Prime Check: Determines if a number is prime.
o Palindrome Check: Verifies if the input text is a palindrome.
• The result of each operation is displayed in a paragraph below the buttons.

Output Example:

1. Enter "5" in the text box and click "Factorial" → Output: "Factorial: 120"
2. Enter "6" and click "Fibonacci" → Output: "Fibonacci: 0, 1, 1, 2, 3, 5"
3. Enter "7" and click "Prime" → Output: "7 is a Prime Number"
4. Enter "madam" and click "Palindrome" → Output: "madam is a Palindrome"

9c. Write a program to validate the following fields in a registration page

I. Name (start with alphabet and followed by alphanumeric and the length should not be less than 6
characters)
II. Mobile (only numbers and length 10 digits)
III. ii.
E-mail (should contain format like [email protected])

56 | P a g e
FULL STACK DEVELOPMENT
Aim: To design an HTML registration page with validation for Name, Mobile, and Email fields using
JavaScript.

Code Implementation:

<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<br /><br />
<label for="mobile">Mobile:</label>
<input type="text" id="mobile" name="mobile" required />
<br /><br />
<label for="email">Email:</label>
<input type="text" id="email" name="email" required />
<br /><br />
<button type="submit">Register</button>
</form>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let mobile = document.getElementById("mobile").value;
let email = document.getElementById("email").value;
let namePattern = /^[A-Za-z][A-Za-z0-9]{5,}$/;
let mobilePattern = /^[0-9]{10}$/;
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if (!namePattern.test(name)) {
alert(
"Invalid Name: It should start with an alphabet, be alphanumeric, and have at least 6
characters."
);
return false;
}
if (!mobilePattern.test(mobile)) {
alert("Invalid Mobile: It should be exactly 10 digits.");
return false;
}
if (!emailPattern.test(email)) {
alert(
"Invalid Email: Enter a valid email format (e.g., [email protected])."
);
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</body>
</html>

Explanation:

57 | P a g e
FULL STACK DEVELOPMENT
• The form contains three input fields: Name, Mobile, and Email.
• JavaScript validation ensures:
o Name starts with an alphabet, followed by alphanumeric characters, and has a minimum length
of 6.
o Mobile consists of exactly 10 digits.
o Email follows a proper email format.
• If validation fails, an alert is shown with the specific issue.
• On successful validation, a success message is displayed.

Output Example:

1. Invalid Name Entry: If "123John" is entered, an alert appears: "Invalid Name: It should start with an
alphabet..."
2. Invalid Mobile Entry: If "98765" is entered, an alert appears: "Invalid Mobile: It should be exactly
10 digits."
3. Invalid Email Entry: If "user@@mail" is entered, an alert appears: "Invalid Email: Enter a valid
email format."
4. Successful Submission: If valid details are entered, an alert appears: "Form submitted successfully!"

58 | P a g e