FSD Lab Experiments
1. Develop a static HTML page using headings, paragraph formatting, links,
image, lists, and table.
Experiment 1:- Create a file exp1_static_page.html then write below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Experiment 1 - Static HTML</title>
</head>
<body>
<h1>FSD Lab - Experiment 1</h1>
<h2>Static HTML Page</h2>
<p> This is a <b>bold</b>, <i>italic</i>, <u>underlined</u> text example. Here
is<mark>highlighted</mark> text and <small>small text</small>. </p>
<p>Chemical Formula Example: H<sub>2</sub>O Math Example: x<sup>2</sup> +
y<sup>2</sup></p>
<hr>
<h3>Links</h3>
<p> Visit: <a href="[Link] target="_blank">W3Schools</a> |
<a href="[Link] target="_blank">MDN Web Docs</a>
</p>
<h3>Image</h3>
<img src=”[Link] alt="Lab Image"
width="500">
<h3>Lists</h3>
<h4>Ordered List</h4>
<ol>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript</li>
</ol>
<h4>Unordered List</h4>
<ul>
<li>Text Formatting</li>
<li>Tables</li>
<li>Links & Images</li>
</ul>
<h3>Student Table</h3>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Branch</th>
</tr>
<tr>
<td>101</td>
<td>Deepak</td>
<td>CSE</td>
</tr>
<tr>
<td>102</td>
<td>Ravi</td>
<td>IT</td>
</tr>
</table>
</body>
</html>
2. Create a webpage using internal CSS, external CSS, layout design, and a
Tailwind form + dropdown.
Experiment 2:- Create a file [Link] and write below Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Experiment 2 - CSS + Tailwind</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]
<style>
. banner {background: #f0f8ff; padding: 15px; border-left: 6px solid #0077ff; margin-bottom: 15px;}
</style>
</head>
<body class="bg-gray-100">
<div class="container">
<h1 class="title">FSD Lab - Experiment 2</h1>
<div class="banner">
<b>Internal CSS</b> applied on this banner (padding + border + background).
</div>
<div class="card">
<h2 class="subtitle">Tailwind Form</h2>
<form class="space-y-4">
<div>
<label class="block font-medium">Full Name</label>
<input type="text" class="w-full p-2 border rounded" placeholder="Enter your
name">
</div>
<div>
<label class="block font-medium">Email</label>
<input type="email" class="w-full p-2 border rounded" placeholder="Enter your
email">
</div>
<div>
<label class="block font-medium">Select Branch (Dropdown)</label>
<select class="w-full p-2 border rounded">
<option>CSE</option>
<option>IT</option>
<option>AI</option>
<option>DS</option>
</select>
</div>
<button type="button" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-
700">Submit</button>
</form>
</div>
</div>
</body>
</html>
Create a file [Link] and write below Code: -
.container {width: 90%; max-width: 900px; margin: 25px auto; font-family: Arial, sans-
serif; }
.title {text-align: center; color: #222; margin-bottom: 20px; }
.subtitle {margin-bottom: 10px; color: #333;}
.card{background: white; padding: 20px;border-radius: 10px;box-shadow: 0 0 10px
rgba(0,0,0,0.08);}
3. Create interactive elements using JS and fetch data using AJAX (Fetch
API) from an API.
Experiment 3:- Create a file exp3_ajax_popover.html and write below code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body{font-family: Arial; margin: 20px;}
.box{padding: 15px; border: 1px solid #ccc; border-radius: 8px; max-width: 650px;}
button{padding: 10px 15px; margin: 6px 0; cursor: pointer;}
#popover{ display:none; position: absolute; background: #222; color:#fff; padding:10px; border-radius:
6px; width: 220px; }
#apiData{margin-top: 12px; background:#f7f7f7; padding:10px; border-radius:6px;}
</style>
</head>
<body>
<h1>Experiment 3: JavaScript + AJAX</h1>
<div class="box">
<button onclick="showAlert()">Show Alert</button>
<button id="popBtn">Show Popover</button>
<div id="popover">Hello! This is a popover message.</div>
<button onclick="loadData()">Fetch API Data (AJAX)</button>
<div id="apiData">
<b>API Output:</b>
<p id="result">Click "Fetch API Data" to load user.</p>
</div>
</div>
<script>
function showAlert(){
alert("Welcome! Alert triggered successfully.");
}
var popBtn = [Link]("popBtn");
var popover = [Link]("popover");
[Link] = function(e) {
if ([Link] === "none" || [Link] === "") {
[Link] = "block";
[Link] = ([Link] + 10) + "px";
[Link] = ([Link] + 10) + "px";
} else {
[Link] = "none";
}
};
function loadData() {
var result = [Link]("result");
[Link] = "Loading data...";
var xhr = new XMLHttpRequest();
[Link]("GET", "[Link] true);
[Link] = function() {
if ([Link] === 4 && [Link] === 200) {
var data = [Link]([Link]);
[Link] =
"<p><b>Name:</b> " + [Link] + "</p>" +
"<p><b>Email:</b> " + [Link] + "</p>" +
"<p><b>City:</b> " + [Link] + "</p>" +
"<p><b>Company:</b> " + [Link] + "</p>";
}
};
[Link]();
}
</script>
</body>
</html>
4. Write a JavaScript program to manipulate the DOM. Update the content
and style of HTML elements based on user interactions.
Experiment 4 :- Create a file exp4_dom.html and write below code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Experiment 4 - DOM Manipulation</title>
<style>
body{font-family: Arial; margin: 20px;}
#box{padding: 15px; border: 2px solid #444; border-radius: 8px; width: 450px;}
button{padding: 10px 15px; margin: 5px; cursor: pointer;}
</style>
</head>
<body>
<h1>Experiment 4: DOM Manipulation</h1>
<div id="box">
<h2 id="title">Original Title</h2>
<p id="desc">This text will change when you click buttons.</p>
<button onclick="changeText()">Change Text</button>
<button onclick="changeStyle()">Change Style</button>
<button onclick="resetAll()">Reset</button>
</div>
<script>
function changeText(){
[Link]("title").innerText = "Title Updated!";
[Link]("desc").innerText = "DOM text updated successfully.";
}
function changeStyle(){
const box = [Link]("box");
[Link] = "#e6fffa";
[Link] = "#00897b";
[Link] = "scale(1.02)";
}
function resetAll(){
[Link]("title").innerText = "Original Title";
[Link]("desc").innerText = "This text will change when you click buttons.";
const box = [Link]("box");
[Link] = "white";
[Link] = "#444";
[Link] = "scale(1)";
}
</script>
</body>
</html>
5. Use jQuery to handle user events and manipulate HTML elements. Work
with JSON data and apply ES6 features.
Experiment 5 :- Create a file exp5_jquery_es6.html and write below code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Experiment 5 - jQuery + JSON + ES6</title>
<script src="[Link]
<style>
body{font-family: Arial; margin: 20px;}
.card{border:1px solid #ddd; padding:12px; border-radius:8px; margin-top:10px; max-width:650px;}
button{padding:10px 15px; cursor:pointer;}
ul{margin-top:10px;}
</style>
</head>
<body>
<h1>Experiment 5: jQuery + JSON + ES6</h1>
<button id="loadBtn">Load Students (JSON)</button>
<button id="clearBtn">Clear</button>
<div class="card">
<b>Output:</b>
<ul id="list"></ul>
</div>
<script>
const students = [
{ id: 1, name: "Deepak", branch: "CSE" },
{ id: 2, name: "Ravi", branch: "IT" },
{ id: 3, name: "Neha", branch: "ECE" }
];
$("#loadBtn").on("click", () => {
$("#list").empty();
const items = [Link](s =>
`<li><b>${[Link]}</b> - ${[Link]} (ID: ${[Link]})</li>`
);
$("#list").append([Link](""));
});
$("#clearBtn").on("click", () => {
$("#list").html("");
});
$(document).on("mouseenter", "li", function(){
$(this).css("background","#f2f2f2");
}).on("mouseleave", "li", function(){
$(this).css("background","transparent");
});
</script>
</body>
</html>