[go: up one dir, main page]
Scribd
Upload
16 views77 pages

Sark Esh

Uploaded by

futurtech2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views77 pages

Sark Esh

Uploaded by

futurtech2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 77

Ex No: 1a Write a HTML program, to explain the working of lists, It should have an

ordered list, unordered list, nested lists and ordered list in an unordered list and
Date: definition lists.

Aim:
To implement the html program was working with lists.

Program:

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

<h2>Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

<h2>Nested Lists</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
1
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<li>Banana</li>
<li>Cherry</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>

<h2>Ordered List in an Unordered List</h2>


<ul>
<li>Category 1
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ol>
</li>
<li>Category 2
<ol>
<li>Sub-item A</li>
<li>Sub-item B</li>
</ol>
</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
2
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<dd>A scripting language for web development</dd>
</dl>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
3
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 1b
Write a HTML program, to explain the working of hyperlinks using <a> tag
Date: and href, target Attributes.

Aim:
To implement a HTML program, to explain the working of hyperlinks using <a> tag
and href, target Attributes.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Hyperlinks Example</h1>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="https://www.wikipedia.org" target="_self">Visit Wikipedia</a></p>
<p><a href="#section2" target="_self">Jump to Section 2</a></p>
<h2 id="section2">Section 2</h2>
<p>This is Section 2 content.</p>
</body>
</html>

Output:

4
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Result:

Thus, the above program is executed successfully, and the output is verified.
5
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 1c 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
Date: to their respective profiles.

Aim:
To implement 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.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Links</title>
</head>
<body>
<h1>Image Links</h1>
<a href="https://your-profile-link.com" target="_blank">
<img src="your-image.jpg" alt="Your Image" height="200" width="200">
</a>
<a href="https://friends-profile-link.com" target="_blank">
<img src="friends-image.jpg" alt="Friend's Image" height="200" width="200">
</a>
</body>
</html>

6
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

7
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Write a HTML program, in such a way that, rather than placing large
Ex No: 1d 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
Date: thumbnail image is also a link to a full sized version of the image. Create an
image gallery using this technique.

Aim:
To implement 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.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<a href="image1-full.jpg" target="_blank">
<img src="image1-thumbnail.jpg" alt="Image 1 Thumbnail" width="100"
height="100">
</a>
<a href="image2-full.jpg" target="_blank">
<img src="image2-thumbnail.jpg" alt="Image 2 Thumbnail" width="100"
height="100">
</a>
<a href="image3-full.jpg" target="_blank">
<img src="image3-thumbnail.jpg" alt="Image 3 Thumbnail" width="100"
height="100">
</a>
</body>
</html>

8
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

9
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 2a Write a HTML program, to explain the working of tables. (use tags:
Date: <table>, <tr>, <th>, <td> and attributes: border, rowspan, colspan)

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

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<h1>Working with Tables</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td rowspan="2">Rowspan Example</td>
</tr>
<tr>
<td colspan="2">Colspan Example</td>
</tr>
</table>
</body>
</html>

10
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
11
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 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
Date: cell spacing, cell padding, border, rowspan, colspan etc.)

Aim:
To implement 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.).

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timetable Example</title>
</head>
<body>
<h1>Timetable</h1>
<table border="1" cellspacing="5" cellpadding="10">
<caption><strong>Weekly Class Timetable</strong></caption>
<tr>
<th>Day</th>
<th>9:00 AM - 10:00 AM</th>
<th>10:00 AM - 11:00 AM</th>
<th>11:00 AM - 12:00 PM</th>
<th>12:00 PM - 1:00 PM</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td rowspan="2">Physics</td>
<td>Chemistry</td>
<td>Lunch Break</td>
</tr>
<tr>
<td>Tuesday</td>
12
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<td>English</td>
<td>Computer Science</td>
<td>Lunch Break</td>
</tr>
</table>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

13
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Write a HTML program, to explain the working of forms by designing
Ex No: 2c Registration form. (Note: Include text field, password field, number field,
date of birth field, checkboxes, radio buttons, list boxes using
Date: <select>&<option> tags, <text area> and two buttons ie: submit and reset.
Use tables to provide a better view)

Aim:
To implement 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).

Program:

<!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>
</head>
<body>
<h1>Registration Form</h1>
<form>
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>Full Name:</td>
<td><input type="text" name="fullname" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" required></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" name="age" min="1" required></td>
</tr>
<tr>
<td>Date of Birth:</td>
14
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<td><input type="date" name="dob" required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female"> Female
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobbies" value="Reading"> Reading
<input type="checkbox" name="hobbies" value="Sports"> Sports
<input type="checkbox" name="hobbies" value="Music"> Music
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country" required>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<tr>
<td>About You:</td>
<td><textarea name="about" rows="4" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
15
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
</td>
</tr>
</table>
</form>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

16
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 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
Date:
frame” attribute such that frames to be fixed).

Aim:
To implement 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).

Program:

<!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%">
<frame src="image.html" name="imageFrame" noresize>
<frame src="paragraph.html" name="textFrame" noresize>
<frame src="links.html" name="linkFrame" noresize>
<noframes>
<body>
<p>Your browser does not support frames.</p>
</body>
</noframes>
</frameset>
</html>

Supporting Files for Frames:

1. image.html:

<!DOCTYPE html>
<html>
<body>
<h1>Image Frame</h1>
<img src="example.jpg" alt="Example Image" width="300" height="200">
17
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
</body>
</html>

2. paragraph.html:

<!DOCTYPE html>
<html>
<body>
<h1>Paragraph Frame</h1>
<p>This is a paragraph displayed in the middle frame.</p>
</body>
</html>

3. links.html:

<!DOCTYPE html>
<html>
<body>
<h1>Links Frame</h1>
<a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

18
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

19
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 3a Write a HTML program, that makes use of <article>, <aside>, <figure>,
<figcaption>, <footer>, <header>, <main>, <nav>, <section>, <div>, <span>
Date: tags.

Aim:
To implement 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).

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tags Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>Welcome to my website where you can find articles and resources.</p>
</section>
<section id="about">
<h2>About Me</h2>
<article>

20
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<h3>Personal Info</h3>
<p>My name is John Doe, a web developer and designer.</p>
</article>
<aside>
<h3>Quick Info</h3>
<p>Contact me at <strong>email@example.com</strong>.</p>
</aside>
</section>
<section id="gallery">
<h2>Gallery</h2>
<figure>
<img src="example.jpg" alt="Example Image" width="300">
<figcaption>A beautiful scenery.</figcaption>
</figure>
</section>
</main>
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>

21
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

22
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 3b
Write a HTML program, to embed audio and video into HTML web page.
Date:

Aim:
To implement a HTML program, to embed audio and video into HTML web page.

Program:

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

<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<h2>Video</h2>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

23
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
24
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 3c Write a program to apply different types (or levels of styles or style
specification formats) - inline, internal, external styles to HTML elements.
Date: (identify selector, property andvalue).

Aim:
To implement a HTML program to apply different types (or levels of styles or style
specification formats) - inline, internal, external styles to HTML elements. (identify
selector, property andvalue).

Program:
HTML File (For Inline, Internal, and External CSS)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Example</title>
<!-- Internal CSS -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
.internal-style {
color: green;
font-size: 20px;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>CSS Types Example</h1>

25
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<!-- Inline CSS -->
<p style="color: red; font-weight: bold;">This is an inline-styled paragraph.</p>

<p class="internal-style">This paragraph is styled using internal CSS.</p>

<p class="external-style">This paragraph is styled using external CSS.</p>


</body>
</html>

External CSS File (styles.css)

/* External CSS */
.external-style {
color: purple;
font-style: italic;
background-color: #e0e0ff;
padding: 5px;
}

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

26
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Write a program to apply different types of selector forms
Ex No: 4 ● Simple selector (element, id, class, group, universal)
● Combinator selector (descendant, child, adjacent sibling, general
sibling)
● Pseudo-class selector
Date: ● Pseudo-element selector
● Attribute selector

Aim:
To implement a HTML program to apply different types
● Simple selector (element, id, class, group, universal)
● Combinator selector (descendant, child, adjacent sibling, general sibling)
● Pseudo-class selector
● Pseudo-element selector
● Attribute selector

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selector Forms</title>
<style>
/* Simple Selectors */
p { color: blue; } /* Element selector */
#unique { font-weight: bold; } /* ID selector */
.highlight { background-color: yellow; } /* Class selector */
h1, h2, h3 { color: green; } /* Group selector */
* { font-family: Arial, sans-serif; } /* Universal selector */

/* Combinator Selectors */
div p { color: purple; } /* Descendant selector */
div > p { color: darkorange; } /* Child selector */
h1 + p { font-size: 1.2em; } /* Adjacent sibling selector */
h1 ~ p { font-style: italic; } /* General sibling selector */

/* Pseudo-class Selectors */
a:hover { color: red; } /* Hover pseudo-class */

27
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
li:first-child { color: darkblue; } /* First-child pseudo-class */
input:focus { border: 2px solid green; } /* Focus pseudo-class */

/* Pseudo-element Selectors */
p::first-line { font-weight: bold; } /* First-line pseudo-element */
p::first-letter { font-size: 2em; color: red; } /* First-letter pseudo-element */

/* Attribute Selectors */
input[type="text"] { border: 1px solid blue; } /* Attribute equals selector */
input[type^="pass"] { background-color: #f9f9f9; } /* Attribute starts with selector */
input[type$="word"] { color: green; } /* Attribute ends with selector */
input[placeholder*="name"] { font-style: italic; } /* Attribute contains selector */
</style>
</head>
<body>
<h1>CSS Selector Forms</h1>

<!-- Simple Selectors -->


<p>This paragraph is styled using a simple element selector.</p>
<p id="unique">This paragraph is styled using an ID selector.</p>
<p class="highlight">This paragraph is styled using a class selector.</p>

<!-- Combinator Selectors -->


<div>
<p>This paragraph is a descendant of a div.</p>
<p>This paragraph is a child of a div.</p>
</div>
<h1>Heading 1</h1>
<p>This paragraph is adjacent to Heading 1.</p>
<p>This paragraph is a sibling of Heading 1.</p>

<!-- Pseudo-class Selectors -->


<a href="#">Hover over this link</a>
<ul>
<li>This is the first child of the list.</li>

28
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<li>This is another list item.</li>
</ul>
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter password">

<!-- Pseudo-element Selectors -->


<p>This paragraph demonstrates pseudo-elements. The first line is bold, and the first letter
is enlarged and red.</p>

<!-- Attribute Selectors -->


<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter password">
<input type="text" placeholder="Enter your password">
</body>
</html>

29
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

30
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 5a Write a program to demonstrate the various ways you can reference a color in
CSS
Date:

Aim:
To implement a HTML program to demonstrate the various ways you can reference a
color in CSS.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors</title>
<style>
/* Named Color */
.named-color {
color: red;
}
/* Hexadecimal Color */
.hex-color {
color: #00ff00;
}
/* RGB Color */
.rgb-color {
color: rgb(0, 0, 255);
}
/* RGBA Color */
.rgba-color {
color: rgba(255, 165, 0, 0.8);
}
/* HSL Color */
.hsl-color {
color: hsl(240, 100%, 50%);
}

31
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
/* HSLA Color */
.hsla-color {
color: hsla(300, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<h1>CSS Color Demonstration</h1>
<p class="named-color">This text is colored using a named color.</p>
<p class="hex-color">This text is colored using a hexadecimal value.</p>
<p class="rgb-color">This text is colored using an RGB value.</p>
<p class="rgba-color">This text is colored using an RGBA value.</p>
<p class="hsl-color">This text is colored using an HSL value.</p>
<p class="hsla-color">This text is colored using an HSLA value.</p>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
32
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 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
Date: scrolls up or down.

Aim:
To implement 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.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image</title>
<style>
body {
height: 200vh; /* For scroll effect */
background-image: url('example.jpg');
background-repeat: repeat-x; /* Repeat horizontally */
background-position: 50% 50%; /* Halfway down the page */
background-attachment: fixed; /* Stays in place on scroll */
}
</style>
</head>
<body>
<h1>Background Image Example</h1>
<p>Scroll up and down to see the effect of the fixed background image.</p>
</body>
</html>

33
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
34
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 5c Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
Date: iv. text-decoration v. text-transformation vi. text-alignment

Aim:

To implement a CSS 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

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font and Text Styling</title>
<style>
.font-size {
font-size: 20px;
}

.font-weight {
font-weight: bold;
}

.font-style {
font-style: italic;
}

.text-decoration {
text-decoration: underline;
}

.text-transformation {
text-transform: uppercase;
}

35
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
.text-alignment {
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Font and Text Styling</h1>
<p class="font-size">This text demonstrates the font-size property.</p>
<p class="font-weight">This text demonstrates the font-weight property.</p>
<p class="font-style">This text demonstrates the font-style property.</p>
<p class="text-decoration">This text demonstrates the text-decoration property.</p>
<p class="text-transformation">This text demonstrates the text-transform property.</p>
<p class="text-alignment">This text demonstrates the text-align property.</p>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
36
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 5d Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding
Date:

Aim:

To implement a HTML program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding.

Program:

<!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</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px; /* Space outside the border */
padding: 10px; /* Space between content and border */
border: 5px solid darkblue; /* Border around the content */
}
</style>
</head>
<body>
<h1>CSS Box Model</h1>
<div class="box">
This box demonstrates the importance of content, padding, border, and margin.
</div>
</body>
</html>

37
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
38
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 6a
Write a program to embed internal and external JavaScript in a web page
Date:

Aim:

To implement a HTML program, to embed internal and external JavaScript in a web


page.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal and External JavaScript</title>
<script>
// Internal JavaScript
function showInternalMessage() {
alert("This is an internal JavaScript function.");
}
</script>
<script src="external.js"></script> <!-- Link to external JavaScript -->
</head>
<body>
<h1>Internal and External JavaScript</h1>
<button onclick="showInternalMessage()">Call Internal Script</button>
<button onclick="showExternalMessage()">Call External Script</button>
</body>
</html>

External JavaScript File (external.js)


// External JavaScript
function showExternalMessage() {
alert("This is an external JavaScript function.");
}

39
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
40
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 6b
Write a program to explain the different ways for displaying output
Date:

Aim:

To implement a HTML program, to explain the different ways for displaying output.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output Methods</title>
<script>
function displayOutput() {
// Using alert
alert("This is an alert box!");

// Using console.log
console.log("This is a message in the console.");

// Using document.write
document.write("<p>This is written using document.write()</p>");

// Using DOM manipulation


document.getElementById("output").innerHTML = "This is using innerHTML.";
}
</script>
</head>
<body>
<h1>Output Methods</h1>
<button onclick="displayOutput()">Display Output</button>
<div id="output"></div>
</body>

41
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
</html>
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
42
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 6c
Write a program to explain the different ways for taking input
Date:

Aim:

To implement a HTML program, to explain the different ways for taking input.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Methods</title>
<script>
function takeInput() {
// Using prompt
const name = prompt("Enter your name:");
alert("You entered: " + name);

// Using input field


const inputFieldValue = document.getElementById("inputField").value;
alert("Input field value: " + inputFieldValue);

// Using event listener


const formInput = document.getElementById("formInput").value;
console.log("Form input value: " + formInput);
}
</script>
</head>
<body>
<h1>Input Methods</h1>
<input type="text" id="inputField" placeholder="Enter text here">
<br><br>
<form onsubmit="event.preventDefault(); takeInput();">

43
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<input type="text" id="formInput" placeholder="Enter form text">
<button type="submit">Submit</button>
</form>
<br>
<button onclick="takeInput()">Get Input</button>
</body>
</html>

Output:

Result:
Thus, the above program is executed successfully, and the output is verified.
44
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 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 either the
Date: voter can vote or not

Aim:

To implement 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.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voter Eligibility</title>
<script>
function checkEligibility() {
const name = prompt("Enter your name:");
const age = parseInt(prompt("Enter your age:"));

// Determine eligibility
const eligibility = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

// Display in table
document.getElementById("voterTable").innerHTML = `
<table border="1" cellpadding="10">
<tr>
<th>Name</th>
<th>Age</th>
<th>Eligibility</th>
</tr>
<tr>
<td>${name}</td>
<td>${age}</td>
<td>${eligibility}</td>
45
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
</tr>
</table>
`;
}
</script>
</head>
<body>
<h1>Voter Eligibility Checker</h1>
<button onclick="checkEligibility()">Check Eligibility</button>
<div id="voterTable"></div>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
46
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7a
Write a program using document object properties and methods
Date:

Aim:

To implement a HTML program, to document object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Object</title>
<script>
function showDocumentDetails() {
document.getElementById("details").innerHTML = `
<p>Title: ${document.title}</p>
<p>URL: ${document.URL}</p>
<p>Last Modified: ${document.lastModified}</p>
`;
}
</script>
</head>
<body>
<h1>Document Object Example</h1>
<button onclick="showDocumentDetails()">Show Document Details</button>
<div id="details"></div>
</body>
</html>

47
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
48
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7b
Write a program using window object properties and methods
Date:

Aim:

To implement a HTML program, to window object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Object</title>
<script>
function showWindowDetails() {
alert(`Window Dimensions: ${window.innerWidth} x ${window.innerHeight}`);
const userConfirmed = confirm("Do you want to visit Google?");
if (userConfirmed) {
window.open("https://www.google.com", "_blank");
}
}
</script>
</head>
<body>
<h1>Window Object Example</h1>
<button onclick="showWindowDetails()">Show Window Details</button>
</body>
</html>

49
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

50
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7c
Write a program using array object properties and methods
Date:

Aim:
To implement a HTML program, to array object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Object</title>
<script>
function demonstrateArrayMethods() {
const numbers = [10, 20, 30, 40];
const squaredNumbers = numbers.map(num => num ** 2);
alert(`Original Array: ${numbers}\nSquared Array: ${squaredNumbers}`);
}
</script>
</head>
<body>
<h1>Array Object Example</h1>
<button onclick="demonstrateArrayMethods()">Show Array Methods</button>
</body>
</html>
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
51
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7d
Write a program using math object properties and methods
Date:

Aim:
To implement a HTML program, to math object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Object</title>
<script>
function demonstrateMathMethods() {
const pi = Math.PI;
const sqrt = Math.sqrt(16);
const random = Math.random();
alert(`PI: ${pi}\nSquare Root of 16: ${sqrt}\nRandom Number: ${random}`);
}
</script>
</head>
<body>
<h1>Math Object Example</h1>
<button onclick="demonstrateMathMethods()">Show Math Methods</button>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
52
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7e
Write a program using string object properties and methods
Date:

Aim:
To implement a HTML program, to string object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Object</title>
<script>
function demonstrateStringMethods() {
const text = "Hello, JavaScript!";
const length = text.length;
const upper = text.toUpperCase();
const substring = text.substring(0, 5);
alert(`Text: ${text}\nLength: ${length}\nUppercase: ${upper}\nSubstring:
${substring}`);
}
</script>
</head>
<body>
<h1>String Object Example</h1>
<button onclick="demonstrateStringMethods()">Show String Methods</button>
</body>
</html>

53
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
54
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7f
Write a program using regex object properties and methods
Date:

Aim:
To implement a HTML program, to regex object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex Object</title>
<script>
function demonstrateRegex() {
const text = "The quick brown fox jumps over the lazy dog.";
const regex = /[aeiou]/g; // Find all vowels
const matches = text.match(regex);
alert(`Text: ${text}\nVowels: ${matches.join(", ")}`);
}
</script>
</head>
<body>
<h1>Regex Object Example</h1>
<button onclick="demonstrateRegex()">Show Regex Methods</button>
</body>
</html>
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
55
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7g
Write a program using date object properties and methods
Date:

Aim:
To implement a HTML program, to date object properties and methods.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Object</title>
<script>
function showDateDetails() {
const currentDate = new Date();
alert(`Current Date: ${currentDate}\nYear: ${currentDate.getFullYear()}\nMonth:
${currentDate.getMonth() + 1}`);
}
</script>
</head>
<body>
<h1>Date Object Example</h1>
<button onclick="showDateDetails()">Show Date Details</button>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
56
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 7h Write a program to explain user-defined object by using properties,
methods, accessors, constructors and display
Date:

Aim:
To implement a HTML program, to explain user-defined object by using properties,
methods, accessors, constructors and display.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User-Defined Object</title>
<script>
function Person(name, age) {
this.name = name;
this.age = age;

this.getDetails = function () {
return `Name: ${this.name}, Age: ${this.age}`;
};
}

function demonstrateUserDefinedObject() {
const person = new Person("John Doe", 25);
alert(person.getDetails());
}
</script>
</head>
<body>
<h1>User-Defined Object</h1>
<button onclick="demonstrateUserDefinedObject()">Show User-Defined Object</button>
</body>
</html>

57
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

58
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Write a program which asks the user to enter three integers, obtains the
Ex No: 8a
numbers from the user and outputs HTML text that displays the larger
number followed by the words “LARGER NUMBER” in an information
Date: message dialog. If the numbers are equal, output HTML text as “EQUAL
NUMBERS”

Aim:
To implement a HTML program, 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”.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Largest Number or Equality</title>
<script>
function findLargerNumber() {
const num1 = parseInt(prompt("Enter the first number:"));
const num2 = parseInt(prompt("Enter the second number:"));
const num3 = parseInt(prompt("Enter the third number:"));

let message;
if (num1 === num2 && num2 === num3) {
message = "EQUAL NUMBERS";
} else {
const largest = Math.max(num1, num2, num3);
message = `${largest} LARGER NUMBER`;
}
document.getElementById("result").innerText = message;
}
</script>
</head>
<body>
<h1>Larger Number Checker</h1>

59
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<button onclick="findLargerNumber()">Check Numbers</button>
<p id="result"></p>
</body>
</html>

Output:

Result:
Thus, the above program is executed successfully, and the output is verified.

60
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 8b
Write a program to display week days using switch case
Date:

Aim:
To implement a HTML program, to display week days using switch case.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week Days</title>
<script>
function displayDay() {
const dayNumber = parseInt(prompt("Enter a number (1-7):"));
let day;
switch (dayNumber) {
case 1: day = "Monday"; break;
case 2: day = "Tuesday"; break;
case 3: day = "Wednesday"; break;
case 4: day = "Thursday"; break;
case 5: day = "Friday"; break;
case 6: day = "Saturday"; break;
case 7: day = "Sunday"; break;
default: day = "Invalid Input";
}
document.getElementById("result").innerText = day;
}
</script>
</head>
<body>
<h1>Week Days</h1>
<button onclick="displayDay()">Enter Day Number</button>
<p id="result"></p>

61
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
62
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 8c
Write a program to print 1 to 10 numbers using for, while and do-while loops
Date:

Aim:
To implement a HTML program, to print 1 to 10 numbers using for, while and do-
while loops.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loops Example</title>
<script>
function printNumbers() {
let result = "Using for loop: ";
for (let i = 1; i <= 10; i++) {
result += i + " ";
}

result += "<br>Using while loop: ";


let j = 1;
while (j <= 10) {
result += j + " ";
j++;
}

result += "<br>Using do-while loop: ";


let k = 1;
do {
result += k + " ";
k++;
} while (k <= 10);

63
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<h1>Print Numbers Using Loops</h1>
<button onclick="printNumbers()">Print Numbers</button>
<div id="result"></div>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
64
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 8d
Write aprogram to print data in object using for-in, for-each and for-of loops
Date:

Aim:
To implement a HTML program, to print data in object using for-in, for-each and for-
of loops.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Loops</title>
<script>
function displayObjectData() {
const person = { name: "Alice", age: 25, city: "New York" };
let result = "Using for-in: ";
for (let key in person) {
result += `${key}: ${person[key]}, `;
}
result += "<br>Using Object.values and forEach: ";
Object.entries(person).forEach(([key, value]) => {
result += `${key}: ${value}, `;
});
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<h1>Object Data Loops</h1>
<button onclick="displayObjectData()">Display Data</button>
<div id="result"></div>
</body>
</html>

65
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
66
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 8e Develop a program to determine whether a given number is an
‘ARMSTRONG NUMBER’ or not. [Eg: 153 is an Armstrong number, since
Date: sum of the cube of the digits is equal to the number i.e.,13 + 53+ 33 = 153]

Aim:
To implement a HTML 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 isequal to the number i.e.,13 + 53+ 33 = 153].

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Armstrong Number</title>
<script>
function checkArmstrong() {
const num = parseInt(prompt("Enter a number:"));
const digits = num.toString().split("");
const sum = digits.reduce((acc, digit) => acc + Math.pow(parseInt(digit), 3), 0);
const result = (sum === num) ? `${num} is an Armstrong Number` : `${num} is not
an Armstrong Number`;
document.getElementById("result").innerText = result;
}
</script>
</head>
<body>
<h1>Armstrong Number Checker</h1>
<button onclick="checkArmstrong()">Check Number</button>
<p id="result"></p>
</body>
</html>

67
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Output:

Result:

Thus, the above program is executed successfully, and the output is verified.
68
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Write a program to display the denomination of the amount deposited in the
Ex No: 8f
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-
Date:
1’s)

Aim:
To implement a HTML 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).

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank Denomination</title>
<script>
function calculateDenomination() {
let amount = parseInt(prompt("Enter the deposit amount:"));
const denominations = [100, 50, 20, 10, 5, 2, 1];
let result = "";

denominations.forEach(denomination => {
const count = Math.floor(amount / denomination);
if (count > 0) {
result += `${count}-${denomination}'s, `;
}
amount %= denomination;
});

document.getElementById("result").innerText = result.slice(0, -2);


}
</script>
</head>
<body>
<h1>Bank Denomination</h1>

69
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<button onclick="calculateDenomination()">Calculate Denomination</button>
<p id="result"></p>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

70
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Design a appropriate function should be called to display
Ex No: 9a
● Factorial of that number
● Fibonacci series up to that number
Date: ● Prime numbers up to that number
● Is it palindrome or not

Aim:
To implement a HTML program, to Design a appropriate function should be called to
display
● Factorial of that number
● Fibonacci series up to that number
● Prime numbers up to that number
● Is it palindrome or not.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Functions</title>
<script>
function calculateFactorial(num) {
if (num < 0) return "Invalid Input";
let factorial = 1;
for (let i = 1; i <= num; i++) {
factorial *= i;
}
return factorial;
}

function generateFibonacci(num) {
const fib = [0, 1];
for (let i = 2; i <= num; i++) {
fib.push(fib[i - 1] + fib[i - 2]);
}
return fib.slice(0, num + 1);
}

71
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
function generatePrimes(num) {
const primes = [];
for (let i = 2; i <= num; i++) {
let isPrime = true;
for (let j = 2; j <= Math.sqrt(i); j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) primes.push(i);
}
return primes;
}

function isPalindrome(num) {
const str = num.toString();
return str === str.split("").reverse().join("") ? "Palindrome" : "Not Palindrome";
}
</script>
</head>
<body>
<h1>JavaScript Functions Example</h1>
<p>Use developer console to call and test the functions.</p>
</body>
</html>

Output:

Result:
Thus, the above program is executed successfully, and the output is verified.

72
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 9b Design a HTML having a text box and four buttons named Factorial,
Fibonacci, Prime, and Palindrome. When a button is pressed an appropriate
Date: function should be called to display

Aim:
To implement 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.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Events</title>
<script>
function factorial() {
const num = parseInt(document.getElementById("number").value);
document.getElementById("result").innerText = calculateFactorial(num);
}

function fibonacci() {
const num = parseInt(document.getElementById("number").value);
document.getElementById("result").innerText = generateFibonacci(num).join(", ");
}

function prime() {
const num = parseInt(document.getElementById("number").value);
document.getElementById("result").innerText = generatePrimes(num).join(", ");
}

function palindrome() {
const num = parseInt(document.getElementById("number").value);
document.getElementById("result").innerText = isPalindrome(num);
}

73
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
// Functions from 9a
function calculateFactorial(num) {
if (num < 0) return "Invalid Input";
let factorial = 1;
for (let i = 1; i <= num; i++) factorial *= i;
return factorial;
}

function generateFibonacci(num) {
const fib = [0, 1];
for (let i = 2; i <= num; i++) fib.push(fib[i - 1] + fib[i - 2]);
return fib.slice(0, num + 1);
}

function generatePrimes(num) {
const primes = [];
for (let i = 2; i <= num; i++) {
let isPrime = true;
for (let j = 2; j <= Math.sqrt(i); j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) primes.push(i);
}
return primes;
}

function isPalindrome(num) {
const str = num.toString();
return str === str.split("").reverse().join("") ? "Palindrome" : "Not Palindrome";
}
</script>
</head>
74
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
<body>
<h1>Interactive Functions</h1>
<label for="number">Enter a Number:</label>
<input type="number" id="number" />
<br><br>
<button onclick="factorial()">Factorial</button>
<button onclick="fibonacci()">Fibonacci</button>
<button onclick="prime()">Prime</button>
<button onclick="palindrome()">Palindrome</button>
<p id="result"></p>
</body>
</html>

Output:

Result:
Thus, the above program is executed successfully, and the output is verified.
75
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
Ex No: 9c
Registration Page Validation
Date:

Aim:
To implement a HTML program, to Design a Registration Page Validation.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Validation</title>
<script>
function validateForm() {
const name = document.getElementById("name").value;
const mobile = document.getElementById("mobile").value;
const email = document.getElementById("email").value;

const nameRegex = /^[a-zA-Z][a-zA-Z0-9]{5,}$/;


const mobileRegex = /^\d{10}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

let errors = "";


if (!nameRegex.test(name)) errors += "Invalid Name. Must start with an alphabet, be
alphanumeric, and at least 6 characters long.\n";
if (!mobileRegex.test(mobile)) errors += "Invalid Mobile. Must be 10 digits.\n";
if (!emailRegex.test(email)) errors += "Invalid Email. Must follow the format
xxxxx@xxxxx.xxx.\n";

if (errors) {
alert(errors);
return false;
} else {
alert("Registration Successful!");
return true;
76
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB
}
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" required />
<br><br>
<label for="mobile">Mobile:</label>
<input type="text" id="mobile" required />
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" required />
<br><br>
<button type="submit">Register</button>
</form>
</body>
</html>

Output:

Result:

Thus, the above program is executed successfully, and the output is verified.

77
NAME: K.Sarkesh REG.NO: 24F45A3302 BRANCH: CSE (AI&ML) FSD-I LAB

You might also like