Mangalmay Institute of Engineering &

Technology

WD FILE

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SESSION: 2024 – 25
YEAR: 2ND
SEMESTER:3RD

Submitted to: Submitted by: ANURAG

Tapash Kumar Saha Roll No: 2307861520012
Assistant Professor Branch : B.Tech(AI)
CSE , MIET Greater Noida Year : 2023-27
 INDEX
EXPERIMENT PAGE SIGNATURE
S.NO TITLE NO DATE
Simple Form Validation
1.  Description: Design a
simple HTML form with
the following fields:
o Name (text input)
o Email (email
input)
o Phone number
(text input with a
pattern for
validation)
o Submit button
 Implement JavaScript to
perform client-side form
validation:
o Ensure that the
name field is not
empty.
o Check if the email
field contains a
valid email
format.
o Validate the
phone number
format using
regular
expressions.
o Show appropriate
error messages if
the validation
fails.
 Technologies: HTML
(forms), CSS (styling),
JavaScript (validation)

Create a Simple Web Page

2.  Description: Design a
basic web page with the
following components:
o A header with a
navigation bar
containing links
 to different
sections on the
page (e.g., Home,
About, Contact).
o An image of your
choice (e.g., a
logo or photo)
inserted using
the <img> tag.
o A footer with
contact
information or
copyright details.
o The page should
include at least
one paragraph of
text and a list of
your favorite
hobbies or
interests (use an
unordered or
ordered list).
 Skills Tested: Basic HTML
structure, image
embedding, links, lists,
footer creation.

Create a Table for a Product List

3.  Description: Create a
table that displays a list of
products. Each row
should include the
product name,
description, price, and
availability status (in-
stock/out of stock). Use
the <table>, <tr>, <th>,
and <td> tags.
o Include headers
for each column
(e.g., Product,
Description,
Price,
Availability).
o Add at least five
products with
different
 information in
each column.
o Ensure the table
has a simple and
clear design (you
can use inline CSS
for basic styling if
required).
Skills Tested: Using tables, rows,
and cells in HTML, creating
headers for tables.
Create an Ordered and
4. Unordered List
 Description: Create a web
page that contains:
o An unordered list
(<ul>) with at
least five items,
representing your
top five favorite
foods, hobbies,
or travel
destinations.
o An ordered list
(<ol>) with at
least five items,
representing
steps to complete
a task (e.g., how
to make a cup of
tea or how to
prepare a
sandwich).
 Skills Tested: Lists
(ordered and unordered),
organizing content using
HTML elements.

Create a Navigation Bar

5.  Description: Create a
horizontal navigation bar
that contains the
following links:
o Home
o About Us
o Services
o Contact
  Make sure that the
navigation links are styled
(using inline or internal
CSS) so that they appear
horizontally and have a
hover effect (e.g., change
color when hovered).
 Skills Tested: Creating
links, working with
navigation bars, basic CSS
for styling (if needed).

Create an HTML Resume Page

6.  Description: Create a
simple resume page that
contains the following
sections:
o A personal
information
section (name,
contact details).
o An education
section with the
names of
institutions, years
attended, and
degrees earned.
o A work
experience
section with job
titles, companies,
and employment
dates.
o A skills section
listing your top
skills.
o Use semantic
HTML elements
where possible,
such as
<section>,
<article>,
<header>,
<footer>, and
<ul>.
 Skills Tested: Resume
formatting with HTML,
 using semantic tags,
creating structured
content.

Simple Calculator
7.  Description: Create a
simple calculator using
JavaScript that performs
basic arithmetic
operations (addition,
subtraction,
multiplication, division).
The calculator should
have:
o Number buttons
(0-9).
o Operation
buttons (+, -,
*, /).
o A display screen
that shows the
current value.
o A button to clear
the display.
o The calculator
should update
the display as
numbers and
operations are
clicked.
 Skills Tested: DOM
manipulation, event
handling, basic JavaScript
operations.

Palindrome Checker
8.  Description: Create a
function that checks if a
given word or phrase is a
palindrome. The function
should:
o Accept user input
(a string).
o Ignore spaces,
punctuation, and
case sensitivity.
o Return true if the
 input is a
palindrome, and
false otherwise.
o Display the result
on the webpage
(e.g., "Yes, it's a
palindrome!" or
"No, it's not a
palindrome!").
Skills Tested: Strings, loops,
conditionals
Create a Form with Stylish Input
9. Fields
 Description: Design a
form with the following
input fields:
o Full Name (text
input)
o Email (email
input)
o Message
(textarea)
o A Submit button
 Use CSS to style the form:
o Add padding,
borders, and a
background color
to the input
fields.
o Style the submit
button with
hover effects.
o Make the form
visually appealing
(e.g., rounded
corners, subtle
shadows).
o Add focus styles
for the input
fields when
clicked.
 Skills Tested: Form
styling, button styling,
input focus states.

Create a Web Page with

10. Embedded Media
  Description: Create a
webpage that includes:
o An embedded
YouTube video
(use the <iframe>
tag).
o An audio file
embedded using
the <audio> tag.
o A background
image for the
webpage (using
the <body> tag
with an inline
style or the
<style> tag).
 Skills Tested: Embedding
media, background
images, understanding
the <iframe> and <audio>
tags.

PRACTICAL-1
1. Simple Form Validation
 Description: Design a simple HTML form with the following fields:
o Name (text input)
o Email (email input)
o Phone number (text input with a pattern for validation)
o Submit button
 Implement JavaScript to perform client-side form validation:
o Ensure that the name field is not empty.
o Check if the email field contains a valid email format.
o Validate the phone number format using regular expressions.
o Show appropriate error messages if the validation fails.
  Technologies: HTML (forms), CSS (styling), JavaScript (validation)
 SOLUTION

FOR HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>SIMPLE FORM</TITLE>
<LINK REL="STYLESHEET" HREF="STYLES.CSS">
</HEAD>
<BODY>
<DIV CLASS="FORM-CONTAINER">
<H2>CONTACT FORM</H2>
<FORM ID="CONTACTFORM">
<DIV CLASS="FORM-GROUP">
<LABEL FOR="NAME">NAME:</LABEL>
<INPUT TYPE="TEXT" ID="NAME" NAME="NAME" REQUIRED>
<SPAN CLASS="ERROR" ID="NAMEERROR"></SPAN>
</DIV>
<DIV CLASS="FORM-GROUP">
<LABEL FOR="EMAIL">EMAIL:</LABEL>
<INPUT TYPE="EMAIL" ID="EMAIL" NAME="EMAIL" REQUIRED>
<SPAN CLASS="ERROR" ID="EMAILERROR"></SPAN>
</DIV>
<DIV CLASS="FORM-GROUP">
<LABEL FOR="PHONE">PHONE NUMBER:</LABEL>
<INPUT TYPE="TEXT" ID="PHONE" NAME="PHONE" PATTERN="^\D{10}$" REQUIRED>
<SPAN CLASS="ERROR" ID="PHONEERROR"></SPAN>
</DIV>
<BUTTON TYPE="SUBMIT">SUBMIT</BUTTON>
</FORM>
</DIV>
<SCRIPT SRC="SCRIPT.JS"></SCRIPT>
</BODY>
</HTML>

FOR STYLING CSS

BODY {
FONT -FAMILY : ARIAL , SANS -SERIF ;
BACKGROUND -COLOR : #F 4F 4F 4;
 MARGIN : 0;
PADDING : 20PX ;
}

.FORM-CONTAINER {
MAX -WIDTH : 400 PX ;
MARGIN : AUTO ;
BACKGROUND : WHITE ;
PADDING : 20PX ;
BORDER -RADIUS : 5PX ;
BOX-SHADOW : 0 0 10 PX RGBA (0, 0, 0, 0.1);
}

H2 {
TEXT -ALIGN : CENTER ;
}

.FORM-GROUP {
MARGIN -BOTTOM : 15PX ;
}

LABEL {
DISPLAY : BLOCK ;
MARGIN -BOTTOM : 5PX;
}

INPUT {
WIDTH : 100%;
PADDING : 8PX ;
BOX-SIZING : BORDER -BOX;
}

.ERROR {
COLOR : RED ;
FONT -SIZE : 0.9 EM ;
}
 FOR JAVASCRIPT

DOCUMENT .GET E LEMENT B YI D(' CONTACT FORM '). ADD E VENT L ISTENER (' SUBMIT ', FUNCTION (EVENT ) {
EVENT .PREVENT DEFAULT (); // P REVENT FORM SUBMISSION

// CLEAR PREVIOUS ERROR MESSAGES

DOCUMENT .GET E LEMENT B YI D(' NAME E RROR'). TEXT CONTENT = '';
DOCUMENT .GET E LEMENT B YI D(' EMAIL E RROR'). TEXT CONTENT = '';
DOCUMENT .GET E LEMENT B YI D(' PHONE E RROR'). TEXT CONTENT = '';

// G ET FORM VALUES
CONST NAME = DOCUMENT .GET E LEMENT B YI D(' NAME '). VALUE .TRIM ();
CONST EMAIL = DOCUMENT .GET E LEMENT B YI D(' EMAIL '). VALUE .TRIM ();
CONST PHONE = DOCUMENT .GET E LEMENT B YI D(' PHONE '). VALUE .TRIM ();

LET VALID = TRUE;

// VALIDATE NAME
IF (NAME === '') {
DOCUMENT .GET E LEMENT B YI D(' NAME E RROR'). TEXT CONTENT = 'N AME IS REQUIRED .';
VALID = FALSE ;
}

// VALIDATE EMAIL
CONST EMAIL PATTERN = /^[^\ S@]+@[^\ S@]+\.[^\ S@]+$/;
IF (! EMAIL PATTERN .TEST (EMAIL )) {
DOCUMENT .GET E LEMENT B YI D(' EMAIL E RROR'). TEXT CONTENT = 'P LEASE ENTER A VALID EMAIL
ADDRESS .';
VALID = FALSE ;
}

// VALIDATE PHONE NUMBER (10 DIGITS)

CONST PHONE PATTERN = /^\ D{10}$/;
IF (! PHONE PATTERN .TEST (PHONE )) {
DOCUMENT .GET E LEMENT B YI D(' PHONE E RROR'). TEXT CONTENT = 'P HONE NUMBER MUST BE 10
DIGITS .';
VALID = FALSE ;
}

// IF ALL VALIDATIONS PASS, SUBMIT THE FORM

IF (VALID ) {
ALERT ('F ORM SUBMITTED SUCCESSFULLY !');
// H ERE YOU CAN ADD CODE TO ACTUALLY SUBMIT THE FORM IF NEEDED
// E.G., USING AJAX OR BY REMOVING THE EVENT.PREVENTDEFAULT() LINE
 }
});
OUTPUT
PRACTICAL-2
2. Create a Simple Web Page
 Description: Design a basic web page with the following components:
o A header with a navigation bar containing links to different sections on the page (e.g.,
Home, About, Contact).
o An image of your choice (e.g., a logo or photo) inserted using the <img> tag.
o A footer with contact information or copyright details.
o The page should include at least one paragraph of text and a list of your favorite hobbies
or interests (use an unordered or ordered list).
 SOLUTION

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Basic Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
margin: 10px 0;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
img {
display: block;
margin: 20px auto;
 max-width: 100%;
height: auto;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
.content {
padding: 20px;
}
</style>
</head>
<body>

<header>
<h1>Welcome to My Web Page</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>

<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">

<div class="content">
<h2>About Me</h2>
<p>Hello! I'm glad you visited my web page. Here, I share a little about myself and my interests.</p>

<h3>My Hobbies</h3>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Photography</li>
<li>Cycling</li>
<li>Cooking</li>
</ul>
</div>
<footer>
<p>Contact: [email protected] | &copy; 2023 My Web Page</p>
</footer>

</body>
</html>
```
OUTPUT
PRACTICAL-3

3. Create a Table for a Product List

 Description: Create a table that displays a list of products. Each row should include the product
name, description, price, and availability status (in-stock/out of stock). Use the <table>, <tr>, <th>,
and <td> tags.
o Include headers for each column (e.g., Product, Description, Price, Availability).
o Add at least five products with different information in each column.
o Ensure the table has a simple and clear design (you can use inline CSS for basic styling if
required).
 Skills Tested: Using tables, rows, and cells in HTML, creating headers for tables.
 SOLUTION
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>PRODUCT LIST</TITLE>
</HEAD>
<BODY>

<TABLE STYLE="WIDTH: 100%; BORDER-COLLAPSE: COLLAPSE; MARGIN: 20PX 0;">

<TR>
<TH STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX; TEXT-ALIGN: LEFT;">PRODUCT</TH>
<TH STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX; TEXT-ALIGN: LEFT;">DESCRIPTION</TH>
<TH STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX; TEXT-ALIGN: LEFT;">PRICE</TH>
<TH STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX; TEXT-ALIGN: LEFT;">AVAILABILITY</TH>
</TR>
<TR>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">WIRELESS HEADPHONES</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">NOISE-CANCELLING OVER-EAR HEADPHONES
WITH BLUETOOTH.</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">$199.99</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">IN STOCK</TD>
</TR>
<TR>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">SMARTWATCH</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">FITNESS TRACKER WITH HEART RATE MONITOR
AND GPS.</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">$149.99</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">OUT OF STOCK</TD>
</TR>
<TR>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">LAPTOP STAND</TD>
 <TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">ADJUSTABLE LAPTOP STAND FOR ERGONOMIC
USE.</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">$39.99</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">IN STOCK</TD>
</TR>
<TR>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">BLUETOOTH SPEAKER</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">PORTABLE SPEAKER WITH 12 HOURS OF
BATTERY LIFE.</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">$79.99</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">IN STOCK</TD>
</TR>
<TR>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">4K MONITOR</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">27-INCH 4K UHD MONITOR WITH HDR
SUPPORT.</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">$399.99</TD>
<TD STYLE="BORDER: 1PX SOLID #DDDDDD; PADDING: 8PX;">OUT OF STOCK</TD>
</TR>
</TABLE>

</BODY>
</HTML>
```
OUTPUT
PRACTICAL-4
4. Create an Ordered and Unordered List
 Description: Create a web page that contains:
o An unordered list (<ul>) with at least five items, representing your top five favorite foods,
hobbies, or travel destinations.
o An ordered list (<ol>) with at least five items, representing steps to complete a task (e.g.,
how to make a cup of tea or how to prepare a sandwich).
 Skills Tested: Lists (ordered and unordered), organizing content using HTML elements.
 SOLUTION
`HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>MY FAVORITE FOODS AND HOW TO MAKE TEA</TITLE>
<STYLE>
BODY {
FONT-FAMILY: ARIAL, SANS-SERIF;
MARGIN: 20PX;
BACKGROUND-COLOR: #F4F4F4;
}
H1 {
COLOR: #333;
}
UL, OL {
BACKGROUND: #FFF;
PADDING: 15PX;
BORDER-RADIUS: 5PX;
BOX-SHADOW: 0 2PX 5PX RGBA(0,0,0,0.1);
}
</STYLE>
</HEAD>
<BODY>

<H1>MY FAVORITE FOODS</H1>

<UL>
<LI>PIZZA</LI>
<LI>SUSHI</LI>
<LI>CHOCOLATE CAKE</LI>
<LI>SPAGHETTI CARBONARA</LI>
<LI>ICE CREAM</LI>
</UL>

<H1>HOW TO MAKE A CUP OF TEA</H1>

 <OL>
<LI>BOIL WATER IN A KETTLE.</LI>
<LI>ADD A TEA BAG TO YOUR CUP.</LI>
<LI>POUR THE BOILING WATER OVER THE TEA BAG.</LI>
<LI>LET IT STEEP FOR 3-5 MINUTES.</LI>
<LI>REMOVE THE TEA BAG AND ENJOY YOUR TEA!</LI>
</OL>

</BODY>
</HTML>
```
OUTPUT
PRACTICAL-5
5. Create a Navigation Bar
 Description: Create a horizontal navigation bar that contains the following links:
o Home
o About Us
o Services
o Contact
 Make sure that the navigation links are styled (using inline or internal CSS) so that they appear
horizontally and have a hover effect (e.g., change color when hovered).
 Skills Tested: Creating links, working with navigation bars, basic CSS for styling (if needed).
 solution

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
/* Basic styling for the navigation bar */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.navbar {
background-color: #333; /* Dark background */
overflow: hidden; /* Clear floats */
}

.navbar a {
float: left; /* Align links horizontally */
display: block; /* Make links fill the container */
color: white; /* Text color */
text-align: center; /* Center text */
padding: 14px 20px; /* Padding for links */
text-decoration: none; /* Remove underline */
}

.navbar a:hover {
background-color: #ddd; /* Light background on hover */
color: black; /* Change text color on hover */
}
</style>
</head>
<body>

<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>

<div style="padding: 20px;">

<h1>Welcome to Our Website</h1>
<p>This is a simple example of a horizontal navigation bar.</p>
</div>

</body>
</html>
```
OUTPUT
PRACTICAL-6
6. Create an HTML Resume Page
 Description: Create a simple resume page that contains the following sections:
o A personal information section (name, contact details).
o An education section with the names of institutions, years attended, and degrees
earned.
o A work experience section with job titles, companies, and employment dates.
o A skills section listing your top skills.
o Use semantic HTML elements where possible, such as <section>, <article>, <header>,
<footer>, and <ul>.
 Skills Tested: Resume formatting with HTML, using semantic tags, creating structured content
 solution.
`HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>RESUME</TITLE>
<STYLE>
BODY {
FONT-FAMILY: ARIAL, SANS-SERIF;
LINE-HEIGHT: 1.6;
MARGIN: 20PX;
PADDING: 20PX;
BORDER: 1PX SOLID #CCC;
BORDER-RADIUS: 5PX;
MAX-WIDTH: 600PX;
}
HEADER {
TEXT-ALIGN: CENTER;
}
SECTION {
MARGIN-BOTTOM: 20PX;
}
H2 {
BORDER-BOTTOM: 2PX SOLID #CCC;
PADDING-BOTTOM: 5PX;
}
UL {
LIST-STYLE-TYPE: NONE;
PADDING: 0;
}
</STYLE>
</HEAD>
<BODY>

<HEADER>
<H1>JOHN DOE</H1>
<P>EMAIL: [email protected] | PHONE: (123) 456-7890</P>
<P>LOCATION: CITY, STATE</P>
</HEADER>

<SECTION>
<H2>EDUCATION</H2>
<ARTICLE>
<H3>UNIVERSITY OF EXAMPLE</H3>
<P>BACHELOR OF SCIENCE IN COMPUTER SCIENCE</P>
<P>2015 - 2019</P>
</ARTICLE>
<ARTICLE>
<H3>EXAMPLE HIGH SCHOOL</H3>
<P>HIGH SCHOOL DIPLOMA</P>
<P>2011 - 2015</P>
</ARTICLE>
</SECTION>

<SECTION>
<H2>WORK EXPERIENCE</H2>
<ARTICLE>
<H3>SOFTWARE DEVELOPER</H3>
<P>EXAMPLE TECH COMPANY</P>
<P>JUNE 2019 - PRESENT</P>
</ARTICLE>
<ARTICLE>
<H3>INTERN</H3>
<P>EXAMPLE STARTUP</P>
<P>JANUARY 2019 - MAY 2019</P>
</ARTICLE>
</SECTION>

<SECTION>
<H2>SKILLS</H2>
<UL>
<LI>JAVASCRIPT</LI>
<LI>HTML & CSS</LI>
<LI>REACT</LI>
<LI>NODE.JS</LI>
<LI>PROBLEM SOLVING</LI>
</UL>
</SECTION>

<FOOTER>
<P>REFERENCES AVAILABLE UPON REQUEST.</P>
</FOOTER>
</BODY>
</HTML>
OUTPUT
PRACTICAL-7
7. Simple Calculator
 Description: Create a simple calculator using JavaScript that performs basic arithmetic
operations (addition, subtraction, multiplication, division). The calculator should have:
o Number buttons (0-9).
o Operation buttons (+, -, *, /).
o A display screen that shows the current value.
o A button to clear the display.
o The calculator should update the display as numbers and operations are clicked.
 Skills Tested: DOM manipulation, event handling, basic JavaScript operations.
 solution

FOR HTML

<!DOCTYPE HTML>

<HTML LANG="EN">

<HEAD>

<META CHARSET="UTF-8">

<META NAME="VIEWPORT " CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">

<TITLE>SIMPLE CALCULATOR </TITLE>

<LINK REL="STYLESHEET " HREF="STYLES.CSS">

</HEAD>

<BODY>

<DIV CLASS="CALCULATOR">

< INPUT TYPE="TEXT" ID="DISPLAY" DISABLED >

< DIV CLASS="BUTTONS">

< BUTTON CLASS="BTN" ONCLICK="CLEARDISPLAY()">C</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('/')">/</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('*')">*</ BUTTON>

 < BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('-')">-</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('7')">7</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('8')">8</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('9')">9</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('+')">+</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('4')">4</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('5')">5</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('6')">6</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="CALCULATE RESULT()">=</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('1')">1</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('2')">2</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('3')">3</ BUTTON>

< BUTTON CLASS="BTN" ONCLICK="APPENDTODISPLAY('0')">0</ BUTTON>

</ DIV>

</ DIV>

<SCRIPT SRC="SCRIPT.JS"></SCRIPT>

</BODY>

</HTML>

FOR CSS STYLING

body {

display: flex;

justify-content: center;
 align-items: center;

height: 100vh;

background-color: #f0f0f0;

font-family: Arial, sans-serif;

.calculator {

border: 1px solid #ccc;

border-radius: 10px;

padding: 20px;

background-color: white;

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

#display {

width: 100%;

height: 40px;

font-size: 24px;

text-align: right;

margin-bottom: 10px;

padding: 5px;

border: 1px solid #ccc;

border-radius: 5px;

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;
}

.btn {

padding: 20px;

font-size: 18px;

border: none;

border-radius: 5px;

background-color: #007bff;

color: white;

cursor: pointer;

transition: background-color 0.3s;

.btn:hover {

background-color: #0056b3;

FOR JAVASCRIPT

function appendToDisplay(value) {

const display = document.getElementById('display');

display.value += value;

}
function clearDisplay() {

const display = document.getElementById('display');

display.value = '';

function calculateResult() {

const display = document.getElementById('display');

try {

display.value = eval(display.value);

} catch (error) {

display.value = 'Error';

}
OUTPUT
PRACTICAL-8
8. Palindrome Checker
 Description: Create a function that checks if a given word or phrase is a palindrome. The
function should:
o Accept user input (a string).
o Ignore spaces, punctuation, and case sensitivity.
o Return true if the input is a palindrome, and false otherwise.
o Display the result on the webpage (e.g., "Yes, it's a palindrome!" or "No, it's not a
palindrome!").
 SOLUTION
<!DOCTYPE HTML>

<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>PALINDROME CHECKER</TITLE>
<STYLE>
BODY {
FONT -FAMILY : ARIAL , SANS -SERIF ;
MARGIN : 20PX ;
}
</ STYLE>
</HEAD>
<BODY>
<H1>PALINDROME CHECKER</H1>
<INPUT TYPE="TEXT" ID="INPUTTEXT" PLACEHOLDER ="ENTER A WORD OR PHRASE">
<BUTTON ONCLICK="CHECKPALINDROME()">CHECK</BUTTON>
<P ID="RESULT"></P>

<SCRIPT>
FUNCTION CHECK PALINDROME () {
// G ET USER INPUT
CONST INPUT = DOCUMENT .GET E LEMENT B YI D(' INPUT T EXT '). VALUE ;

// N ORMALIZE THE INPUT: REMOVE SPACES, PUNCTUATION , AND CONVERT TO LOWERCASE

CONST NORMALIZED I NPUT = INPUT
. REPLACE(/[\W_]/ G, '') // R EMOVE NON-ALPHANUMERIC CHARACTERS
. TOLOWERCASE(); // CONVERT TO LOWERCASE

// D ISPLAY THE RESULT

CONST RESULT T EXT = ISPALINDROME ? "Y ES, IT 'S A PALINDROME !" : "N O, IT 'S NOT A
PALINDROME !";
DOCUMENT .GET E LEMENT B YI D(' RESULT '). INNER T EXT = RESULT T EXT ;
}
</ SCRIPT>
</BODY>
</HTML>
OUTPUT
PRACTICAL 9
9. Create a Form with Stylish Input Fields
 Description: Design a form with the following input fields:
o Full Name (text input)
o Email (email input)
o Message (textarea)
o A Submit button
 Use CSS to style the form:
o Add padding, borders, and a background color to the input fields.
o Style the submit button with hover effects.
o Make the form visually appealing (e.g., rounded corners, subtle shadows).
o Add focus styles for the input fields when clicked.
 Skills Tested: Form styling, button styling, input focus states.
 SOLUTION

FOR HTML

`HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>CONTACT FORM</TITLE>
<LINK REL="STYLESHEET" HREF="STYLES.CSS">
</HEAD>
<BODY>
<DIV CLASS="FORM-CONTAINER">
<FORM CLASS="CONTACT-FORM">
<H2>CONTACT US</H2>
<LABEL FOR="FULL-NAME">FULL NAME:</LABEL>
<INPUT TYPE="TEXT" ID="FULL-NAME" NAME="FULL-NAME" REQUIRED>

<LABEL FOR="EMAIL">EMAIL:</LABEL>
<INPUT TYPE="EMAIL" ID="EMAIL" NAME="EMAIL" REQUIRED>

<LABEL FOR="MESSAGE">MESSAGE:</LABEL>
<TEXTAREA ID="MESSAGE" NAME="MESSAGE" ROWS="4" REQUIRED></TEXTAREA>

<BUTTON TYPE="SUBMIT">SUBMIT</BUTTON>
</FORM>
</DIV>
</BODY>
</HTML>

FOR STYLING CSS

`css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.form-container {

background-color: #ffffff;

padding: 20px;

border-radius: 8px;

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

width: 300px;

.contact-form {

display: flex;

flex-direction: column;

}
.contact-form h2 {

text-align: center;

margin-bottom: 20px;

label {

margin-bottom: 5px;

input[type="text"],

input[type="email"],

textarea {

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

margin-bottom: 15px;

transition: border-color 0.3s, box-shadow 0.3s;

input[type="text"]:focus,

input[type="email"]:focus,

textarea:focus {

border-color: #007BFF;

box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

outline: none;

button {

padding: 10px;

background-color: #007BFF;

color: white;
 border: none;

border-radius: 4px;

cursor: pointer;

transition: background-color 0.3s, transform 0.2s;

button:hover {

background-color: #0056b3;

transform: scale(1.05);

button:active {

transform: scale(0.95);

```
OUTPUT
PRACTICAL-10
10. Create a Web Page with Embedded Media
 Description: Create a webpage that includes:
o An embedded YouTube video (use the <iframe> tag).
o An audio file embedded using the <audio> tag.
o A background image for the webpage (using the <body> tag with an inline style
or the <style> tag).
 Skills Tested: Embedding media, background images, understanding the <iframe> and
<audio> tags.
 SOLUTION

HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>MEDIA EMBEDDING EXAMPLE</TITLE>
<STYLE>
BODY {
BACKGROUND-IMAGE: URL('HTTPS://EXAMPLE.COM/YOUR-BACKGROUND-IMAGE.JPG'); /*
REPLACE WITH YOUR IMAGE URL */
BACKGROUND-SIZE: COVER;
BACKGROUND-POSITION: CENTER;
COLOR: WHITE; /* TEXT COLOR FOR BETTER VISIBILITY */
FONT-FAMILY: ARIAL, SANS-SERIF;
TEXT-ALIGN: CENTER;
PADDING: 20PX;
}
</STYLE>
</HEAD>
<BODY>

<H1>WELCOME TO MY MEDIA PAGE</H1>

<H2>EMBEDDED YOUTUBE VIDEO</H2>

<IFRAME WIDTH="560" HEIGHT="315"
SRC="HTTPS://WWW.YOUTUBE.COM/EMBED/DQW4W9WGXCQ"
TITLE="YOUTUBE VIDEO PLAYER" FRAMEBORDER="0"
ALLOW="ACCELEROMETER; AUTOPLAY; CLIPBOARD-WRITE; ENCRYPTED-MEDIA; GYROSCOPE;
PICTURE-IN-PICTURE"
ALLOWFULLSCREEN></IFRAME>

<H2>EMBEDDED AUDIO FILE</H2>

<AUDIO CONTROLS>
<SOURCE SRC="HTTPS://WWW.EXAMPLE.COM/YOUR-AUDIO-FILE.MP3" TYPE="AUDIO/MPEG"> <!--
REPLACE WITH YOUR AUDIO FILE URL -->
YOUR BROWSER DOES NOT SUPPORT THE AUDIO ELEMENT.
 </AUDIO>

</BODY>
</HTML>
OUTPUT