Front End Development
Journal Programs
1. Design a html page to display an history of Shivaji University using various text
formatting tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shivaji University History</title>
</head>
<body>
<h1><u>History of Shivaji University</u></h1>
<p><b>Shivaji University</b>, established in 1962, is in Kolhapur, Maharashtra.
The university is named after the great Maratha warrior and founder of the Maratha
Empire, <i>Chhatrapati Shivaji Maharaj</i>.</p>
<p>Over the years, the university has grown rapidly and now offers
<b>graduate</b> and <i>postgraduate</i> courses in a wide range of subjects.</p>
<blockquote>
"Empowering Through Knowledge"
</blockquote>
<p><small>For more details, visit <a href="http://www.unishivaji.ac.in"
target="_blank">Shivaji University Official Website</a>.</small></p>
</body>
</html>
2. Write HTML code to design complex nested list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Nested List</title>
</head>
<body>
<h1>Nested List Example</h1>
<ul>
<li>Fruits
<ul>
<li>Citrus
<ul>
<li>Orange</li>
<li>Lemon</li>
</ul>
</li>
<li>Berries
<ul>
<li>Strawberry</li>
<li>Blueberry</li>
</ul>
</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Leafy Greens
<ul>
<li>Spinach</li>
<li>Lettuce</li>
</ul>
</li>
<li>Root Vegetables
<ul>
<li>Carrot</li>
<li>Potato</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
3. Write HTML Code design Time Table using rowspan and colspan
<!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>
</head>
<body>
<h1>Class Time Table</h1>
<table border="1">
<tr>
<th>Day</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th colspan="2">11:00 - 1:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td rowspan="2">English</td>
<td>Science</td>
<td>Lab</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td colspan="2">Sports</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan="2">Workshop</td>
<td>History</td>
<td>Library</td>
</tr>
</table>
</body>
</html>
4. Write HTML page to display Tourist Spots of Kolhapur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tourist Spots of Kolhapur</title>
</head>
<body>
<h1>Famous Tourist Spots in Kolhapur</h1>
<ul>
<li><b>Mahalakshmi Temple</b> - A famous Hindu temple dedicated to
Goddess Mahalakshmi.</li>
<li><b>Rankala Lake</b> - A beautiful lake perfect for relaxation and
boating.</li>
<li><b>Panhala Fort</b> - Historical fort offering scenic views and a glimpse
into Maratha history.</li>
<li><b>New Palace</b> - A historical palace showcasing the royal family of
Kolhapur.</li>
<li><b>Khasbag Maidan</b> - Famous for traditional wrestling
competitions.</li>
</ul>
</body>
</html>
5. Create a web page to get and display student information such as Name, Email, Phone
No, Class, Skill set, Blood group, image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information</title>
</head>
<body>
<h1>Student Information Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">Phone No:</label>
<input type="tel" id="phone" name="phone"><br><br>
<label for="class">Class:</label>
<input type="text" id="class" name="class"><br><br>
<label for="skills">Skill Set:</label>
<input type="text" id="skills" name="skills"><br><br>
<label for="blood-group">Blood Group:</label>
<input type="text" id="blood-group" name="blood-group"><br><br>
<label for="image">Upload Image:</label>
<input type="file" id="image" name="image"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
6. Demonstrate types of CSS using appropriate examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color:blue;">This is a Heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
p{
color: orange;
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
/* File: styles.css */
h1 {
color: purple;
p{
color: gray;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
7. Design your personal website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Website</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
section {
padding: 20px;
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
</style>
</head>
<body>
<header>
<h1>Welcome to My Personal Website</h1>
</header>
<section>
<h2>About Me</h2>
<p>Hello, I am [Your Name], a passionate web developer with skills in HTML,
CSS, and JavaScript. I love building creative and responsive websites.</p>
<h2>Portfolio</h2>
<p>Check out my work: <a href="#">Portfolio Link</a></p>
<h2>Contact Me</h2>
<p>Email: [Your Email]</p>
</section>
<footer>
<p>© 2024 [Your Name]. All rights reserved.</p>
</footer>
</body>
</html>
8. Write a JavaScript to accept and display the values
<!DOCTYPE html>
<html>
<head>
<title>Display Values</title>
</head>
<body>
<h2>Enter Your Details</h2>
Name: <input type="text" id="name"><br><br>
<button onclick="display()">Submit</button>
<p id="output"></p>
<script>
function display() {
var name = document.getElementById("name").value;
document.getElementById("output").innerHTML = "Hello, " + name;
</script>
</body>
</html>
9. Write a JavaScript to demonstrate various dialogue boxes
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('This is an alert box!')">Alert</button>
<button onclick="confirm('Do you confirm this?')">Confirm</button>
<button onclick="prompt('What is your name?')">Prompt</button>
</body>
</html>
10. Write JavaScript to demonstrate function
<!DOCTYPE html>
<html>
<body>
<h2>Function Demo</h2>
<button onclick="greet()">Click Me</button>
<script>
function greet() {
alert("Hello from the function!");
</script>
</body>
</html>
11. Write a JavaScript to demonstrate an array
<!DOCTYPE html>
<html>
<body>
<h2>Array Demo</h2>
<button onclick="showArray()">Show Array</button>
<p id="output"></p>
<script>
var fruits = ["Apple", "Banana", "Cherry"];
function showArray() {
document.getElementById("output").innerHTML = fruits.join(", ");
</script>
</body>
</html>
12. Write a JavaScript to demonstrate switch statement
<!DOCTYPE html>
<html>
<body>
<h2>Switch Demo</h2>
<button onclick="checkDay()">Check Day</button>
<p id="output"></p>
<script>
function checkDay() {
var day = new Date().getDay();
var text;
switch(day) {
case 0: text = "Sunday"; break;
case 1: text = "Monday"; break;
default: text = "Another day!";
document.getElementById("output").innerHTML = text;
</script>
</body>
</html>
13. Write a JavaScript to demonstrate for loop
<!DOCTYPE html>
<html>
<body>
<h2>For Loop Demo</h2>
<p id="output"></p>
<script>
var text = "";
for (var i = 0; i < 5; i++) {
text += "Number " + i + "<br>";
document.getElementById("output").innerHTML = text;
</script>
</body>
</html>
14. Write a JavaScript to demonstrate while loop
<!DOCTYPE html>
<html>
<body>
<h2>While Loop Demo</h2>
<p id="output"></p>
<script>
var i = 0, text = "";
while (i < 5) {
text += "Number " + i + "<br>";
i++;
document.getElementById("output").innerHTML = text;
</script>
</body>
</html>
15. Write a JavaScript to demonstrate break and continue
<!DOCTYPE html>
<html>
<body>
<h2>Break and Continue Demo</h2>
<p id="output"></p>
<script>
var text = "";
for (var i = 0; i < 5; i++) {
if (i === 3) { continue; }
if (i === 4) { break; }
text += "Number " + i + "<br>";
document.getElementById("output").innerHTML = text;
</script>
</body>
</html>
16. Write NodeJS program to display "Hello World"
console.log("Hello World");
17. Write NodeJS program to perform various arithmetic operations
var a = 10, b = 5;
console.log("Sum: " + (a + b));
console.log("Difference: " + (a - b));
console.log("Product: " + (a * b));
console.log("Quotient: " + (a / b));
18. Write NodeJS program to create server
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8080);
19. Write NodeJS program to demonstrate Synchronous programming
var fs = require('fs');
var data = fs.readFileSync('example.txt', 'utf8');
console.log(data);
console.log("File read complete");
20. Write NodeJS program to demonstrate Asynchronous programming using promise
let promise = new Promise((resolve, reject) => {
let success = true; // simulate success or failure
if (success) {
resolve("Operation Successful");
} else {
reject("Operation Failed");
});
promise.then((message) => {
console.log(message);
}).catch((error) => {
console.log(error);
});
