FSD - Aiml
Uploaded by
srinivas79668FSD - Aiml
Uploaded by
srinivas79668Department of Artificial Intelligence & Machine Learning
II Year II Semester
FULL STACK DEVELOPMENT-1 LAB
(R23CC22L2)
Roll Number:
Name of the Student:
Academic Year: 2024-2025
Narasaraopeta Engineering College
Kotappakonda Road, Yellamanda (Post), Narasaraopet – 522601, Guntur District, AP
Approved by AICTE, New Delhi & Permanently affiliated to JNTUK, Kakinada, Code: 47,
Accredited by NBA & NAAC, RTA Approved Pollution test Centre, ISO 9001: 2008 Certified
Institution. Phone: 08647-239905, Website: www.nrtec.in.
Approved by AICTE, Permanently affiliated to JNTUK, Accredited by NBA & NAAC with ‘A+’ Grade,
Kotappakonda Road, Yellamanda (V), Narasaraopeta, Andhra Pradesh – 522601, www.nrtec.in
DEPARTMENT OF
Artificial Intelligence & Machine Learning
CERTIFICATE
ACADEMIC YEAR: 2024-25
This is to certify that the bonafide record work done by
bearing Roll Number
of II B.Tech. II Semester in the Full Stack Development-1 Laboratory is
satisfactorily completed.
Staff In-Charge Head of the Department
Submitted for the practical examination held on
External Examiner
INDEX
S.No Name of the Experiment Page No Date Remarks
27-01-2025
1 Lists, Links and Images 1-9 &
03-02-2025
08-02-2025
2 HTML Tables, Forms and Frames 10-20 &
15-02-2025
3 HTML 5 and Cascading Style Sheets, 21-27 24-02-2025
Types of CSS
4 Selector forms 28-30 03-03-2025
CSS with Color, Background, Font,
5 Text and CSS Box Model 31-39 10-03-2025
Applying JavaScript - internal and
6 external, I/O, Type Conversion 40-47 24-03-2025
7 JavaScript Pre-defined and User- 48-63 16-04-2025
defined Objects
8 JavaScript Conditional Statements and 64-75 21-04-2025
Loops
9 JavaScript Functions and Events 76-84 28-04-2025
Week - 1 (Lists, Links and Images)
Aim :
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.
File name: index.html
File Name :
index.html
Code :
<!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>
<h2>Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<h2>Nested List</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
Pa ge 2 of 91
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<h2>Ordered List inside Unordered List</h2>
<ul>
<li>Steps to Make Tea:
<ol>
<li>Boil Water</li>
<li>Add Tea Leaves</li>
<li>Pour in Cup</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>
</dl>
</body>
</html>
Output:
Page 3 of 91
Aim :
Write a HTML program, to explain the working of hyperlinks using tag and href, target Attributes.
File name: index.html
File Name :
index.html
Code :
<!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>
<h2>Hyperlink Example</h2>
<p>Click the link below to visit Google:</p>
<a href="https://www.google.com" target="_blank">Visit
Google</a>
</body>
</html>
Output:
Page 4 of 91
Aim :
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
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Image Links Example</title>
</head>
<body>
<h2>Profile Images</h2>
<p>Click on the images to visit the respective profiles:
</p>
<a href="https://www.yourprofile.com" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_p
ortrait_ca_usa.jpg" alt="Your Image" width="150" height="150">
</a>
<a href="https://www.friendprofile.com" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaSc
ript-logo.png" alt="Friend's Image" width="150" height="150">
</a>
</body>
</html>
Output:
Page 5 of 91
Aim :
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
File name: index.html
File Name :
index.html
Code :
<!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>
<h2>Image Gallery</h2>
<p>Click on the thumbnails to view full-sized images:</p>
<a
href="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_
portrait_ca_usa.jpg" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_p
ortrait_ca_usa.jpg" alt="Seagull" width="100" height="100">
</a>
<a
href="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaS
cript-logo.png" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaSc
ript-logo.png" alt="JavaScript Logo" width="100" height="100">
</a>
Page 7 of 91
<a
href="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03
.jpg" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.
jpg" alt="Cat" width="100" height="100">
</a>
</body>
</html>
Output:
Page 6 of 91
Week-2(HTML Tables, Forms and Frames)
Aim :
Write a HTML program, to explain the working of tables. (use tags: <table>,<tr>,<td>,attributes
,colspan,rowspan).
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Tables</title>
</head>
<body>
<h2>Student Marks Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>Math</td>
<td>90</td>
<td>Excellent</td>
</tr>
<tr>
<td>Science</td>
<td>85</td>
<td>Good</td>
</tr> Page 7 of 91
<tr> Page 9 of 91
<td rowspan="2">Bob</td>
<td>Math</td>
<td>80</td>
<td>Good</td>
</tr>
<tr>
<td>Science</td>
<td>88</td>
<td>Very Good</td>
</tr>
</table>
</body>
</html>
Output:
Page 10 of 91
Aim :
Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use tag to set
the caption to the table & also use cell spacing, cell padding, border, rowspan, colspan etc.).
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Timetable</title>
</head>
<body>
<h2>Class Timetable</h2>
<table border="1" cellpadding="5" cellspacing="2">
<caption>Weekly Class Schedule</caption>
<tr>
<th>Day</th>
<th>9 AM - 10 AM</th>
<th>10 AM - 11 AM</th>
<th>11 AM - 12 PM</th>
<th>12 PM - 1 PM</th>
<th>Lunch Break</th>
<th>2 PM - 3 PM</th>
<th>3 PM - 4 PM</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
Page 11 of 91
<td>History</td>
<td rowspan="6">Break</td>
<td>Physics</td>
<td>Sports</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Chemistry</td>
<td>Math</td>
<td>English</td>
<td>Computer Science</td>
<td>Arts</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Math</td>
<td>Science</td>
<td>History</td>
<td>Computer Science</td>
<td>Sports</td>
</tr>
<tr>
<td>Thursday</td>
<td>Biology</td>
<td>English</td>
<td>Math</td>
<td>Chemistry</td>
<td>Physics</td>
<td>Arts</td>
</tr>
<tr>
<td>Friday</td>
<td>English</td>
<td>History</td>
<td>Math</td>
<td>Science</td>
<td>Computer Science</td>
<td>Sports</td>
</tr>
<tr>
<td>Saturday</td>
Page 12 of 91
<td colspan="6">No Classes</td>
</tr>
</table>
</body>
</html>
Output:
Page 13 of 91
Aim :
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
and two buttons ie: submit and reset. Use tables to provide a better view).
File name: index.html
File Name :
index.html
Code :
<!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>
<h2>Registration Form</h2>
<form>
<table border="1" cellpadding="5" cellspacing="2">
<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" required>
Page 14 of 91
</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dob" required>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender"
value="Male"> Male
<input type="radio" name="gender"
value="Female"> Female
</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>Country:</td>
<td>
<select name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
Page 15 of 91
</table>
</form>
</body>
</html>
Output:
Page 16 of 91
Aim :
Write a HTML program, to explain the working of frames, such that page is to be divided into paragraph,
third frameà image, second frame à3 parts on either direction. (Note: first frame)
File names: index.html, left.html, image.html, right.html, paragraph.html
File Name :
image.html
Code :
<!DOCTYPE html>
<html>
<head>
<title>Image Frame</title>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Placeholder
Image">
</body>
</html>
File Name :
index.html
Code :
<!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>
Page 20 of 91
</head>
<frameset rows="30%, 70%">
<frame src="paragraph.html" name="topFrame">
<frameset cols="30%, 40%, 30%">
<frame src="left.html" name="leftFrame">
<frame src="image.html" name="middleFrame">
<frame src="right.html" name="rightFrame">
</frameset>
</frameset>
</html>
File Name :
left.html
Code :
<!DOCTYPE html>
<html>
<head>
<title>Left Frame</title>
</head>
<body>
<p>Left section of the second row.</p>
</body>
</html>
File Name :
paragraph.html
Code :
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Frame</title>
Page 21 of 91
</head>
<body>
<p>This is the top frame containing a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Right Frame</title>
</head>
<body>
<p>Right section of the second row.</p>
</body>
</html>
Output:
Page 22 of 91
Week-3(HTML 5 and Cascading Style Sheets, Types of
CSS)
Aim :
Write a HTML program, that makes use of <article> , <aside> ,<figher> ,<figcaption> <header>, <footer>,
<main><nav><section><div><span> tags.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Semantic HTML Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header, nav, main, section, article, aside, footer {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
}
figcaption {
Page 24 of 91
font-style: italic;
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is an example of a section containing
important information.</p>
</section>
<article>
<h2>Latest Article</h2>
<p>This is an article demonstrating the use of the
article tag.</p>
</article>
<aside>
<h2>Side Content</h2>
<p>This is an aside section, typically used for
additional information.</p>
</aside>
<figure>
<img src="https://via.placeholder.com/300"
alt="Example Image">
<figcaption>An example image with a caption.
Page 25 of 91
</figcaption>
</figure>
<div>
<p>This is a generic div element.</p>
<span>This is a span inside a div.</span>
</div>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Output:
Page 26 of 91
Aim :
Write a HTML program, to embed audio and video into HTML web page.
Use index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Embedded Audio and Video</title>
</head>
<body>
<audio controls>
<source
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-
1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<video width="320" height="240" controls>
<source
src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Page 27 of 91
Output:
Aim :
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)
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Styling Levels Example</title>
<link rel="stylesheet" href="styles.css"> <!-- External
CSS -->
<style>
/* Internal CSS */
h1 {
color: darkblue;
text-align: center;
}
.styled-div {
background-color: lightgray;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Applying Different CSS Styles</h1>
Page 28 of 91
<!-- Inline CSS -->
<p style="color: red; font-size: 18px;">This paragraph uses
inline styling.</p>
<!-- Internal CSS Applied -->
<div class="styled-div">
<p>This div is styled using internal CSS.</p>
</div>
<!-- External CSS Applied -->
<p class="external-style">This paragraph is styled using
external CSS.</p>
</body>
</html>
File Name :
styles.css
Code :
.external-style {
color: green;
font-weight: bold;
}
Output:
Page 29 of 91
Week-4(Selector forms)
Aim :
Write a program to apply different types of selector forms
1. Simple selector (element, id, class, group, universal)
2. Combinator selector (descendant, child, adjacent sibling, general sibling)
3. Pseudo-class selector
4. Pseudo-element selector
5. Attribute selector
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Selectors</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS
-->
</head>
<body>
<h1 id="main-title">CSS Selectors Example</h1>
<p class="highlight">This is a paragraph with a class
selector.</p>
<p>This is another paragraph.</p>
<div>
<span class="highlight">This is inside a div and has a
class.</span>
</div>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul> Page 31 of 91
Page 29 of 91
<a href="#" title="Hover over me">Hover over me</a>
</body>
</html>
File Name :
styles.css
Code :
h1 {
color: blue;
}
#main-title {
text-align: center;
}
.highlight {
font-weight: bold;
color: red;
}
/* Combinator Selectors */
div span {
background-color: yellow;
}
ul > li {
list-style-type: square;
}
/* Pseudo-Class Selector */
a:hover {
color: green;
}
/* Pseudo-Element Selector */
p::first-letter {
font-size: 2em;
} Page 32 of 91
/* Attribute Selector */
a[title] {
text-decoration: underline;
}
Output:
Page 33 of 91
Week-5(CSS with Color, Background, Font, Text and
CSS Box Model)
Aim :
Write a program to demonstrate the various ways you can reference a color in CSS.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Colors Example</title>
</head>
<body>
<style>
.named-color {
color: red;
}
/* HEX Color */
.hex-color {
color: #ff5733;
}
/* RGB Color */
.rgb-color {
color: rgb(34, 139, 34);
}
/* HSL Color */
.hsl-color {
color: hsl(240, 100%, 50%);
Page 35 of 91
}
/* RGBA Color with transparency */
.rgba-color {
color: rgba(255, 99, 71, 0.5);
}
</style>
<h1 id="main-title">CSS Colors Example</h1>
<p class="named-color">This text uses a named color.</p>
<p class="hex-color">This text uses a HEX color.</p>
<p class="rgb-color">This text uses an RGB color.</p>
<p class="hsl-color">This text uses an HSL color.</p>
<p class="rgba-color">This text uses an RGBA color.</p>
</body>
</html>
Output:
Page 36 of 91
Aim :
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.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Colors Example</title>
<style>
/* Named Color */
.named-color {
color: red;
}
/* HEX Color */
.hex-color {
color: #ff5733;
}
/* RGB Color */
.rgb-color {
color: rgb(34, 139, 34);
}
/* HSL Color */
.hsl-color {
color: hsl(240, 100%, 50%);
}
Page 37 of 91
/* RGBA Color with transparency */
.rgba-color {
color: rgba(255, 99, 71, 0.5);
}
/* Background Image Styling */
body {
background-image:
url('https://via.placeholder.com/1500');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 50%;
background-attachment: fixed;
transform: scaleX(-1);
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 id="main-title">CSS Colors Example</h1>
<p class="named-color">This text uses a named color.</p>
<p class="hex-color">This text uses a HEX color.</p>
<p class="rgb-color">This text uses an RGB color.</p>
<p class="hsl-color">This text uses an HSL color.</p>
<p class="rgba-color">This text uses an RGBA color.</p>
<h1 id="main-title">CSS Colors Example</h1>
<p class="named-color">This text uses a named color.</p>
<p class="hex-color">This text uses a HEX color.</p>
<p class="rgb-color">This text uses an RGB color.</p>
<p class="hsl-color">This text uses an HSL color.</p>
<p class="rgba-color">This text uses an RGBA color.</p>
<h1 id="main-title">CSS Colors Example</h1>
<p class="named-color">This text uses a named color.</p>
<p class="hex-color">This text uses a HEX color.</p>
<p class="rgb-color">This text uses an RGB color.</p>
<p class="hsl-color">This text uses an HSL color.</p>
<p class="rgba-color">This text uses an RGBA color.</p>
</body>
</html>
Page 38 of 91
Output:
Aim :
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
File name: index.html
File Name :
index.html
Code :
<!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 Example</title>
<style>
/* Font and Text Styling */
.font-size {
font-size: 20px;
}
.font-weight {
font-weight: bold;
}
.font-style {
font-style: italic;
}
.text-decoration {
Page 39 of 91
text-decoration: underline;
}
.text-transform {
text-transform: uppercase;
}
.text-align {
text-align: center;
}
</style>
</head>
<body>
<h1 id="main-title">CSS Font and Text Example</h1>
<p class="font-size">This text has a font size of 20px.</p>
<p class="font-weight">This text is bold.</p>
<p class="font-style">This text is italic.</p>
<p class="text-decoration">This text is underlined.</p>
<p class="text-transform">This text is uppercase.</p>
<p class="text-align">This text is center-aligned.</p>
</body>
</html>
Output:
Page 40 of 91
Aim :
Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding
File name: index.html
File Name :
index.html
Code :
<!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 Example</title>
<style>
/* Box Model Styling */
.box-model {
width: 300px;
height: 100px;
background-color: lightblue;
padding: 20px;
border: 5px solid darkblue;
margin: 30px;
}
</style>
</head>
<body>
<h1 id="main-title">CSS Box Model Example</h1>
<div class="box-model">This is a box with content, padding,
border, and margin.</div>
</body>
Page 41 of 91
</html>
Output:
Page 42 of 91
Week-6(Applying JavaScript - internal and external,
I/O, Type Conversion )
Aim :
Write a program to embed internal and external JavaScript in a web page.
File names: index.html , script.js
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Example</title>
<script>
// Internal JavaScript
function showAlert() {
alert('This is an internal JavaScript function!');
}
</script>
<script src="script.js"></script> <!-- External JavaScript
-->
</head>
<body>
<h1 id="main-title">JavaScript Example</h1>
<button onclick="showAlert()">Click for Internal
JS</button>
<button onclick="showExternalAlert()">Click for External
JS</button>
</body>
</html>
Page 44 of 91
script.js
function showExternalAlert() {
alert('This is an external JavaScript function!');
}
Output:
Page 45 of 91
Aim :
Write a program to explain the different ways for displaying output.
File names: index.html, script.js
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Output Methods</title>
<script>
// Internal JavaScript
function showAlert() {
alert('This is an alert box!');
}
function writeToDocument() {
document.write('This text is written using
document.write().');
}
function logToConsole() {
console.log('This message is logged to the
console.');
}
function changeInnerHTML() {
document.getElementById('output').innerHTML = 'This
text is set using innerHTML!';
}
</script>
<script src="script.js"></script> <!-- External JavaScript
Page 46 of 91
-->
</head>
<body>
<h1 id="main-title">JavaScript Output Methods</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="writeToDocument()">Write to
Document</button>
<button onclick="logToConsole()">Log to Console</button>
<button onclick="changeInnerHTML()">Change Inner
HTML</button>
<p id="output"></p>
</body>
</html>
File Name :
script.js
Code :
function showExternalAlert() {
alert('This is an external JavaScript function!');
}
Output:
Page 47 of 91
Aim :
Write a program to explain the different ways for taking input.
File name: index.html, script.js
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Input Methods</title>
<script>
// Internal JavaScript
function getPromptInput() {
let userInput = prompt('Enter something:');
document.getElementById('output').innerHTML =
'Prompt Input: ' + userInput;
}
function getFormInput() {
let formInput =
document.getElementById('textInput').value;
document.getElementById('output').innerHTML = 'Form
Input: ' + formInput;
}
</script>
<script src="script.js"></script> <!-- External JavaScript
-->
</head>
<body>
<h1 id="main-title">JavaScript Input Methods</h1>
<button onclick="getPromptInput()">Use Prompt</button>
Page 48 of 91
<input type="text" id="textInput" placeholder="Type
something">
<button onclick="getFormInput()">Get Form Input</button>
<p id="output"></p>
</body>
</html>
script.js
function getExternalInput() {
let userInput = prompt('External Script Prompt: Enter
something');
document.getElementById('output').innerHTML = 'External
Script Input: ' + userInput;
}
Output:
Page 49 of 91
Aim :
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
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Voter Eligibility Check</title>
<script>
function checkVoterEligibility() {
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 = `
<tr>
<th>Name</th>
<th>Age</th>
<th>Eligibility</th>
</tr>
<tr>
<td>${name}</td>
<td>${age}</td>
<td>${eligibility}</td>
</tr>
`;
}
Page 50 of 91
</script>
</head>
<body onload="checkVoterEligibility()">
<h1>Voter Eligibility Check</h1>
<table border="1" id="voterTable"></table>
</body>
</html>
Output:
Page 51 of 91
Week-7(Java Script Pre-defined and User-defined
Objects)
Aim :
Write a program using document object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Original Title</title>
<script>
document.addEventListener("DOMContentLoaded", function
() {
// 1. Update the document title
document.title = "Updated Document Title";
// 2. Modify existing heading content
const header = document.getElementById("header");
if (header) {
header.innerHTML = "Updated Heading";
}
// 3. Add a new paragraph dynamically
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a dynamically
added paragraph.";
document.body.appendChild(newParagraph);
});
</script>
</head>
Page 53 of 91
<body>
<h1 id="header">Original Heading</h1>
</body>
</html>
Output:
Page 54 of 91
Aim :
Write a program using window object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Window Object Demo</title>
<script>
function showAlert() {
window.alert("This is an alert box!");
}
function showConfirm() {
let result = window.confirm("Do you want to
proceed?");
document.getElementById("confirmResult").textContent = result ?
"User clicked OK" : "User clicked Cancel";
}
function showPrompt() {
let name = window.prompt("Enter your name:",
"Guest");
document.getElementById("promptResult").textContent
= name ? "Hello, " + name : "No name entered";
}
function openNewWindow() {
window.open("https://www.example.com", "_blank",
Page 55 of 91
"width=500,height=500");
}
</script>
</head>
<body>
<h1>Window Object Methods Demo</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirm()">Show Confirm</button>
<button onclick="showPrompt()">Show Prompt</button>
<button onclick="openNewWindow()">Open New Window</button>
<p id="confirmResult"></p>
<p id="promptResult"></p>
</body>
</html>
Output:
Page 56 of 91
Aim :
Write a program using array object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Array Object Demo</title>
<script>
function showArrayMethods() {
let numbers = [1, 2, 3, 4, 5];
document.getElementById("originalArray").textContent =
"Original Array: " + numbers;
numbers.push(6);
document.getElementById("pushResult").textContent =
"After Push (6 added): " + numbers;
numbers.pop();
document.getElementById("popResult").textContent =
"After Pop (last element removed): " + numbers;
numbers.shift();
document.getElementById("shiftResult").textContent
= "After Shift (first element removed): " + numbers;
numbers.unshift(0);
document.getElementById("unshiftResult").textContent = "After
Page 57 of 91
Unshift (0 added at start): " + numbers;
let joined = numbers.join(" - ");
document.getElementById("joinResult").textContent =
"Joined Array: " + joined;
}
</script>
</head>
<body>
<h1>Array Object Methods Demo</h1>
<button onclick="showArrayMethods()">Show Array
Methods</button>
<p id="originalArray"></p>
<p id="pushResult"></p>
<p id="popResult"></p>
<p id="shiftResult"></p>
<p id="unshiftResult"></p>
<p id="joinResult"></p>
</body>
</html>
Output:
Page 58 of 91
Aim :
Write a program using math object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Math Object Demo</title>
<script>
function showMathMethods() {
let num = 25.6;
document.getElementById("originalNumber").textContent =
"Original Number: " + num;
document.getElementById("roundResult").textContent
= "Rounded Value: " + Math.round(num);
document.getElementById("ceilResult").textContent =
"Ceil Value: " + Math.ceil(num);
document.getElementById("floorResult").textContent
= "Floor Value: " + Math.floor(num);
document.getElementById("sqrtResult").textContent =
"Square Root: " + Math.sqrt(num);
document.getElementById("powResult").textContent =
"Power (2^3): " + Math.pow(2, 3);
document.getElementById("randomResult").textContent
= "Random Number (0-1): " + Math.random();
}
</script>
</head>
Page 59 of 91
<body>
<h1>Math Object Methods Demo</h1>
<button onclick="showMathMethods()">Show Math
Methods</button>
<p id="originalNumber"></p>
<p id="roundResult"></p>
<p id="ceilResult"></p>
<p id="floorResult"></p>
<p id="sqrtResult"></p>
<p id="powResult"></p>
<p id="randomResult"></p>
</body>
</html>
Output:
Page 60 of 91
Aim :
Write a program using string object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>String Object Demo</title>
<script>
function showStringMethods() {
let text = " Hello, JavaScript! ";
document.getElementById("originalString").textContent =
"Original String: " + text;
document.getElementById("lengthResult").textContent
= "String Length: " + text.length;
document.getElementById("trimResult").textContent =
"Trimmed String: '" + text.trim() + "'";
document.getElementById("uppercaseResult").textContent =
"Uppercase: " + text.toUpperCase();
document.getElementById("lowercaseResult").textContent =
"Lowercase: " + text.toLowerCase();
document.getElementById("substringResult").textContent =
"Substring (0,5): " + text.substring(0, 5);
document.getElementById("replaceResult").textContent = "Replace
Page 61 of 91
'JavaScript' with 'World': " + text.replace("JavaScript",
"World");
}
</script>
</head>
<body>
<h1>String Object Methods Demo</h1>
<button onclick="showStringMethods()">Show String
Methods</button>
<p id="originalString"></p>
<p id="lengthResult"></p>
<p id="trimResult"></p>
<p id="uppercaseResult"></p>
<p id="lowercaseResult"></p>
<p id="substringResult"></p>
<p id="replaceResult"></p>
</body>
</html>
Output:
Page 62 of 91
Aim :
Write a program using regex object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Regex Object Demo</title>
<script>
function showRegexMethods() {
let text = "The quick brown fox jumps over the lazy
dog.";
document.getElementById("originalText").textContent
= "Original Text: " + text;
let regex = /quick/;
document.getElementById("testResult").textContent =
"Regex Test (quick): " + regex.test(text);
let match = text.match(/\b\w{5}\b/g);
document.getElementById("matchResult").textContent
= "Match words with 5 letters: " + match;
let replacedText = text.replace(/fox/, "cat");
document.getElementById("replaceResult").textContent = "Replace
'fox' with 'cat': " + replacedText;
}
</script>
</head>
Page 63 of 91
<body>
<h1>Regex Object Methods Demo</h1>
<button onclick="showRegexMethods()">Show Regex
Methods</button>
<p id="originalText"></p>
<p id="testResult"></p>
<p id="matchResult"></p>
<p id="replaceResult"></p>
</body>
</html>
Output:
Page 64 of 91
Aim :
Write a program using date object properties and methods.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Date Object Demo</title>
<script>
function showDateMethods() {
let currentDate = new Date();
document.getElementById("currentDate").textContent
= "Current Date: " + currentDate;
document.getElementById("utcDate").textContent =
"UTC Date: " + currentDate.toUTCString();
document.getElementById("year").textContent =
"Year: " + currentDate.getFullYear();
document.getElementById("month").textContent =
"Month: " + (currentDate.getMonth() + 1);
document.getElementById("day").textContent = "Day:
" + currentDate.getDate();
}
</script>
</head>
<body>
Page 65 of 91
<h1>Date Object Methods Demo</h1>
<button onclick="showDateMethods()">Show Date
Methods</button>
<p id="currentDate"></p>
<p id="utcDate"></p>
<p id="year"></p>
<p id="month"></p>
<p id="day"></p>
</body>
</html>
Output:
Page 66 of 91
Aim :
Write a program to explain user-defined object by using properties, methods, accessors, constructors
and display
File name: index.html
File Name :
index.html
Code :
<!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 Demo</title>
<script>
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
// Getter for name
get name() {
return this._name;
}
// Setter for name
set name(newName) {
this._name = newName;
}
// Getter for age
get age() {
return this._age;
}
Page 67 of 91
// Method to display details
displayInfo() {
return `Name: ${this.name}, Age: ${this.age}`;
}
}
function showPersonDetails() {
let person = new Person("John Doe", 30);
document.getElementById("personInfo").textContent =
person.displayInfo();
}
</script>
</head>
<body>
<h1>User-Defined Object Demo</h1>
<button onclick="showPersonDetails()">Show Person
Details</button>
<p id="personInfo"></p>
</body>
</html>
Output:
Page 68 of 91
Week-8(Java Script Conditional Statements and
Loops)
Aim :
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”.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Find Largest Number</title>
<script>
function findLargestNumber() {
let num1 = parseInt(prompt("Enter first integer:"),
10);
let num2 = parseInt(prompt("Enter second
integer:"), 10);
let num3 = parseInt(prompt("Enter third integer:"),
10);
let message;
if (num1 === num2 && num2 === num3) {
message = "EQUAL NUMBERS";
} else {
let largest = Math.max(num1, num2, num3);
message = `${largest} LARGER NUMBER`;
}
document.getElementById("result").textContent =
message;
Page 70 of 91
}
</script>
</head>
<body>
<h1>Find the Largest Number</h1>
<button onclick="findLargestNumber()">Enter
Numbers</button>
<p id="result"></p>
</body>
</html>
Output:
Page 71 of 91
Aim :
Write a program to display week days using switch case.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Weekday Finder</title>
<script>
function getWeekday() {
let dayNumber =
parseInt(document.getElementById("dayInput").value, 10);
let dayName;
switch (dayNumber) {
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. Enter a
number between 1 and 7.";
}
document.getElementById("result").textContent =
dayName;
}
</script>
Page 72 of 91
</head>
<body>
<h1>Enter a Number to Get the Weekday</h1>
<input type="number" id="dayInput" placeholder="Enter a
number (1-7)">
<button onclick="getWeekday()">Show Day</button>
<p id="result"></p>
</body>
</html>
Output:
Page 73 of 91
Aim :
Write a program to print 1 to 10 numbers using for, while and do-while loops.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Print Numbers Using Loops</title>
<script>
function printNumbers() {
let forLoopResult = "For Loop: ";
for (let i = 1; i <= 10; i++) {
forLoopResult += i + " ";
}
let whileLoopResult = "While Loop: ";
let j = 1;
while (j <= 10) {
whileLoopResult += j + " ";
j++;
}
let doWhileLoopResult = "Do-While Loop: ";
let k = 1;
do {
doWhileLoopResult += k + " ";
k++;
} while (k <= 10);
document.getElementById("result").innerHTML =
Page 74 of 91
`<p>${forLoopResult}</p>
<p>${whileLoopResult}</p>
<p>${doWhileLoopResult}</p>`;
}
</script>
</head>
<body>
<h1>Print Numbers Using Loops</h1>
<button onclick="printNumbers()">Print Numbers</button>
<div id="result"></div>
</body>
</html>
Output:
Page 75 of 91
Aim :
Write a program to print data in object using for-in, for-each and for-of loops.
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Print Object Data</title>
<script>
function printObjectData() {
const obj = { a: 1, b: 2, c: 3 };
const output = [];
// Using for-in loop
let forInResult = "For-in Loop:<br>";
for (let key in obj) {
forInResult += `${key}: ${obj[key]}<br>`;
output.push(`${key}: ${obj[key]}`);
}
// Using forEach (on Object.entries)
let forEachResult = "ForEach Loop:<br>";
Object.entries(obj).forEach(([key, value]) => {
forEachResult += `${key}: ${value}<br>`;
output.push(`${key}: ${value}`);
});
// Using for-of (on Object.entries)
let forOfResult = "For-of Loop:<br>";
for (let [key, value] of Object.entries(obj)) {
Page 76 of 91
forOfResult += `${key}: ${value}<br>`;
output.push(`${key}: ${value}`);
}
// Display results
document.getElementById("result").innerHTML =
forInResult + "<br>" + forEachResult + "<br>" + forOfResult;
}
</script>
</head>
<body>
<h1>Print Object Data Using Loops</h1>
<button onclick="printObjectData()">Print Data</button>
<div id="result"></div>
</body>
</html>
Output:
Page 77 of 91
Aim :
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]
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Armstrong Number Checker</title>
<script>
function isArmstrongNumber(num) {
let sum = 0;
let digits = num.toString().split('').map(Number);
let power = digits.length;
digits.forEach(digit => {
sum += Math.pow(digit, power);
});
return sum === num;
}
function checkArmstrong() {
const input =
document.getElementById("numberInput").value.trim();
const result = document.getElementById("result");
if (!/^\d+$/.test(input)) {
result.textContent = "Please enter a valid
Page 78 of 91
number.";
return;
}
const num = parseInt(input, 10);
if (isArmstrongNumber(num)) {
result.textContent = `${num} is an Armstrong
Number`;
} else {
result.textContent = `${num} is not an
Armstrong Number`;
}
}
</script>
</head>
<body>
<h1>Armstrong Number Checker</h1>
<input type="text" id="numberInput" placeholder="Enter a
number">
<button onclick="checkArmstrong()">Check Armstrong</button>
<p id="result"></p>
</body>
</html>
Output:
Page 79 of 91
Aim :
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)
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Denomination Calculator</title>
<script>
function calculateDenomination() {
const amountInput =
document.getElementById("amount").value;
const resultDiv =
document.getElementById("result");
let amount = parseInt(amountInput);
if (isNaN(amount) || amount <= 0) {
resultDiv.textContent = "Please enter a valid
amount.";
return;
}
const denominations = [100, 50, 20, 10, 5, 2, 1];
let output = [];
denominations.forEach(denomination => {
if (amount >= denomination) {
let count = Math.floor(amount /
Page 80 of 91
denomination);
output.push(`${count}-${denomination}’s`);
amount %= denomination;
}
});
resultDiv.textContent = output.join(", ");
}
</script>
</head>
<body>
<h1>Denomination Calculator</h1>
<input type="text" id="amount" placeholder="Enter amount">
<button onclick="calculateDenomination()">Calculate
Denomination</button>
<p id="result"></p>
</body>
</html>
Output:
Page 81 of 91
Week-9(: Java Script Functions and Events)
Aim :
Design a appropriate function should be called to display
1. Factorial of that number
2. Fibonacci series up to that number
3. Prime numbers up to that number
4. Is it palindrome or not
File name : index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Number Operations</title>
<script>
function factorial(n) {
if (n < 0) return "Factorial not defined for
negative numbers";
if (n === 0 || n === 1) return 1;
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
function fibonacci(n) {
if (n < 1) return "Enter a positive integer";
let fibSeries = [0, 1];
while (true) {
let next = fibSeries[fibSeries.length - 1] +
fibSeries[fibSeries.length -P a 2g ]e ;8 3 of 91
if (next > n) break;
fibSeries.push(next);
}
return fibSeries;
}
function primesUpTo(n) {
if (n < 2) return "No prime numbers";
let primes = [];
for (let i = 2; i <= n; i++) {
let isPrime = true;
for (let j = 2; j * j <= i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) primes.push(i);
}
return primes;
}
function isPalindrome(n) {
let str = n.toString();
let reversedStr = str.split('').reverse().join('');
return str === reversedStr ? `${n} is a palindrome`
: `${n} is not a palindrome`;
}
function displayResults() {
let num =
parseInt(document.getElementById("numberInput").value, 10);
document.getElementById("factorialResult").textContent =
`Factorial: ${factorial(num)}`;
document.getElementById("fibonacciResult").textContent =
`Fibonacci: ${fibonacci(num)}`;
document.getElementById("primeResult").textContent
= `Prime Numbers: ${primesUpTo(num)}`;
document.getElementById("palindromeResult").textContent =
isPalindrome(num);
Page 84 of 91
}
</script>
</head>
<body>
<h1>Number Operations</h1>
<input type="number" id="numberInput" placeholder="Enter a
number">
<button onclick="displayResults()">Calculate</button>
<p id="factorialResult"></p>
<p id="fibonacciResult"></p>
<p id="primeResult"></p>
<p id="palindromeResult"></p>
</body>
</html>
Output:
Page 85 of 91
Aim :
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
1. Factorial of that number
2. Fibonacci series up to that number
3. Prime numbers up to that number
4. Is it palindrome or not
File name: index.html
File Name :
index.html
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Number Operations</title>
<script>
function factorial(n) {
if (n < 0) return "Factorial not defined for
negative numbers";
if (n === 0 || n === 1) return 1;
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
function fibonacci(n) {
if (n < 1) return "Enter a positive integer";
let fibSeries = [0, 1];
while (true) {
let next = fibSeries[fibSeries.length - 1] +
Page 86 of 91
fibSeries[fibSeries.length - 2];
if (next > n) break;
fibSeries.push(next);
}
return fibSeries;
}
function primesUpTo(n) {
if (n < 2) return "No prime numbers";
let primes = [];
for (let i = 2; i <= n; i++) {
let isPrime = true;
for (let j = 2; j * j <= i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) primes.push(i);
}
return primes;
}
function isPalindrome(n) {
let str = n.toString();
let reversedStr = str.split('').reverse().join('');
return str === reversedStr ? `${n} is a palindrome`
: `${n} is not a palindrome`;
}
function displayResult(type) {
let num =
parseInt(document.getElementById("numberInput").value, 10);
let result;
switch(type) {
case 'factorial':
result = `Factorial: ${factorial(num)}`;
break;
case 'fibonacci':
result = `Fibonacci: ${fibonacci(num)}`;
break;
case 'prime':
result = `Prime Numbers:
Page 87 of 91
${primesUpTo(num)}`;
break;
case 'palindrome':
result = isPalindrome(num);
break;
}
document.getElementById("result").textContent =
result;
}
</script>
</head>
<body>
<h1>Number Operations</h1>
<input type="number" id="numberInput" placeholder="Enter a
number">
<button
onclick="displayResult('factorial')">Factorial</button>
<button
onclick="displayResult('fibonacci')">Fibonacci</button>
<button onclick="displayResult('prime')">Prime</button>
<button
onclick="displayResult('palindrome')">Palindrome</button>
<p id="result"></p>
</body>
</html>
Output:
Page 88 of 91
Aim :
Write a program to validate the following fields in a registration page
1. Name (start with alphabet and followed by alphanumeric and the length should not be less than 6
characters)
2. Mobile (only numbers and length 10 digits)
3. E-mail (should contain format like [email protected])
File name: index.html
File Name :
index.html
Code :
<!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;
margin: 50px;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your
name" required>
Page 89 of 91
<span class="error" id="nameError"></span>
<br><br>
<label for="mobile">Mobile:</label>
<input type="text" id="mobile" placeholder="Enter your
mobile number" required>
<span class="error" id="mobileError"></span>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your
email" required>
<span class="error" id="emailError"></span>
<br><br>
<button type="button" id="register">Register</button>
</form>
<script>
document.getElementById("register").addEventListener("click",
function () {
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,}$/;
let valid = true;
if (!namePattern.test(name)) {
document.getElementById("nameError").innerText
= "Invalid name (must start with a letter, min 6 characters)";
valid = false;
} else {
document.getElementById("nameError").innerText
= "";
}
Page 90 of 91
if (!mobilePattern.test(mobile)) {
document.getElementById("mobileError").innerText = "Invalid
mobile number (10 digits only)";
valid = false;
} else {
document.getElementById("mobileError").innerText = "";
}
if (!emailPattern.test(email)) {
document.getElementById("emailError").innerText
= "Invalid email format";
valid = false;
} else {
document.getElementById("emailError").innerText
= "";
}
if (valid) {
alert("Registration successful!");
}
});
</script>
</body>
</html>
Output:
Page 91 of 91
You might also like
- Computer Applications IN Pharmacy: Laboratory ManualNo ratings yetComputer Applications IN Pharmacy: Laboratory Manual25 pages
- Tools and Equipment Technologies For BAMBOO100% (2)Tools and Equipment Technologies For BAMBOO34 pages
- Week 1: A) Write A HTML Program, To Explain The Working of ListsNo ratings yetWeek 1: A) Write A HTML Program, To Explain The Working of Lists50 pages
- Law of Karma Value Systems For Success.No ratings yetLaw of Karma Value Systems For Success.51 pages
- 1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments100% (3)1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments23 pages
- Metaphors in Editorial Cartoons Representing The Global Financial CrisisNo ratings yetMetaphors in Editorial Cartoons Representing The Global Financial Crisis21 pages
- Class 10 IT 402 Notes As Per 2024-25 Syllabus0% (3)Class 10 IT 402 Notes As Per 2024-25 Syllabus30 pages
- Plumbing Symbol: Sewer Line Layout Ground Floor Water Line Layout Storm Drainage LayoutNo ratings yetPlumbing Symbol: Sewer Line Layout Ground Floor Water Line Layout Storm Drainage Layout1 page
- METROPOLITAN BANK AND TRUST COMPANY vs. MARINA B. CUSTODIONo ratings yetMETROPOLITAN BANK AND TRUST COMPANY vs. MARINA B. CUSTODIO2 pages
- Lecture 7 - CS50's Computer Science For LawyersNo ratings yetLecture 7 - CS50's Computer Science For Lawyers17 pages
- (1905) Baltimore Bargain House CatalogueNo ratings yet(1905) Baltimore Bargain House Catalogue34 pages
- EContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 06No ratings yetEContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 0632 pages
- Eijppr 2023 Vol 13 Iss2 April 1 17 2116No ratings yetEijppr 2023 Vol 13 Iss2 April 1 17 211617 pages
- A Study of The Linguistic Innovations inNo ratings yetA Study of The Linguistic Innovations in44 pages
- Practical File ON HTML: Maharshi Dayanand University RohtakNo ratings yetPractical File ON HTML: Maharshi Dayanand University Rohtak26 pages
- Rubrics For Student Engagement or Class ParticipationNo ratings yetRubrics For Student Engagement or Class Participation2 pages
- (r23) 23 Batch 2-2 Regular End Exam Time Table May 2025No ratings yet(r23) 23 Batch 2-2 Regular End Exam Time Table May 20251 page
- (r23) I B.tech II Semester Regular and Supple End Exam Time Table Mayjune - 2025No ratings yet(r23) I B.tech II Semester Regular and Supple End Exam Time Table Mayjune - 20251 page
- Effect of Photic Stimulation For Migraine Detection Using Random Forest and Discrete Wavelet TransformNo ratings yetEffect of Photic Stimulation For Migraine Detection Using Random Forest and Discrete Wavelet Transform9 pages
- Dairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesFrom EverandDairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesNo ratings yet
- Deconstructing Conflict: Understanding Family Business, Shared Wealth and PowerFrom EverandDeconstructing Conflict: Understanding Family Business, Shared Wealth and Power1/5 (3)
- Masters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaFrom EverandMasters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaNo ratings yet
- On the Wallaby Track: Essential Australian Words and PhrasesFrom EverandOn the Wallaby Track: Essential Australian Words and PhrasesNo ratings yet
- Crockpot Recipes: Scrumptious Crock Pot and Slow Cooker RecipesFrom EverandCrockpot Recipes: Scrumptious Crock Pot and Slow Cooker RecipesNo ratings yet
- Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' HoodooFrom EverandStaubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo3/5 (5)
