LAB FAT
CSE-3002 (Internet and Web Programming)
Lab Slot – L71+L72+L87+L88
Date – 03.05.2024
Q.Develop a web application that takes a name as input, displays a personalized greeting page
with the name, shows the start time at the top right corner, and provides a logout button.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Name</title>
</head>
<body>
<h1>Hello. What is your name?</h1>
<input id="userInput"> <br> <br>
<button onclick="myFunction()" > Submit </button>
<h1 id="message"> </h1>
<style>
body {background-color: darkslategray; text-align: center; color: floralwhite;}
</style>
<script>
function myFunction() {
let userInput = document.querySelector("#userInput");
let message = document.querySelector("#message");
message.innerHTML = "Welcome to my webpage " + userInput.value;
}
</script>
</body>
</html>
Output :
Q.
Code :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Password Validation Form using javaScript</title>
</head>
<body>
<div class="container">
<h3>Password Validation Form</h3>
<form action="#">
<label for="password">Password</label>
<input type="password"
id="password"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number,
one uppercase and lowercase letter, and at least 8 characters"
required>
<div id="password-message">
<h3>Password must contain:</h3>
<p class="password-message-item invalid">At least
<b>one lowercase letter</b>
</p>
<p class="password-message-item invalid">At least
<b>one uppercase letter</b>
</p>
<p class="password-message-item invalid">At least
<b>one number</b>
</p>
<p class="password-message-item invalid">Minimum
<b>8 characters</b>
</p>
</div>
<input type="submit" value="Submit">
</form>
</div>
<script src="script.js"></script>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Styling the container */
.container {
margin: 0 auto;
padding: 20px;
max-width: 400px;
background-color: #ffffff;
}
/* Style all input fields */
input {
width: 100%;
padding: 12px;
margin: 6px 0 16px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Style the submit button */
input[type=submit] {
background-color: #0f0fe9;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #4141fc;
}
/* The message box */
#password-message {
display: none;
background: #ffffff;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
text-align: left;
}
#password-message h3 {
font-size: 15px;
margin-top: 0;
text-transform: uppercase;
}
#password-message p {
margin: 8px 0;
}
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "";
}
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "";
}
/* Error message style */
.error-msg {
color: red;
font-size: 14px;
margin-top: 4px;
}
JS :
var passwordInput = document.getElementById("password");
var passwordMessageItems = document.getElementsByClassName("password-message-item");
var passwordMessage = document.getElementById("password-message");
passwordInput.onfocus = function () {
passwordMessage.style.display = "block";
}
// After clicking outside of password input hide the message
passwordInput.onblur = function () {
passwordMessage.style.display = "none";
}
passwordInput.onkeyup = function () {
// checking uppercase letters
let uppercaseRegex = /[A-Z]/g;
if (passwordInput.value.match(uppercaseRegex)) {
passwordMessageItems[1].classList.remove("invalid");
passwordMessageItems[1].classList.add("valid");
} else {
passwordMessageItems[1].classList.remove("valid");
passwordMessageItems[1].classList.add("invalid");
}
// checking lowercase letters
let lowercaseRegex = /[a-z]/g;
if (passwordInput.value.match(lowercaseRegex)) {
passwordMessageItems[0].classList.remove("invalid");
passwordMessageItems[0].classList.add("valid");
} else {
passwordMessageItems[0].classList.remove("valid");
passwordMessageItems[0].classList.add("invalid");
}
// checking the number
let numbersRegex = /[0-9]/g;
if (passwordInput.value.match(numbersRegex)) {
passwordMessageItems[2].classList.remove("invalid");
passwordMessageItems[2].classList.add("valid");
} else {
passwordMessageItems[2].classList.remove("valid");
passwordMessageItems[2].classList.add("invalid");
}
// Checking length of the password
if (passwordInput.value.length >= 8) {
passwordMessageItems[3].classList.remove("invalid");
passwordMessageItems[3].classList.add("valid");
} else {
passwordMessageItems[3].classList.remove("valid");
passwordMessageItems[3].classList.add("invalid");
}
}
Output :
