Scribd
Upload
4 views

Lab manual

The document contains multiple HTML programs demonstrating various concepts including lists, hyperlinks, images, tables, forms, and frames. Each section provides a specific example, such as creating stylish lists, working with hyperlinks, displaying images linked to profiles, designing a timetable, and creating a registration form. The programs are structured in HTML format with appropriate tags and attributes to illustrate their functionality.

Uploaded by

yaswanthbusireddy
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
4 views

Lab manual

The document contains multiple HTML programs demonstrating various concepts including lists, hyperlinks, images, tables, forms, and frames. Each section provides a specific example, such as creating stylish lists, working with hyperlinks, displaying images linked to profiles, designing a timetable, and creating a registration form. The programs are structured in HTML format with appropriate tags and attributes to illustrate their functionality.

Uploaded by

yaswanthbusireddy
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/ 55

1. WRITE A HTML PROGRAM, TO EXPLAIN THE WORKING OF LISTS.

Program:
<!DOCTYPE html>
<html>
<head>
<title>Stylish Lists using Only HTML</title>
</head>
<body bgcolor="#f0f8ff">
<marquee behavior="scroll" direction="left" scrollamount="8">
<font color="purple" size="6"><b>Welcome to Stylish Lists in HTML!</b></font>
</marquee>
<center><h1><font color="blue">Examples of Lists in HTML</font></h1></center>
<h2><font color="green">1. Ordered List</font></h2>
<ol bgcolor="#ffe4e1">
<li><font color="black">First Item</font></li>
<li><font color="black">Second Item</font></li>
<li><font color="black">Third Item</font></li>
</ol>
<h2><font color="green">2. Unordered List</font></h2>
<ul bgcolor="#e6e6fa">
<li><font color="black">Apple</font></li>
<li><font color="black">Banana</font></li>
<li><font color="black">Cherry</font></li>
</ul>
<h2><font color="green">3. Nested List</font></h2>
<ul>
<li><font color="maroon">Fruits</font>
<ul>
<li><font color="black">Mango</font></li>
<li><font color="black">Orange</font></li>
</ul>
</li>
<li><font color="maroon">Vegetables</font>
<ul>
<li><font color="black">Carrot</font></li>
<li><font color="black">Broccoli</font></li>
</ul>
</li>
</ul>
<h2><font color="green">4. Ordered List inside Unordered List</font></h2>
<ul>
<li><font color="darkblue">Steps to Prepare Tea</font>
<ol>
<li><font color="black">Boil Water</font></li>
<li><font color="black">Add Tea Leaves</font></li>
<li><font color="black">Add Sugar and Milk</font></li>
<li><font color="black">Strain and Serve</font></li>
</ol>
</li>
<li><font color="darkblue">Steps to Prepare Coffee</font>
<ol>
<li><font color="black">Boil Water</font></li>
<li><font color="black">Add Coffee Powder</font></li>
<li><font color="black">Add Sugar and Milk</font></li>
<li><font color="black">Strain and Serve</font></li>
</ol>
</li>
</ul>
<h2><font color="green">5. Definition List</font></h2>
<dl>
<dt><font color="red">HTML</font></dt>
<dd><font color="black">HyperText Markup Language, used to create web pages.
</font></dd>
<dt><font color="red">CSS</font></dt>
<dd><font color="black">Cascading Style Sheets, used for styling HTML elements.
</font></dd>
<dt><font color="red">JavaScript</font></dt>
<dd><font color="black">A programming language used to make web pages interactive.
</font></dd>
</dl>
</body>
</html>
Output:
Result:
2. WRITE A HTML PROGRAM, TO EXPLAIN THE WORKING OF
HYPERLINKS USING TAG AND HREF, TARGET ATTRIBUTES.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Working of Hyperlinks in HTML</title>
</head>
<body bgcolor="#f9f9f9">
<h1 align="center">Working of Hyperlinks using &lt;a&gt; Tag and Attributes</h1>
<h2>1. Hyperlink to an External Website</h2>
<p>
Click the link below to visit Google:<br>
<a href="https://www.google.com">Visit Google</a>
</p>
<h2>2. Hyperlink Opening in a New Tab (Using <code>target="_blank"</code>)</h2>
<p>
Click the link below to visit Wikipedia in a new tab:<br>
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>
</p>
<h2>3. Hyperlink to Another Page within the Same Website (Internal Link)</h2>
<p>
Click the link below to go to another page (example page2.html):<br>
<a href="page2.html">Go to Page 2</a>
</p>
<h2>4. Hyperlink to a Section within the Same Page</h2>
<p>
Click the link below to jump directly to the bottom of this page:<br>
<a href="#bottom">Jump to Bottom Section</a>
</p>
<h2>5. Hyperlink to Send an Email</h2>
<p>
Click the link below to send an email:<br>
<a href="mailto:[email protected]">Send an Email</a>
</p>
<!-- Bottom Section -->
<h2 id="bottom">Bottom Section of the Page</h2>
<p>
You have reached the bottom of the page. Thank you for visiting!
</p>
</body>
</html>
Output:

Result:
3. 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.
Program:
Main.html:
<!DOCTYPE html>
<html>
<head>
<title>My Profile and Friend's Profile</title>
</head>
<body bgcolor="#e0f7fa">
<h1 align="center">My Profile and My Friend's Profile</h1>
<h2><center>My Image</center></h2>
<center><a href="myname.html" target="_blank">
<img src="E:\NEVEDHA\HTML\LAb\image1.jpg" alt="My Image" height="200"
width="200">
</a></center>
<center><h2>My Friend's Image</h2></center>
<center><a href="friendname.html" target="_blank">
<img src="E:\NEVEDHA\HTML\LAb\image2.jpg" alt="My Image" height="200" `
width="200">
</a></center>
</body>
</html>
image1.html:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body bgcolor="#FFFFED">
<center>
<h1>My Profile</h1>
<img src="E:\NEVEDHA\HTML\LAb\image1.jpg" alt="My Photo" height="100"
width="100">
</center>
<h2><u>Personal Information</u></h2>
<p><b>Name:</b> Nithya</p>
<p><b>Email:</b> [email protected]</p>
<p><b>Phone:</b> +91 9876543210</p>
<p><b>Address:</b>No 8,Ayyappa Garden Street,Manadi,Chennai</p>
<h2><u>Education</u></h2>
<ul>
<li><b>B.Tech in Computer Science</b> - Madras University (2020-2024)</li>
<li><b>Intermediate (SSC)</b> - DAV Global School (2018-2020)</li>
<li><b>SSC</b> - DAv Global School (2017-2018)</li>
</ul>
<h2><u>Skills</u></h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Python, Java</li>
<li>MySQL, MongoDB</li>
<li>Problem Solving</li>
</ul>
<h2><u>Contact Me</u></h2>
<p>Click below to send me an email:</p>
<a href="mailto:[email protected]">Send Email</a>
</body>
</html>
image2.html:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body bgcolor=""light pink">
<center>
<h1>My Profile</h1>
<img src="E:\NEVEDHA\HTML\LAb\image2.jpg" alt="My Photo" height="100"
width="100">
</center>
<h2><u>Personal Information</u></h2>
<p><b>Name:</b> Pravalika</p>
<p><b>Email:</b> [email protected]</p>
<p><b>Phone:</b> +91 9482483210</p>
<p><b>Address:</b>No 10,arunai Lands Street,Avadi,Chennai</p>
<h2><u>Education</u></h2>
<ul>
<li><b>B.Tech in Cyber Security</b> - Arunai University (2020-2024)</li>
<li><b>Intermediate (SSC)</b> - DAV Global School (2018-2020)</li>
<li><b>SSC</b> - SSN Global School (2017-2018)</li>
</ul>
<h2><u>Skills</u></h2>
<ul>
<li>HTML, CSS</li>
<li>Java,C++</li>
<li>Aptitude</li>
<li>Problem Solving</li>
</ul>
<h2><u>Contact Me</u></h2>
<p>Click below to send me an email:</p>
<a href="mailto:[email protected]">Send Email</a>
</body>
</html>
Output:
Result:
4. WRITE A HTML PROGRAM, TO EXPLAIN THE WORKING OF TABLES
BY PREPARING A TIMETABLE.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Timetable</title>
</head>
<body bgcolor="#f0f8ff">
<center>
<h1>Class Timetable</h1>
<table border="2" cellspacing="10" cellpadding="10">
<caption><b>CSE(AI&ML)- Class Timetable</b></caption>
<tr>
<th>Days/Time</th>
<th>9:20 AM - 10:10 AM</th>
<th>10:10 AM - 11:00 AM</th>
<th>11:00 AM - 11:20 AM</th>
<th>11:20 AM - 12:10 PM</th>
<th>12:10 PM - 1:00 PM</th>
<th>1:00 PM - 2:10 PM</th>
<th>2:10 PM - 3:00 PM</th>
<th>3:00 PM - 3:50 PM</th>
</tr>
<tr>
<td>Monday</td>
<td colspan="2" align="center">ML Lab</td>
<td rowspan="5" align="center"><b>Break</b></td>
<td>DBMS</td>
<td>ML</td>
<td rowspan="5" align="center"><b>Lunch</b></td>
<td>CN</td>
<td>OT</td>
</tr>
<tr>
<td>Tuesday</td>
<td>DS</td>
<td>OT</td>
<td>ML</td>
<td>DBMS</td>
<td colspan="2" align="center">WT Lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td>CN</td>
<td>ML</td>
<td rowspan="2" align="center"><b>Lunch Break</b></td>
<td>WT</td>
<td colspan="2" align="center">DBMS Lab</td>
</tr>
<tr>
<td>Thursday</td>
<td>WT</td>
<td>ML</td>
<td>CN</td>
<td>DS</td>
<td>OT</td>
</tr>
<tr>
<td>Friday</td>
<td>WT</td>
<td>DBMS</td>
<td>CN</td>
<td>ML</td>
<td>OT</td>
<td>SDA</td>
</tr>
</table>
</center>
</body>
</html>
Output:

Result:
5. WRITE A HTML PROGRAM, TO EXPLAIN THE WORKING OF FORMS
BY DESIGNING REGISTRATION FORM
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body bgcolor="#f0f8ff">
<center>
<h1>Registration Form</h1>
<form action="submit_form.php" method="post">
<table border="2" cellpadding="10" cellspacing="5">
<caption><b>Registration Details</b></caption>
<!-- Full Name -->
<tr>
<td><label for="fullname">Full Name:</label></td>
<td><input type="text" id="fullname" name="fullname" required></td>
</tr>
<!-- Username -->
<tr>
<td><label for="username">Username:</label></td>
<td><input type="text" id="username" name="username" required></td>
</tr>
<!-- Password -->
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<!-- Confirm Password -->
<tr>
<td><label for="confpassword">Confirm Password:</label></td>
<td><input type="password" id="confpassword" name="confpassword" required></td>
</tr>
<!-- Mobile Number -->
<tr>
<td><label for="mobilenumber">Mobile Number:</label></td>
<td><input type="number" id="mobilenumber" name="mobilenumber" required></td>
</tr>
<!-- Date of Birth -->
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<!-- Gender (Radio Buttons) -->
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female" required>
<label for="female">Female</label>
</td>
</tr>
<!-- Hobbies (Checkboxes) -->
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" id="hobby1" name="hobbies" value="Reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobbies" value="Travelling">
<label for="hobby2">Travelling</label><br>
<input type="checkbox" id="hobby3" name="hobbies" value="Sports">
<label for="hobby3">Sports</label><br>
</td>
</tr>
<!-- Country (List Box) -->
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>
</td>
</tr>
<!-- Address (Text Area) -->
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" cols="50" required></textarea></td>
</tr>
<!-- Submit and Reset Buttons -->
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</center>9:13 AM 4/29/2025
</body>
</html>
Output:

Result:
6. WRITE A HTML PROGRAM, TO EXPLAIN THE WORKING OF FRAMES,
SUCH THAT PAGE IS TO BE DIVIDED INTO 3 PARTS ON EITHER
DIRECTION.
Program:
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Image Frame</title>
</head>
<body>
<h3>Image Frame</h3>
<center><img src="E:\NEVEDHA\HTML\LAb\frames\tulips.jpg" width="90" height="90"
alt="Sample Image"></center>
</body>
</html>
image.html:
<!DOCTYPE html>
<html>
<head>
<title>Image Frame</title>
</head>
<body>
<h3>Image Frame</h3>
<center><img src="E:\NEVEDHA\HTML\LAb\frames\tulips.jpg" width="90" height="90"
alt="Sample Image"></center>
</body>
</html>
Paragraph.html:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Frame</title>
</head>
<body>
<h3>Paragraph Frame</h3>
<p align="justify">Tulips are spring-blooming perennial herbaceous bulbiferous geophytes in
the Tulipa genus. Their flowers are usually large, showy, and brightly coloured, generally red,
orange, pink, yellow, or white. They often have a different coloured blotch at the base of the
tepals, internally. Because of a degree of variability within the populations and a long history of
cultivation, classification has been complex and controversial. The tulip is a member of the lily
family, Liliaceae,[2] along with 14 other genera, where it is most closely related to Amana,
Erythronium, and Gagea in the tribe Lilieae.There are about 75 species, and these are divided
among four subgenera. The name "tulip" is thought to be derived from a Persian word for turban,
which it may have been thought to resemble by those who discovered it.[3] Tulips were originally
found in a band stretching from Southern Europe to Central Asia, but since the seventeenth
century have become widely naturalised and cultivated (see map). In their natural state, they are
adapted to steppes and mountainous areas with temperate climates. Flowering in the spring, they
become dormant in the summer once the flowers and leaves die back, emerging above ground as
a shoot from the underground bulb in early spring.Growing wild over much of the Near East and
Central Asia, tulips had probably been cultivated in Persia from the 10th century. By the 15th
century, tulips were among the most prized flowers; becoming the symbol of the later Ottomans.
Tulips were cultivated in Byzantine Constantinople as early as 1055 but they did not come to the
attention of Northern Europeans until the sixteenth century, when Northern European diplomats
to the Ottoman court observed and reported on them.[4] They were rapidly introduced into
Northern Europe and became a much-sought-after commodity during tulip mania.</p>
</body>
</html>
Link.html:
<!DOCTYPE html>
<html>
<head>
<title>Link Frame</title>
</head>
<body>
<h3>Hyperlink Frame</h3>
<a href="https://en.wikipedia.org/wiki/Tulip">For more Information Visit the website of
tulips</a>
</body>
</html>
Output:

Result:
7. WRITE AN HTML PROGRAM TO DESIGN A REAL-TIME PODCAST WEB
PAGE TITLED "TECHTALKS" USING SEMANTIC ELEMENTS, EMBED
AUDIO AND VIDEO, AND APPLY INLINE, INTERNAL, AND EXTERNAL CSS
STYLES DEMONSTRATING SELECTORS, PROPERTIES, AND VALUES.
Program:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TechTalks Podcast</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
nav {
background-color: #555;
text-align: center;
}

nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
display: flex;
padding: 20px;
}
article {
flex: 2;
margin-right: 20px;
}
aside {
flex: 1;
background-color: #f0f0f0;
padding: 10px;
}
figure {
text-align: center;
}
figcaption {
font-size: 0.9em;
color: gray;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<header><h1>TechTalks Podcast</h1></header>
<main>
<article>
<h2>Episode 12: The Future of AI</h2>
<p><span style="color:blue;">Welcome</span> to this week episode on Artificial Intelligence
trends.</p>
<figure>
<img src="E:\NEVEDHA\HTML\LAb\ai.jpg" width=90 height=90 alt="AI Talk">
<figcaption>Discussion on Emerging Technologies</figcaption>
</figure>
<h3>Listen to the Podcast Now!</h3>
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h3>Watch the Preview</h3>
<video width="250" height="150" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</article>
<aside>
<h3>Other Episodes</h3>
<ul>
<li>Episode 11: Blockchain Basics</li>
<li>Episode 10: Quantum Computing</li>
</ul>
</aside>
</main>
<footer>
<p>Copyright 2025 TechTalks. Designed by <span class="highlight">Web Teams</span></p>
</footer>
</body>
</html>
Style.css:
a:hover {
background-color: yellow;
color: black;
}
Output:

Result:
8. WRITE AN HTML AND CSS PROGRAM TO CREATE A PERSONAL
PROFILE PAGE THAT USES DIFFERENT CSS SELECTORS
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Profile Page</title>
<style>
/* Simple Selector */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
/* Box Model - Padding, Border, Margin */
.profile-box {
padding: 20px;
margin: 30px;
border: 3px solid #333;
background-color: #fff;
width: 80%;
margin-left: auto;
margin-right: auto;
}
/* Group Selector */
h1, h2 {
color: #333;
}
/* Class Selector */
.highlight {
color: #ff6347; /* Tomato Red */
}
/* ID Selector */
#contact-info {
background-color: #eef;
padding: 10px;
}
/* Attribute Selector */
a[href^="https"] {
color: blue;
text-decoration: none;
}
/* Combinator Selector - Child */
div > p {
color: #555;
}
/* Combinator Selector - Adjacent Sibling */
h2 + p {
font-weight: bold;
}
/* Pseudo-Class Selector */
a:hover {
color: red;
}
/* Pseudo-Element Selector */
p::first-letter {
font-size: 2em;
color: #ff6347;
}
/* Background Image (No Scroll) */
.background {
background-image: url('https://via.placeholder.com/1500x800');
background-size: cover;
height: 100vh;
text-align: center;
color: white;
padding-top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<!-- Background Section (No Scrolling) -->
<div class="background">
<h1>Welcome to My Profile</h1>
</div>
<!-- Profile Box -->
<div class="profile-box">
<h1>Ramya</h1>
<h2 class="highlight">Web Developer</h2>
<p>Passionate about creating amazing websites and web applications.</p>
<div>
<p>Skills:</p>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Node.js</li>
<li>UI/UX Design</li>
</ul>
</div>
<div id="contact-info">
<p>Email: [email protected]</p>
<p>Phone: 9485625796</p>
<p>Website: <a href="https://ramyaportfolio.com">ramyaportfolio.com</a></p>
</div>
</div>
</body>
</html>
Output:
Result:
9. WRITE A JAVASCRIPT PROGRAM THAT PROMPTS THE USER FOR
THEIR NAME AND AGE USING THE PROMPT() METHOD. DISPLAY THE
INFORMATION IN A TABLE ALONG WITH A MESSAGE INDICATING IF
THEY ARE ELIGIBLE TO VOTE (AGE >= 18). USE BOTH INTERNAL AND
EXTERNAL JAVASCRIPT FOR DOM MANIPULATION.

Program:
Prompt.html
<!DOCTYPE html>
<head>
<title>Voter Eligibility</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body align="center">
<h2>Voter Eligibility Checker</h2>
<table id="userInfo">
<tr align="center">
<th>NAME</th>
<th>AGE</th>
<th>ELIGIBILITY</th>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
Script.js
// Prompt the user for their name and age
let userName = prompt("Please enter your name:");
let userAge = prompt("Please enter your age:");
// Check if the user entered valid age
userAge = parseInt(userAge); // Convert age to a number
// Create a table row with user data
let eligibilityMessage = (userAge >= 18) ? "Eligible to Vote" : "Not Eligible to Vote";
// Get the table body to insert new row
let tableBody = document.getElementById("userInfo").getElementsByTagName("tbody")[0];
// Create a new row
let newRow = tableBody.insertRow();
// Insert the cells in the row
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
let cell3 = newRow.insertCell(2);
// Set the content of each cell
cell1.textContent = userName;
cell2.textContent = userAge;
cell3.textContent = eligibilityMessage;
Output:
Result:
10. WRITE A JAVASCRIPT PROGRAM TO MANAGE STUDENT SCORES
USING AN ARRAY. USE PUSH(), POP(), MATH.MAX(), MATH.RANDOM(),
ALERT(), AND GETELEMENTBYID() TO DISPLAY AND UPDATE SCORES
WITH A MOTIVATIONAL MESSAGE.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Student Score Manager</title>
</head>
<body align="center" bgcolor="pink">
<h2 id="heading"><font color="Green">Student Score Manager</font></h2>
<p><strong>Scores:</strong> <span id="scoreList">Loading...</span></p>
<p><strong>Highest Score:</strong> <span id="highestScore">-</span></p>
<p><strong>Message:</strong> <span id="message">-</span></p>
<input type="number" id="newScore" placeholder="Enter new score"><br><br>
<button onclick="addScore()">Add Score</button><br><br>
<button onclick="removeScore()">Remove Last Score</button>
<script>
// Initial array of scores
let scores = [85, 78, 92, 66];
// Motivational messages
const messages = [
"Keep up the good work!",
"You're doing great!",
"Practice makes perfect!",
"Never stop learning!",
"Success is a journey!"
];
// Display scores and highest score
function displayScores() {
document.getElementById("scoreList").textContent = scores.join(", ");
document.getElementById("highestScore").textContent = Math.max(...scores);
// Display random motivational message
const randomIndex = Math.floor(Math.random() * messages.length);
document.getElementById("message").textContent = messages[randomIndex];
}
// Add a score
function addScore() {
let newScore = parseInt(document.getElementById("newScore").value);
if (!isNaN(newScore)) {
scores.push(newScore);
window.alert("Score added successfully!");
displayScores();
} else {
window.alert("Please enter a valid score.");
}
}
// Remove the last score
function removeScore() {
if (scores.length > 0) {
let removed = scores.pop();
window.alert("Removed score: " + removed);
displayScores();
} else {
window.alert("No scores to remove.");
}
}
// Initial display
displayScores();
</script>
</body>
</html>

Output:
Result:
11.WRITE A PROGRAM TO PROMPT THE USER TO ENTER THREE
INTEGERS AND DETERMINE THE LARGEST NUMBER USING
CONDITIONAL STATEMENTS. THEN, USING A LOOP, PRINT THE
NUMBERS. FINALLY, OUTPUT THE WEEKDAY USING A SWITCH
STATEMENT BASED ON AN INTEGER INPUT (1 FOR MONDAY, 7 FOR
SUNDAY).

Program:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Program with Loop Count</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #2a4d69;
}
h3 {
color: #4b86b4;
}
ul {
list-style-type: square;
}
</style>
</head>
<body align="center">
<h2>JavaScript Program</h2>
<button onclick="runProgram()">Click to Run the Program</button>
<div id="output"></div>
<script>
function runProgram() {
let output = document.getElementById("output");
output.innerHTML = "";
// 1. Find the largest of three integers
output.innerHTML += "<h3>1. Find the Largest of Three Integers</h3>";
let num1 = parseInt(prompt("Enter the first integer:"));
let num2 = parseInt(prompt("Enter the second integer:"));
let num3 = parseInt(prompt("Enter the third integer:"));
let largest;
if (num1 >= num2 && num1 >= num3) {
largest = num1;
} else if (num2 >= num1 && num2 >= num3) {
largest = num2;
} else {
largest = num3;
}
output.innerHTML += `<p><strong>The largest number is: ${largest}</strong></p>`;
// 2. Loop from starting number for given count
output.innerHTML += "<h3>2. Print Numbers in a Loop</h3>";
let start = parseInt(prompt("Enter the starting number:"));
let count = parseInt(prompt("Enter how many numbers to print:"));
if (isNaN(start) || isNaN(count) || count <= 0) {
output.innerHTML += "<p><strong>Invalid input for loop.</strong></p>";
} else {
output.innerHTML += `<p>Printing ${count} numbers starting from ${start}:</p><ul>`;
for (let i = 0; i < count; i++) {
output.innerHTML += `<li>${start + i}</li>`;
}
output.innerHTML += "</ul>";
}
// 3. Weekday based on number input
output.innerHTML += "<h3>3. Get the Weekday from a Number (1-7)</h3>";
let dayNumber = parseInt(prompt("Enter a number (1-7) to get the weekday:"));
let dayName;
switch (dayNumber) {
case 1: dayName = "Monday"; break;
case 2: dayName = "Tuesday"; break;
case 3: dayName = "Wednesday"; break;
case 4: dayName = "Thursday"; break;
case 5: dayName = "Friday"; break;
case 6: dayName = "Saturday"; break;
case 7: dayName = "Sunday"; break;
default: dayName = "Invalid input. Please enter a number between 1 and 7.";
}
output.innerHTML += `<p><strong>The day is: ${dayName}</strong></p>`;
}
</script>
</body>
</html>
Output:
Result:
12. DESIGN AN HTML PAGE WITH A TEXT BOX AND FOUR BUTTONS
NAMED "FACTORIAL", "FIBONACCI", "PRIME", AND "PALINDROME".
WHEN EACH BUTTON IS CLICKED, CALL AN APPROPRIATE
JAVASCRIPT FUNCTION THAT CALCULATES THE RESULTS.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Math Operations</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f5f5f5;
}
h2 {
color: #333;
}
input, button {
padding: 18px;
font-size: 18px;
margin: 5px;
border: none;
border-radius: 5px;
}
input {
width: 200px;
}
button {
background-color: #C9C0BB;
color: black;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
color: #2a4d69;
}
</style>
</head>
<body>
<h2>Math Operations</h2>
<input type="number" id="numberInput" placeholder="Enter a number" />
<br />
<button onclick="calculateFactorial()">Factorial</button>
<button onclick="generateFibonacci()">Fibonacci</button>
<button onclick="findPrimes()">Prime</button>
<button onclick="checkPalindrome()">Palindrome</button>
<div id="result"></div>
<script>
function calculateFactorial() {
const num = parseInt(document.getElementById("numberInput").value);
if (isNaN(num) || num < 0) {
document.getElementById("result").innerText = "Enter a non-negative number.";
return;
}
let fact = 1;
for (let i = 1; i <= num; i++) {
fact *= i;
}
document.getElementById("result").innerText = `Factorial of ${num} is ${fact}`;
}
function generateFibonacci() {
const num = parseInt(document.getElementById("numberInput").value);
if (isNaN(num) || num < 0) {
document.getElementById("result").innerText = "Enter a non-negative number.";
return;
}
let fib = [0, 1];
for (let i = 2; i < num; i++) {
fib[i] = fib[i - 1] + fib[i - 2];
}
document.getElementById("result").innerText = `Fibonacci series up to ${num} terms:
${fib.slice(0, num).join(", ")}`;
}
function findPrimes() {
const num = parseInt(document.getElementById("numberInput").value);
if (isNaN(num) || num < 2) {
document.getElementById("result").innerText = "Enter a number greater than 1.";
return;
}
let 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);
}
document.getElementById("result").innerText = `Prime numbers up to ${num}:
${primes.join(", ")}`;
}
function checkPalindrome() {
const num = document.getElementById("numberInput").value;
if (num === "") {
document.getElementById("result").innerText = "Enter a number.";
return;
}
const reversed = num.split("").reverse().join("");
if (num === reversed) {
document.getElementById("result").innerText = `${num} is a Palindrome number.`;
} else {
document.getElementById("result").innerText = `${num} is NOT a Palindrome number.`;
}
}
</script>
</body>
</html>
Output:
Result:
13. WRITE A PROGRAM USING HTML AND JAVASCRIPT TO CREATE A
REGISTRATION FORM THAT DISPLAYS A CONFIRMATION MESSAGE IF
ALL FIELDS ARE VALID, OTHERWISE SHOWS APPROPRIATE ERROR
MESSAGES.
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 Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 48%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 14px;
}
.form-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
</style>
</head>
<body>
<h2><center>Registration Form</center></h2>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" />
<div id="nameError" class="error"></div>
<label for="mobile">Mobile:</label>
<input type="text" id="mobile" placeholder="Enter your mobile number" />
<div id="mobileError" class="error"></div>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" />
<div id="emailError" class="error"></div>
<div class="form-buttons">
<button type="submit">Register</button>
<button type="button" onclick="resetForm()">Reset</button>
</div>
</form>
<script>
// Validate function for the form
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission for validation
// Clear previous error messages
document.getElementById('nameError').textContent = '';
document.getElementById('mobileError').textContent = '';
document.getElementById('emailError').textContent = '';
// Get form values
const name = document.getElementById('name').value;
const mobile = document.getElementById('mobile').value;
const email = document.getElementById('email').value;
let isValid = true;
// Validate Name (Starts with a letter, alphanumeric, min 6 characters)
const nameRegex = /^[A-Za-z][A-Za-z0-9]{5,}$/;
if (!nameRegex.test(name)) {
document.getElementById('nameError').textContent = 'Name should start with a letter,
followed by alphanumeric characters and be at least 6 characters long.';
isValid = false;
}
// Validate Mobile (Exactly 10 digits)
const mobileRegex = /^\d{10}$/;
if (!mobileRegex.test(mobile)) {
document.getElementById('mobileError').textContent = 'Mobile number should be exactly 10
digits.';
isValid = false;
}
// Validate Email (Valid email format)
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(email)) {
document.getElementById('emailError').textContent = 'Please enter a valid email address (e.g.,
[email protected]).';
isValid = false;
}
// If all validations pass, show confirmation message
if (isValid) {
alert('Registration Successful!');
}
});
// Reset form fields and clear error messages
function resetForm() {
document.getElementById('registrationForm').reset(); // Clears the form
document.getElementById('nameError').textContent = '';
document.getElementById('mobileError').textContent = '';
document.getElementById('emailError').textContent = '';
}
</script>
</body>
</html>

Output:
Result:

You might also like