1)Develop the HTML page named as “[Link]”.
Add the following tags with relevant
content. 1. Set the title of the page as “My First Web Page” 2. Within the body use the following
tags: a) Moving text = “Basic HTML Tags” b) Different heading tags (h1 to h6) c) Paragraph d)
Horizontal line e) Line Break f) Block Quote g) Pre tag h) Different Logical Style (, , , etc.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Moving text -->
<marquee>Basic HTML Tags</marquee>
<!-- Different heading tags (h1 to h6) -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- Paragraph -->
<p>This is a paragraph of text that provides a bit of information about the content on this
page.</p>
<!-- Horizontal line -->
<hr>
<!-- Line Break -->
<p>This is the first line.<br>This is the second line after a line break.</p>
<!-- Block Quote -->
<blockquote>
This is a block quote. It is often used to indicate a quotation or excerpt from another source.
</blockquote>
<!-- Preformatted text -->
<pre>
This is preformatted text.
It preserves whitespace and
formatting exactly as you enter it.
</pre>
<!-- Logical Style tags -->
<p>
This is <b>bold</b> text.<br>
This is <i>italicized</i> text.<br>
This is <u>underlined</u> text.<br>
This is <sup>superscript</sup> text.<br>
This is <sub>subscript</sub> text.
</p>
</body>
</html>
2) Develop the HTML page named as “[Link]” to display your class time table. a) Provide the
title as Time Table with table header and table footer, row-span and col-span etc. b) Provide
various colour options to the cells (Highlight the lab hours and elective hours with different
colours.) c) Provide colour options for rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
th, td {
border: 1px solid black;
text-align: center;
padding: 10px;
th {
background-color: #4CAF50;
color: white;
tfoot {
background-color: #f1f1f1;
font-weight: bold;
/* Row colors */
tr:nth-child(even) {
background-color: #f2f2f2;
tr:nth-child(odd) {
background-color: #ffffff;
/* Highlight lab and elective hours */
.lab {
background-color: #FFEB3B;
.elective {
background-color: #FF7043;
</style>
</head>
<body>
<h1>My Class Time Table</h1>
<table>
<thead>
<tr>
<th rowspan="2">Day</th>
<th colspan="5">Subjects</th>
</tr>
<tr>
<th>9:00 - 10:00 AM</th>
<th>10:00 - 11:00 AM</th>
<th>11:00 - 12:00 PM</th>
<th>1:00 - 2:00 PM</th>
<th>2:00 - 3:00 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td class="lab" colspan="2">Physics Lab</td>
<td>English</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td class="elective">Elective - History</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Math</td>
<td>Chemistry</td>
<td>English</td>
<td class="lab" colspan="2">Chemistry Lab</td>
</tr>
<tr>
<td>Thursday</td>
<td>Physics</td>
<td>Biology</td>
<td class="elective">Elective - Geography</td>
<td>Math</td>
<td>English</td>
</tr>
<tr>
<td>Friday</td>
<td>Chemistry</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Biology</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">* Lab hours are highlighted in yellow. Elective hours are highlighted in
orange.</td>
</tr>
</tfoot>
</table>
</body>
</html>
3) Develop an external style sheet named as “[Link]” and provide different styles for h2, h3, hr,
p, div, span, time, img & a tags. Apply different CSS selectors for tags and demonstrate the
significance of each.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Demo</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<hr>
<p class="highlight">This is a paragraph with a class selector.</p>
<div id="content">
<p>This paragraph is inside a div with an ID selector.</p>
<span>This is a span inside the div.</span>
</div>
<time datetime="2024-09-06">September 6, 2024</time>
<img src="[Link]" alt="Sample Image">
<a href="[Link] [Link]</a>
<a href="#" class="button">Click Me</a>
</body>
</html>
CSS
/* Element Selector */
h2 {
color: #4CAF50;
font-size: 28px;
text-align: center;
text-transform: uppercase;
/* Element Selector */
h3 {
color: #2196F3;
font-size: 24px;
margin-left: 20px;
/* Element Selector for <hr> */
hr {
border: 1px solid #333;
margin: 20px 0;
/* Class Selector */
.highlight {
background-color: yellow;
font-weight: bold;
/* ID Selector */
#content {
background-color: #f9f9f9;
padding: 15px;
border: 2px solid #ccc;
/* Attribute Selector */
time[datetime] {
font-style: italic;
color: #FF5722;
/* Universal Selector */
img {
max-width: 100%;
border: 2px solid #333;
margin: 10px 0;
/* Pseudo-class Selector for links */
a:hover {
color: red;
text-decoration: underline;
/* Class Selector for button */
[Link] {
display: inline-block;
background-color: #FF9800;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
[Link]:hover {
background-color: #F57C00;
/* Descendant Selector */
div p {
color: #9C27B0;
/* Universal Selector */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
4) Develop HTML page named as “[Link]” having variety of HTML input elements with
background colors, table for alignment & provide font colors & size using CSS styles
<!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>
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
h1 {
color: #333333;
text-align: center;
font-size: 2em;
margin-bottom: 20px;
/* Table Styles */
table {
margin: 0 auto;
padding: 20px;
border-collapse: collapse;
background-color: #ffffff;
width: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
th, td {
padding: 10px;
text-align: left;
font-size: 1em;
border-bottom: 1px solid #dddddd;
th {
background-color: #f2f2f2;
/* Input Field Styles */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #cccccc;
box-sizing: border-box;
background-color: #fafafa;
font-size: 1em;
color: #333333;
/* Radio Button and Checkbox Styles */
input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
/* Button Styles */
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 1em;
margin-top: 20px;
width: 100%;
input[type="submit"]:hover {
background-color: #45a049;
/* Font Colors and Sizes */
label {
color: #333333;
font-size: 1em;
}
/* Additional styling for headers */
th {
font-weight: bold;
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<table>
<tr>
<th><label for="fname">First Name:</label></th>
<td><input type="text" id="fname" name="firstname" placeholder="Enter your first
name"></td>
</tr>
<tr>
<th><label for="lname">Last Name:</label></th>
<td><input type="text" id="lname" name="lastname" placeholder="Enter your last
name"></td>
</tr>
<tr>
<th><label for="email">Email:</label></th>
<td><input type="email" id="email" name="email" placeholder="Enter your email"></td>
</tr>
<tr>
<th><label for="password">Password:</label></th>
<td><input type="password" id="password" name="password" placeholder="Enter your
password"></td>
</tr>
<tr>
<th><label for="dob">Date of Birth:</label></th>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<th><label>Gender:</label></th>
<td>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<th><label for="country">Country:</label></th>
<td>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select>
</td>
</tr>
<tr>
<th><label>Hobbies:</label></th>
<td>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="Register">
</th>
</tr>
</table>
</form>
</body>
</html>
5. Develop HTML page named as “[Link]” having variety of HTML semantic elements
with background colors, text-colors & size for figure, table, aside, section, article, header, footer…
etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Newspaper</title>
<style>
/* General Styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
line-height: 1.6;
h1, h2, h3 {
color: #333333;
/* Header Styles */
header {
background-color: #34495e;
color: #ffffff;
padding: 20px;
text-align: center;
}
/* Navigation Styles */
nav {
background-color: #2c3e50;
color: #ffffff;
padding: 15px;
text-align: center;
nav a {
color: #ffffff;
margin: 0 15px;
text-decoration: none;
font-size: 1.1em;
nav a:hover {
text-decoration: underline;
/* Section Styles */
section {
padding: 20px;
background-color: #ffffff;
margin: 10px;
/* Article Styles */
article {
background-color: #ecf0f1;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
/* Aside Styles */
aside {
background-color: #f7f7f7;
padding: 15px;
margin: 10px;
border-left: 4px solid #2980b9;
font-size: 0.9em;
color: #7f8c8d;
/* Figure Styles */
figure {
margin: 20px;
text-align: center;
figure img {
max-width: 100%;
height: auto;
border: 1px solid #bdc3c7;
figure figcaption {
font-size: 0.9em;
color: #7f8c8d;
margin-top: 5px;
}
/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #dddddd;
th {
background-color: #2c3e50;
color: #ffffff;
td {
background-color: #f9f9f9;
/* Footer Styles */
footer {
background-color: #34495e;
color: #ffffff;
padding: 10px;
text-align: center;
margin-top: 20px;
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>Daily News</h1>
<p>Your source for the latest news</p>
</header>
<!-- Navigation -->
<nav>
<a href="#home">Home</a>
<a href="#world">World</a>
<a href="#technology">Technology</a>
<a href="#sports">Sports</a>
<a href="#contact">Contact</a>
</nav>
<!-- Main Content -->
<section>
<!-- Main Article -->
<article>
<h2>Breaking News: Major Event in the City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo
lorem, et efficitur purus tincidunt at. Phasellus scelerisque ex eu varius laoreet.</p>
</article>
<!-- Related Articles -->
<article>
<h2>Technology: New Innovations in AI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo
lorem, et efficitur purus tincidunt at.</p>
</article>
<!-- Aside Section -->
<aside>
<h3>Quick Facts</h3>
<p>Did you know? The tallest building in the world is the Burj Khalifa in Dubai, standing at 828
meters tall.</p>
</aside>
<!-- Figure Section -->
<figure>
<img src="[Link]" alt="Example News Image">
<figcaption>Caption: Example of a relevant image for the article.</figcaption>
</figure>
<!-- Table Section -->
<table>
<thead>
<tr>
<th>Day</th>
<th>Event</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>City Hall Meeting</td>
<td>City Hall</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Tech Conference</td>
<td>Convention Center</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Sports Event</td>
<td>Sports Arena</td>
</tr>
</tbody>
</table>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Daily News. All rights reserved.</p>
</footer>
</body>
</html>
Output:
6)Apply HTML, CSS and JavaScript to design a simple calculator to perform the following
operations: sum, product, difference, remainder, quotient, power, square-root and square.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 50px;
.calculator {
background-color: #fff;
border-radius: 10px;
padding: 20px;
width: 300px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
.calculator input[type="number"], .calculator input[type="text"] {
width: calc(50% - 10px);
padding: 10px;
margin: 5px;
font-size: 1.2em;
.calculator button {
width: calc(33.33% - 10px);
padding: 10px;
margin: 5px;
font-size: 1.1em;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
.calculator button:hover {
background-color: #2980b9;
.result {
margin-top: 20px;
font-size: 1.5em;
color: #333;
</style>
</head>
<body>
<div class="calculator">
<h1>Simple Calculator</h1>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<div>
<button onclick="performOperation('sum')">Sum</button>
<button onclick="performOperation('difference')">Difference</button>
<button onclick="performOperation('product')">Product</button>
<button onclick="performOperation('quotient')">Quotient</button>
<button onclick="performOperation('remainder')">Remainder</button>
<button onclick="performOperation('power')">Power</button>
<button onclick="performOperation('square-root')">Square Root</button>
<button onclick="performOperation('square')">Square</button>
</div>
<div class="result">
Result: <span id="resultOutput">0</span>
</div>
</div>
<script>
function performOperation(operation) {
const num1 = parseFloat([Link]('num1').value);
const num2 = parseFloat([Link]('num2').value);
let result;
switch(operation) {
case 'sum':
result = num1 + num2;
break;
case 'difference':
result = num1 - num2;
break;
case 'product':
result = num1 * num2;
break;
case 'quotient':
result = num1 / num2;
break;
case 'remainder':
result = num1 % num2;
break;
case 'power':
result = [Link](num1, num2);
break;
case 'square-root':
result = [Link](num1);
break;
case 'square':
result = [Link](num1, 2);
break;
default:
result = 0;
[Link]('resultOutput').textContent = result;
</script>
</body>
</html>
7) Develop JavaScript program (with HTML/CSS) for: a) Converting JSON text to JavaScript Object
b) Convert JSON results into a date c) Converting From JSON To CSV and CSV to JSON d) Create
hash from string using [Link]() method
a) Converting JSON text to JavaScript Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to CSV Converter</title>
</head>
<body>
<h1>JSON to CSV Converter</h1>
<pre id="csv-output"></pre>
<script>
// JSON data
const jsonData = [
"id": 1,
"name": "John Doe",
"age": 30,
"department": "Engineering"
},
"id": 2,
"name": "Jane Smith",
"age": 28,
"department": "Marketing"
];
// Convert JSON to CSV manually
function jsonToCsv(jsonData) {
let csv = '';
// Extract headers
const headers = [Link](jsonData[0]);
csv += [Link](',') + '\n';
// Extract values
[Link](obj => {
const values = [Link](header => obj[header]);
csv += [Link](',') + '\n';
});
return csv;
// Convert JSON to CSV
const csvData = jsonToCsv(jsonData);
// Output CSV data to the page
[Link]('csv-output').textContent = csvData;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
const obj = [Link](text);
[Link]("demo").innerHTML =
[Link][1].firstName + " " + [Link][1].lastName;
</script>
</body>
</html>
b) Convert JSON results into a date
<html>
<body>
<h2>Convert JSON results into a date using JavaScript</h2>
<p>Click the following button to convert JSON results into a date</p>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3>Input Data : </h3>
<p id="input"> /Date(1559072200000)/ </p>
<h3> Resulting Date: </h3>
<p id="output"> </p>
<script>
function convert() {
// Store the JSON date string in a variable
var jsonDate = '/Date(1559072200000)/';
// Replace the first part of the string "/Date(" with an empty string
jsonDate = [Link]("/Date(", " ")
// Replace the last part of the string ")/" with an empty string
jsonDate = [Link](")/", " ")
// Create a new Date object by parsing the number of milliseconds from the JSON string
let strDate = new Date(parseInt(jsonDate));
// Get the and output element in the HTML document
let output = [Link]("output")
// Set the inner text of the output element to the formatted date
[Link] = strDate;
</script>
</body>
</html>
c)JSON to CSV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to CSV Converter</title>
</head>
<body>
<h1>JSON to CSV Converter</h1>
<pre id="csv-output"></pre>
<script>
// JSON data
const jsonData = [
"id": 1,
"name": "John Doe",
"age": 30,
"department": "Engineering"
},
"id": 2,
"name": "Jane Smith",
"age": 28,
"department": "Marketing"
];
// Convert JSON to CSV manually
function jsonToCsv(jsonData) {
let csv = '';
// Extract headers
const headers = [Link](jsonData[0]);
csv += [Link](',') + '\n';
// Extract values
[Link](obj => {
const values = [Link](header => obj[header]);
csv += [Link](',') + '\n';
});
return csv;
// Convert JSON to CSV
const csvData = jsonToCsv(jsonData);
// Output CSV data to the page
[Link]('csv-output').textContent = csvData;
</script>
</body>
</html>
d)csv to json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV to JSON Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
h1 {
text-align: center;
#csv-file-input {
display: block;
margin: 20px auto;
#json-output {
white-space: pre-wrap; /* Preserve whitespace formatting */
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
margin-top: 20px;
max-width: 100%;
overflow-x: auto;
</style>
</head>
<body>
<h1>CSV to JSON Converter</h1>
<input type="file" id="csv-file-input" accept=".csv">
<div id="json-output"></div>
<script>
function csvToJson(csvString) {
const rows = [Link]("\n");
const headers = rows[0].split(",");
const jsonData = [];
for (let i = 1; i < [Link]; i++) {
const values = rows[i].split(",");
const obj = {};
for (let j = 0; j < [Link]; j++) {
const key = headers[j].trim();
const value = values[j] ? values[j].trim() : '';
obj[key] = value;
[Link](obj);
return [Link](jsonData, null, 2);
[Link]('csv-file-input').addEventListener('change', function(event) {
const file = [Link][0];
if (file && [Link] === 'text/csv') {
const reader = new FileReader();
[Link] = function(e) {
const csv = [Link];
const json = csvToJson(csv);
[Link]('json-output').textContent = json;
};
[Link](file);
} else {
alert('Please upload a valid CSV file.');
}
});
</script>
</body>
</html>
8a. Develop a PHP program (with HTML/CSS) to keep track of the number of visitors visiting the
web page and to display this count of visitors, with relevant headings.
<?php
// File to store the visitor count
$file = "visitor_count.txt";
// Check if the file exists
if (!file_exists($file)) {
// If not, create the file and set initial count to 0
file_put_contents($file, 0);
}
// Get the current count from the file
$visitor_count = (int) file_get_contents($file);
// Increment the count
$visitor_count++;
// Save the new count back to the file
file_put_contents($file, $visitor_count);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 50px;
.counter {
font-size: 50px;
color: #333;
.heading {
font-size: 24px;
color: #666;
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: inline-block;
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Welcome to the Visitor Counter</h1>
<p class="counter"><?php echo $visitor_count; ?></p>
<p>Visitors have been here!</p>
</div>
</body>
</html>
8b. Develop a PHP program (with HTML/CSS) to sort the student records which are stored in the
database using selection sort.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
table {
width: 60%;
margin: 20px auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
padding: 10px;
th {
background-color: #f4f4f4;
tr:nth-child(even) {
background-color: #f9f9f9;
.button {
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
.button:hover {
background-color: #218838;
</style>
</head>
<body>
<h2 align="center">Student Records</h2>
<?php
// Database connection
$servername = "localhost";
$username = "root"; // Use your database username
$password = ""; // Use your database password
$dbname = "school";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
// Fetch student records
$sql = "SELECT id, name, grade FROM students";
$result = $conn->query($sql);
$students = [];
if ($result->num_rows > 0) {
// Store student records in an array
while($row = $result->fetch_assoc()) {
$students[] = $row;
// Selection sort function (sorting by grade)
function selectionSort(&$array) {
$n = count($array);
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($array[$j]['grade'] < $array[$min_idx]['grade']) {
$min_idx = $j;
}
}
// Swap the found minimum element with the first element
$temp = $array[$min_idx];
$array[$min_idx] = $array[$i];
$array[$i] = $temp;
// Sort the student records
selectionSort($students);
?>
<!-- Display the sorted student records in a table -->
<table align="center">
<tr>
<th>ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<?php foreach ($students as $student): ?>
<tr>
<td><?php echo $student['id']; ?></td>
<td><?php echo $student['name']; ?></td>
<td><?php echo $student['grade']; ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>
<?php
// Close the database connection
$conn->close();
?>
Output
9) Develop jQuery script (with HTML/CSS) for: a. Appends the content at the end of the existing
paragraph and list. b. Change the state of the element with CSS style using animate() method c.
Change the color of any div that is animated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
p, ul {
margin: 20px 0;
font-size: 18px;
ul {
list-style: none;
ul li {
padding: 5px;
background-color: #f4f4f4;
margin-bottom: 5px;
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin-top: 20px;
display: inline-block;
}
.button {
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
.button:hover {
background-color: #218838;
</style>
</head>
<body>
<h2>jQuery Manipulations</h2>
<!-- Paragraph and List -->
<p id="myParagraph">This is an initial paragraph.</p>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Button to append content -->
<a class="button" id="appendContent" href="#">Append Content</a>
<!-- Button to animate the box -->
<a class="button" id="animateBox" href="#">Animate Box</a>
<!-- Div box to animate -->
<div class="box" id="myBox"></div>
<script src="[Link]
<script>
$(document).ready(function() {
// (a) Append content to paragraph and list
$('#appendContent').click(function(e) {
[Link]();
$('#myParagraph').append(' This content is appended.');
$('#myList').append('<li>New List Item</li>');
});
// (b) Animate the box's width and height using animate()
$('#animateBox').click(function(e) {
[Link]();
$('#myBox').animate({
width: '200px',
height: '200px'
}, 1000, function() {
// (c) Change color of the div after animation is done
$(this).css('background-color', '#e74c3c');
});
});
});
</script>
</body>
</html>
Output:
10) Develop a JavaScript program with Ajax (with HTML/CSS) for: a. Use ajax() method (without
Jquery) to add the text content from the text file by sending ajax request. b. Use ajax() method
(with Jquery) to add the text content from the text file by sending ajax request. c. Illustrate the
use of getJSON() method in jQuery d. Illustrate the use of parseJSON() method to display JSON
values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax and JSON Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
.container {
margin-top: 20px;
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
button:hover {
background-color: #2980b9;
#content, #jsonContent, #jsonValues {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f4f4f4;
</style>
</head>
<body>
<h2>Ajax and JSON Operations</h2>
<div class="container">
<button id="loadTextNoJquery">Load Text (Vanilla JS)</button>
<button id="loadTextJquery">Load Text (jQuery)</button>
<button id="loadJson">Load JSON (getJSON)</button>
<button id="parseJson">Parse JSON (parseJSON)</button>
</div>
<div id="content">Content will appear here...</div>
<div id="jsonContent">JSON content will appear here...</div>
<div id="jsonValues">Parsed JSON values will appear here...</div>
<!-- Include jQuery -->
<script src="[Link]
<script>
// (a) Ajax using Vanilla JavaScript (no jQuery)
[Link]('loadTextNoJquery').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
[Link]('GET', '[Link]', true);
[Link] = function() {
if ([Link] === 200) {
[Link]('content').textContent = [Link];
} else {
[Link]('content').textContent = 'Failed to load content.';
};
[Link]();
});
// (b) Ajax using jQuery's ajax() method
$('#loadTextJquery').click(function() {
$.ajax({
url: '[Link]',
method: 'GET',
success: function(data) {
$('#content').text(data);
},
error: function() {
$('#content').text('Failed to load content.');
});
});
// (c) Using getJSON() method in jQuery
$('#loadJson').click(function() {
$.getJSON('[Link]', function(data) {
var jsonContent = '<pre>' + [Link](data, null, 4) + '</pre>';
$('#jsonContent').html(jsonContent);
});
});
// (d) Using parseJSON() to display JSON values
$('#parseJson').click(function() {
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
var jsonObj = $.parseJSON(jsonString);
var output = 'Name: ' + [Link] + '<br>' +
'Age: ' + [Link] + '<br>' +
'City: ' + [Link];
$('#jsonValues').html(output);
});
</script>
</body>
</html>
Output:
