ASSIGNMENT
SEC – FRONT-END WEB DEVELOPMENT
NAME – KARTIKAY
ROLL NO. - 231118
COURSE – B.Sc. PHYSICAL SCIENCE
1. Create an HTML document with following formatting – Bold, Italics, Underline, Colors,
Headings, Title, Font and Font width , Background, Paragraph, Line brakes, Horizontal line,
Blinking text as well as marquee text .
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatted HTML Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
padding: 20px;
}
h1 {
color: #008080;
font-size: 24px;
font-weight: bold;
}
h2 {
color: #800080;
font-size: 20px;
font-weight: bold;
}
p{
margin-bottom: 15px;
}
.underline {
text-decoration: underline;
}
.italic {
font-style: italic;
}
.bold {
font-weight: bold;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
.blinking-text {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1>Formatted HTML Document</h1>
<p class="bold">This is a paragraph with <span class="underline">underlined</span> and <span
class="italic">italic</span> text.</p>
<p class="red-text">This is a paragraph with <span class="bold">bold</span> and <span
class="green-text">colored</span> text.</p>
<h2>Text Formatting Examples:</h2>
<p>This is a <span style="color: blue;">blue</span> text.</p>
<p>This is a <span style="font-family: 'Courier New', monospace;">Courier New</span> font
text.</p>
<p style="font-size: 18px;">This is a text with font size 18px.</p>
<p style="font-weight: 600;">This is a text with font weight 600.</p>
<p>This is a paragraph with a <br> line break.</p>
<hr>
<p>This is a paragraph above a horizontal line.</p>
<hr>
<p>This is a paragraph with <span class="blinking-text">blinking</span> text.</p>
<marquee>This is a marquee text.</marquee>
</body>
</html>
OUTPUT :
2. Create an HTML document with Ordered and Unordered lists, Inserting Images, Internal
and External linking.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists, Images, and Links</title>
</head>
<body>
<h1>Lists, Images, and Links</h1>
<h2>Ordered List:</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Unordered List:</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
<h2>Inserting Images:</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgY6sVomSH3JO1S-
sF9tdio8V5v88BylecszQx7D7Pzg&s" width="200" alt="img">
<h2>Internal Link:</h2>
<p>This is an <a href="#internal-section">internal link</a> to a section below.</p>
<h2>External Link:</h2>
<p>This is an <a href="https://www.instagram.com" target="_blank">instagram</a> to
Example.com.</p>
<h2 id="internal-section">Internal Section</h2>
<p>This is a section that can be linked internally.</p>
</body>
</html>
OUTPUT :
3. Create an HTML document for displaying the current semester's timetable.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Semester Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Current Semester Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>Time</th>
<th>Course</th>
<th>Room</th>
</tr>
<tr>
<td>Monday</td>
<td>9:00 AM - 11:00 AM</td>
<td>Mathematics</td>
<td>Room 101</td>
</tr>
<tr>
<td>Tuesday</td>
<td>10:00 AM - 12:00 PM</td>
<td>Physics</td>
<td>Room 203</td>
</tr>
<tr>
<td>Wednesday</td>
<td>1:00 PM - 3:00 PM</td>
<td>Computer Science</td>
<td>Room 305</td>
</tr>
<tr>
<td>Thursday</td>
<td>11:00 AM - 1:00 PM</td>
<td>Chemistry</td>
<td>Room 202</td>
</tr>
<tr>
<td>Friday</td>
<td>8:00 AM - 10:00 AM</td>
<td>English Literature</td>
<td>Room 104</td>
</tr>
</table>
</body>
</html>
OUTPUT :
4. Create a website with horizontal and vertical frames. Top horizontal frame needs to
show your college's name and logo. Bottom horizontal frame is to be split into two vertical
frames. The left frame has hyperlinks to pages related to faculty, courses, student activities,
etc. The right frame shows the corresponding webpage based on the link clicked on the left
frame.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Website</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#top-frame {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
#left-frame {
width: 200px;
height: calc(100% - 100px);
background-color: #f0f0f0;
float: left;
}
#right-frame {
height: calc(100% - 100px);
margin-left: 200px;
}
#left-menu {
padding: 20px;
}
#right-content {
padding: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="top-frame">
<h1>College Name</h1>
<img src="college_logo.png" alt="College Logo" width="100">
</div>
<div id="left-frame">
<ul id="left-menu">
<li><a href="faculty.html" target="right-frame">Faculty</a></li>
<li><a href="courses.html" target="right-frame">Courses</a></li>
<li><a href="student_activities.html" target="right-frame">Student Activities</a></li>
<!-- Add more links as needed -->
</ul>
</div>
<div id="right-frame">
<iframe name="right-frame" id="right-content" src="default.html"></iframe>
</div>
</body>
</html>
OUTPUT :
5. Create a student registration form using HTML which has the following controls and
make an interactive content presentation using CSS.:
1. Text Box buttons 2. Dropdown box 3. Option/radio 4. check boxes
5. Rset and submit buttons
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label>Interests:</label>
<input type="checkbox" id="football" name="interests" value="football">
<label for="football">Football</label>
<input type="checkbox" id="basketball" name="interests" value="basketball">
<label for="basketball">Basketball</label>
<input type="checkbox" id="programming" name="interests" value="programming">
<label for="programming">Programming</label>
<label for="degree">Degree:</label>
<input type="radio" id="bachelors" name="degree" value="bachelors" required>
<label for="bachelors">Bachelor's</label>
<input type="radio" id="masters" name="degree" value="masters">
<label for="masters">Master's</label>
<input type="radio" id="phd" name="degree" value="phd">
<label for="phd">PhD</label>
<div class="buttons">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
CSS -
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
width: 400px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
}
.buttons {
margin-top: 20px;
}
input[type="reset"],
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: #45a049;
}
OUTPUT :
6. Create a webpage for your department with a drop-down navigation menu for faculty,
courses, activities, etc.. Implement the webpage using styles, rules, selectors etc. learned in
CSS.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department Website</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<header>
<h1>Department of KESHAV MAHAVIDYALAYA</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Faculty</a></li>
<li class="dropdown">
<a href="#">Courses</a>
<ul class="dropdown-content">
<li><a href="#">Undergraduate</a></li>
<li><a href="#">Graduate</a></li>
</ul>
</li>
<li><a href="#">Activities</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<!-- Content of the webpage goes here -->
<p>Welcome to the Department of KESHAV MAHAVIDYALAYA. We offer a wide range of
courses...</p>
</div>
<footer>
<p>© 2024 Department of [Your Department Name]</p>
</footer>
</body>
</html>
CSS -
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
nav ul li a:hover {
background-color: #555;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
z-index: 1;
}
.dropdown-content li {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
OUTPUT :
7.
Write event-driven programs in JavaScript for the following:
- Enter a number and on click of a button print its multiplication table.
Ans.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<input type="number" id="numberInput">
<button onclick="printTable()">Print Multiplication Table</button>
<div id="tableOutput"></div>
<script>
function printTable() {
var number = parseInt(document.getElementById('numberInput').value);
var table = '';
for (var i = 1; i <= 10; i++) {
table += number + ' x ' + i + ' = ' + (number * i) + '<br>';
}
document.getElementById('tableOutput').innerHTML = table;
}
</script>
</body>
</html>
OUTPUT :
- Print the largest of three numbers entered by the user.
Ans.
<!DOCTYPE html>
<html>
<head>
<title>Largest of Three Numbers</title>
</head>
<body>
<input type="number" id="num1">
<input type="number" id="num2">
<input type="number" id="num3">
<button onclick="findLargest()">Find Largest</button>
<div id="largestOutput"></div>
<script>
function findLargest() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);
var largest = Math.max(num1, num2, num3);
document.getElementById('largestOutput').innerHTML = 'Largest Number: ' + largest;
}
</script>
</body>
</html>
OUTPUT :
- Find the factorial of a number entered by the user.
Ans.
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<input type="number" id="factorialInput">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<div id="factorialOutput"></div>
<script>
function calculateFactorial() {
var num = parseInt(document.getElementById('factorialInput').value);
var factorial = 1;
for (var i = 2; i <= num; i++) {
factorial *= i;
}
document.getElementById('factorialOutput').innerHTML = 'Factorial: ' + factorial;
}
</script>
</body>
</html>
OUTPUT :
- Enter a list of positive numbers using the prompt terminated by a zero. Find the sum and
average of these numbers.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum and Average Calculator</title>
</head>
<body>
<h2>Enter numbers separated by commas:</h2>
<input type="text" id="numbersInput">
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function calculate() {
var numbersInput = document.getElementById('numbersInput').value;
// Splitting the input string into an array of numbers
var numbersArray = numbersInput.split(',').map(Number);
// Calculating the sum of the numbers
var sum = 0;
for (var i = 0; i < numbersArray.length; i++) {
sum += numbersArray[i];
}
// Calculating the average of the numbers
var average = sum / numbersArray.length;
// Displaying the sum and average
var result = document.getElementById('result');
result.innerHTML = "Sum: " + sum + "<br>Average: " + average;
}
</script>
</body>
</html>
OUTPUT :
8. Create a student registration form using text, radio button, check box, drop down
box, text field and all other required HTML elements. Customize the CSS and
javascript to input and validate all data. Create functions to perform validation of
each element, example:
a. Roll number is a 7-digit numeric value
b. Name should be an alphabetical value (String)
c. Non-empty and valid fields like DOB
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="rollNumber">Roll Number:</label>
<input type="text" id="rollNumber" name="rollNumber">
<span id="rollError" class="error"></span><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span><br><br>
<label for="gender">Gender:</label>
<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><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<span id="dobError" class="error"></span><br><br>
<label for="courses">Select Courses:</label>
<select id="courses" name="courses">
<option value="Maths">Maths</option>
<option value="Science">Science</option>
<option value="English">English</option>
<option value="History">History</option>
</select><br><br>
<label for="interests">Interests:</label>
<input type="checkbox" id="sports" name="interests" value="Sports"> <label
for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="Music"> <label
for="music">Music</label><br><br>
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
CSS -
body {
font-family: Arial, sans-serif;
}
.container {
width: 50%;
margin: auto;
}
h2 {
text-align: center;
}
form {
border: 1px solid #ccc;
padding: 20px;
}
label {
display: inline-block;
width: 120px;
}
input[type="text"],
input[type="date"],
select {
width: 250px;
padding: 5px;
margin-bottom: 10px;
}
.error {
color: red;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
JAVASCRIPT -
function validateForm() {
var rollNumber = document.getElementById('rollNumber').value;
var name = document.getElementById('name').value;
var dob = document.getElementById('dob').value;
var gender = document.querySelector('input[name="gender"]:checked');
var courses = document.getElementById('courses').value;
var interests = document.querySelectorAll('input[name="interests"]:checked');
var isValid = true;
// Roll Number validation
if (!(/^\d{7}$/.test(rollNumber))) {
document.getElementById('rollError').innerText = "Invalid Roll Number (7 digits required)";
isValid = false;
} else {
document.getElementById('rollError').innerText = "";
}
// Name validation
if (!/^[A-Za-z\s]+$/.test(name)) {
document.getElementById('nameError').innerText = "Invalid Name (Alphabets only)";
isValid = false;
} else {
document.getElementById('nameError').innerText = "";
}
// Date of Birth validation
if (!dob) {
document.getElementById('dobError').innerText = "Date of Birth is required";
isValid = false;
} else {
document.getElementById('dobError').innerText = "";
}
return isValid;
}
OUTPUT :
