Program no:2 Dynamic Website Development
Aim: 2. (a) Develop Dynamic web content using javascript.
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} .main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
} .main h2 {
color: #4caf50;
margin-bottom: 20px;
} label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
} input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
} button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
} </style>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required />
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long" required />
<label for="repassword">Re-type Password:</label>
<input type="password" id="repassword" name="repassword" required />
<label for="mobile">Contact:</label>
<input type="text" id="mobile" name="mobile" maxlength="10" required />
<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> <button type="submit"> Submit </button>
</form> </div>
</body>
</html>
Aim: 2.(b) Develop a student registration form with validation support using javascript.
Source code: Registration.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Validation in JS</title>
<style> .error {
color: red;
}
.valid {
color: green;
}
</style>
</head>
<body>
<form action="processor.html" method="get" id="frmstudentregistration"
name="frmregistration" onsubmit="return validate()" onreset="resetForm()">
<!-- Student Name -->
<label for="txtstudentname">Student name:</label><br/>
<input type="text" placeholder="Enter your name" id="txtstudentname"
name="txtstudentname"/>
<span id="spnISstudentnamevalid"></span><br/><br/>
<!-- Password -->
<label for="txtpassword">Password:</label><br/>
<input type="password" placeholder="Enter your password" id="txtpassword"
name="txtpassword"/>
<span id="spnISpasswordvalid"></span><br/><br/>
<!-- Email -->
<label for="txtemail">Email:</label><br/>
<input type="email" placeholder="Enter your email" id="txtemail" name="txtemail"/>
<span id="spnISemailvalid"></span><br/><br/>
<!-- Gender -->
<label>Gender:</label><br/>
<input type="radio" id="genderMale" name="gender" value="Male"> Male
<input type="radio" id="genderFemale" name="gender" value="Female"> Female
<input type="radio" id="genderOther" name="gender" value="Other"> Other
<span id="spnISgendervalid"></span><br/><br/>
<!-- Submit and Reset Buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script type="text/javascript">
function validate() {
var isFormValid = true;
// Validate Student Name
var studentName = document.getElementById("txtstudentname").value;
if (studentName == "") {
isFormValid = false;
document.getElementById("spnISstudentnamevalid").innerHTML = "Please enter your
name.";
document.getElementById("spnISstudentnamevalid").className = "error";
} else {
document.getElementById("spnISstudentnamevalid").innerHTML = "Valid";
document.getElementById("spnISstudentnamevalid").className = "valid";
}
// Validate Password
var password = document.getElementById("txtpassword").value;
if (password.length < 6) {
isFormValid = false;
document.getElementById("spnISpasswordvalid").innerHTML = "Password must be at
least 6 characters.";
document.getElementById("spnISpasswordvalid").className = "error";
} else {
document.getElementById("spnISpasswordvalid").innerHTML = "Valid";
document.getElementById("spnISpasswordvalid").className = "valid";
}
// Validate Email
var email = document.getElementById("txtemail").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
isFormValid = false;
document.getElementById("spnISemailvalid").innerHTML = "Please enter a valid
email.";
document.getElementById("spnISemailvalid").className = "error";
} else {
document.getElementById("spnISemailvalid").innerHTML = "Valid";
document.getElementById("spnISemailvalid").className = "valid";
}
// Validate Gender
var genderMale = document.getElementById("genderMale").checked;
var genderFemale = document.getElementById("genderFemale").checked;
var genderOther = document.getElementById("genderOther").checked;
if (!genderMale && !genderFemale && !genderOther) {
isFormValid = false;
document.getElementById("spnISgendervalid").innerHTML = "Please select a
gender.";
document.getElementById("spnISgendervalid").className = "error";
} else {
document.getElementById("spnISgendervalid").innerHTML = "Valid";
document.getElementById("spnISgendervalid").className = "valid";
} return isFormValid;
} function resetForm() {
document.getElementById("spnISstudentnamevalid").innerHTML = "";
document.getElementById("spnISpasswordvalid").innerHTML = "";
document.getElementById("spnISemailvalid").innerHTML = "";
document.getElementById("spnISgendervalid").innerHTML = "";
} </script>
</body></html>
Processor.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Processor Page</title>
</head>
<body>
<h2>Form Data Received:</h2>
<script type="text/javascript">
// Get query string from the URL
var queryString = window.location.search;
// Parse the query string parameters
var queryStringParams = new URLSearchParams(queryString);
// Get individual form data from the query string
var studentName = queryStringParams.get("txtstudentname");
var password = queryStringParams.get("txtpassword"); // Avoid showing passwords in
production
var email = queryStringParams.get("txtemail");
var gender = queryStringParams.get("gender");
// Display the form data on the page
document.write("<p>Student name: " + studentName + "</p>");
document.write("<p>Password: " + password + "</p>"); // This should be avoided or
masked in real applications
document.write("<p>Email: " + email + "</p>");
document.write("<p>Gender: " + gender + "</p>");
</script></body></html>
Aim: 2.(c) Develop a Dynamic website using Event Handling.
Source code for display Event Date:
<html>
<body>
<script> function display()
{
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"
/"+month+"/"+year;
}
</script>
<form> <input type="text" id="dis" />
<br />
<input type="button" value="Display Date"
onclick="display()" />
</form>
</body>
</html>
Source code for Event Click:
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"
style="margin-left: 50%;">
Click me event
</button>
</body>
