Scribd
Upload
28 views15 pages

Front End Development Assignment 1-20 Q

Uploaded by

rwlrajat
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
28 views15 pages

Front End Development Assignment 1-20 Q

Uploaded by

rwlrajat
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/ 15

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>&copy; 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);

});

You might also like