Project Web Design Assignment
Assignment-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Information Form</title>
</head>
<body>
<div style="width:30%; margin: auto;">
<form action="#" method="POST">
<fieldset>
<legend>Employee Details</legend>
<!-- Name Field -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<!-- District Field -->
<label for="district">District:</label>
<input type="text" id="district" name="district" required><br><br>
<!-- Gender Field -->
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<!-- Employee ID Field -->
<label for="empid">Employee ID:</label>
<input type="text" id="empid" name="empid" required><br><br>
<!-- Designation Field -->
<label for="designation">Designation:</label>
<input type="text" id="designation" name="designation" required><br><br>
<!-- Phone Number Field -->
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<!-- Date of Birth Field -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
</body>
</html>
Assignment -4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.buttonclass{
background-color: dodgerblue;
width: 80px;
height: 40px;
font-size: 20px;
border-radius: 10%;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
.buttonclass:hover{
background-color: white;
color: red;
}
td{
padding: 5px;
}
input{
font-size: 16px;
}
</style>
</head>
<body>
<h1 style="color: red; text-align: center;">Welcome to My website</h1>
<h3>Department list : </h3>
<ul style="font-size: 20px;">
<li>CSE</li>
<li>EEE</li>
<li>Mathmetics</li>
<li>English</li>
<li>Bangle</li>
</ul>
<form action="#" method="POST">
<fieldset>
<legend>Login Form: </legend>
<table>
<tr>
<!-- Mail ID Field -->
<td>Mail ID</td>
<td>: <input type="email" id="mailid" name="mailid" required></td>
</tr>
<tr>
<td>Password</td>
<td>: <input type="password" id="Password" name="Password" required></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" class="buttonclass"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Bootstrap Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<!--https://getbootstrap.com/docs/4.0/components/navs/-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav" style="background-color:lightgray;">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home Page Content -->
<div class="container mt-5">
<h1>Welcome to Our Website</h1>
<p>This is the homepage of the website. Use the navigation above to explore more.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
contact.html,about.html and login.htmlnow copy index.html page and edit to create another page
Assignment -6
Part-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Current Date</title>
<script>
function showDate() {
// Create a new Date object to get the current date
const currentDate = new Date();
// Get day, month, and year from the Date object
const day = String(currentDate.getDate()).padStart(2, '0'); // Add leading zero if day is single digit
const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Add leading zero if month is single digit
const year = currentDate.getFullYear();
// Format the date as day/month/year (e.g., "21/03/2025")
const formattedDate = `${day}/${month}/${year}`;
// Display the formatted date in the "dateDisplay" element
document.getElementById("dateDisplay").innerHTML = "Date: "+formattedDate;
}
</script>
</head>
<body>
<h1>Click the button to see the current date</h1>
<!-- Button to trigger showDate function -->
<button onclick="showDate()">Show Current Date</button>
<p id="dateDisplay"></p> <!-- This will display the current date -->
</body>
</html>
Assignment -6
Part-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-scale=1.0">
<title>Show Full Name</title>
<script>
function showFullName() {
// Get values from input fields
const firstName = document.getElementById("firstName").value;
const lastName = document.getElementById("lastName").value;
// Combine first name and last name
const fullName = firstName + " " + lastName;
// Display the full name in the "fullNameDisplay" element
document.getElementById("fullNameDisplay").innerHTML = "Full Name: " + fullName;
}
</script>
</head>
<body>
<h1>Enter Your First and Last Name</h1>
<!-- Input fields for first name and last name -->
<input type="text" id="firstName" placeholder="First Name"><br><br>
<input type="text" id="lastName" placeholder="Last Name"><br><br>
<!-- Button to show the full name -->
<button onclick="showFullName()">Show Full Name</button>
<!-- Display the full name -->
<p id="fullNameDisplay"></p>
</body>
</html>
Assignment -6
Part-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of Even Numbers</title>
<script>
function sumEvenNumbers() {
let sum = 0;
// Loop through numbers from 1 to 100
for (let i = 2; i <= 100; i += 2) {
sum += i; // Add even number to the sum
}
// Display the result
document.getElementById("result").innerHTML = "Sum of even numbers from 1 to 100 is: " + sum;
}
</script>
</head>
<body>
<h1>Sum of Even Numbers from 1 to 100</h1>
<!-- Button to trigger sum calculation -->
<button onclick="sumEvenNumbers()">Calculate Sum</button>
<!-- Display the result -->
<p id="result"></p>
</body>
</html>
Comments
Post a Comment