HTML Css File

1. Design a web page to validate credit card number according to the below speciticatio.
Following tables outlines the major credit cards you might want to validate, along with
tneir allowed prefixes and lengths.
<html>
<head>
<script>
function validateCard() {
var card_no = document.getElementById("card_no").value;
var card = document.getElementById("card").value;
if (card == "mastercard" && card_no[0] == "5" && card_no[1] <= "5" &&
card_no.length == 16) {
alert("valid");
} else if (card == "Visa" && card_no[0] == "4" && card_no.length >= 13 &&
card_no.length <= 16) {
alert("valid");
} else if (card == "American Express" && card_no[0] == "3" && card_no[1] >= "4"
&& card_no[1] <= "7" && card_no.length == 15) {
alert("valid");
} else {
alert("error!");
}
}
</script>
</head>
<body>
<h3>Enter your card details</h3>
<form method="POST">
<input type="hidden" name="_method" value="POST">
<select name="card" id="card">
<option value="mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="American Express">American Express</option>
</select>
<br>
<input type="text" placeholder="Ex. 5555555555554444" name="card_no" id="card_no"
required>
<br>
<input type="button" value="Submit" onclick="validateCard()">
</form>
</body>
</html>
2. Write a java script to validate the following fields in a registration page: Name
(should contains alphabets and the length should not be less than 6 characters)
Password(should not be less than 6 characters) 3. E-mail(should not contain invalid
addresses)
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function validateRegistration() {
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
// Validate Name
if (name.length < 6 || !/^[A-Za-z]+$/.test(name)) {
alert("Invalid name. Must contain alphabets and be at least 6 characters long.");
return false;
}
// Validate Password
if (password.length < 6) {
alert("Invalid password. Must be at least 6 characters long.");
return false;
}
// Validate Email
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert("Invalid email.");
return false;
}
// All fields are valid

alert("Registration successful.");
return false;
}
</script>
</head>
<body>
<h3>Registration Form</h3>
<form onsubmit="return validateRegistration()" method="post">
<input type="text" id="name" name="name" placeholder="Name" required>
<br>
<input type="password" id="password" name="password" placeholder="Password"
required>
<br>
<input type="email" id="email" name="email" placeholder="Email" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. Write a java script program to "Wish a user " at different hours of a day
<!DOCTYPE html>
<html>
<head>
<title>Greetings Example</title>
<script>
function greetUser() {
// Get the current hour of the day
var currentHour = new Date().getHours();
// Define the greetings based on the time of the day

var greeting;
if (currentHour >= 5 && currentHour <= 11) {
greeting = "Good morning!";
} else if (currentHour >= 12 && currentHour <= 17) {
greeting = "Good afternoon!";
} else if (currentHour >= 18 && currentHour <= 20) {
greeting = "Good evening!";
} else {
greeting = "Hello!";
}
// Display the greeting to the user

document.getElementById("greeting").innerHTML = greeting;
}
</script>
</head>
<body onload="greetUser()">
<h1 id="greeting"></h1>
</body>
</html>
4. Desigm a web page that self modifying itself after every one minute
<html>
<head>
</head>
<body>
<h1 id="time"></h1>
setInterval(function(){
var h1=document.getElementById("time");
var time=new Date();
var hour= time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
h1.innerHTML="Time"+hour+":"+min+":"+sec;},100
)
</script>
</body>
</html>
5. Write an code for web application, which accepts the birth date from the user in a
textboxx and display the day of the week in a message box on the click of a button.
<!DOCTYPE html>
<html>
<head>
<title>Check Day of Birth</title>
function checkDay() {
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'];
var dob = document.getElementById("dob").value;
var date = new Date(dob);
var dayOfWeek = daysOfWeek[date.getDay()];
document.getElementById("day").innerHTML = "Day of Birth: " + dayOfWeek;
return false; // Prevent form submission
}
</script>
</head>
<body>
<h2>Enter Your Date of Birth</h2>
<form onsubmit="return checkDay()">
<input type="date" id="dob" name="dob" placeholder="Date of Birth">
<input type="submit" value="Check">
</form>
<p id="day"></p>
</body>
</html>
6. Write a script that inputs a telephone number as a string in the form (555)555-555.
The script should digits of the phone numbers as a token. Display the area code in one
test field and the seven digit phone number in another text field.
<!DOCTYPE html>
<html>
<head>
<title>Extracting area code and phone number</title>
</head>
<body>
<label for="tel">Enter telephone number:</label>
<input type="text" id="tel" name="tel" placeholder="(XXX)XXX-XXXX"
pattern="$\d{3}$\d{3}-\d{4}" required>
<br>
<label for="area-code">Area code:</label>
<input type="text" id="area-code" name="area-code" readonly>
<br>
<label for="phone-number">Phone number:</label>
<input type="text" id="phone-number" name="phone-number" readonly>
<script>
// Get the input field
const telInput = document.getElementById("tel");
// Add an event listener to listen for changes in the input field

telInput.addEventListener("input", function() {
// Get the telephone number entered by the user
const tel = telInput.value;
// Extract the area code and phone number using regular expressions
const areaCode = tel.match(/$(\d{3})$\d{3}-\d{4}/)[1];
const phoneNumber = tel.match(/$\d{3}$(\d{3}-\d{4})/)[1];
// Set the values of the area code and phone number input fields
document.getElementById("area-code").value = areaCode;
document.getElementById("phone-number").value = phoneNumber;
});
</script>
</body>
</html>
7. Create a web page that applies the invert filter to an image if the user moves the
mouse over it.
<!DOCTYPE html>
<html>
<head>
<title>Invert filter on mouseover</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<h1>Invert filter on mouseover</h1>
<p>Move your mouse over the image below to see the invert filter in action:</p>
<img src="wall.jpeg" alt="Example image" id="my-image">
<script>
const img = document.getElementById('my-image');
img.addEventListener('mouseover', () => {
img.style.filter = 'invert(100%)';
});
img.addEventListener('mouseout', () => {
img.style.filter = 'none';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.tb button
{
color: aquamarine;
background-color: royalblue;
width: 100%;
}
.tb td
{
color: royalblue;
text-align: center;
}
</style>
</head>
<body>
<h1 id="h">click the select button according to city and car</h1>
<table border="1" class="tb">
<tr>
<td width="50px"></td>
<td id="MK">Maruti K-10</td>
<td id="ZA">zen Astelo</td>
<td id="Wa">Wagnor</td>
<td id="ms">Maruti Sx-4</td>
</tr>
<tr>
<td>Delhi</td>
<td><button value="00" onclick="add(this.value)" id="00">select</button></td>
</tr>
<tr>
<td>Mumbai</td>
<td><button value="10" onclick="add(this.value)"id="10">select</button></td>
</tr>
<tr>
<td>Chennai</td>
</tr>
<tr>
<td>Kolkata</td>
</tr>
</table>
<br>
<button onclick="show()"> show</button>
var mat = [[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]];
function add(str) {
let row = parseInt(str[0]);
let col = parseInt(str[1]);
mat[row][col] = mat[row][col] + 1;
document.getElementById("matrix").innerText = mat;
}
function show() {
const buttons = document.querySelectorAll('button');
// Disable all buttons

buttons.forEach(button => {
button.disabled = true;
}); h1=document.getElementById("h");
h1.innerHTML="no of each car model in each city";
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
let x = i + "" + j + "";
document.getElementById(x).innerHTML = mat[i][j];
}
}
}
</script>
</body>
</html>
1.Create a Login form having User-Id and Password fields. After submitting the form
match the user-id and password with existing user-id and password. If user-id and
password match a new welcome window should be appear.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1>Login Form</h1>
<form method="post" action="prog1.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sumit";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
$sql = "SELECT * FROM login WHERE username='$username' AND
password='$password
$result = $conn->query($sql)
if ($result->num_rows > 0) {
echo "Authentication successful!";
} else {
echo "Invalid username or password.";
}
}
$conn->close();?>
</body>
</html>
1. Create a PHP page to display all the records from PERS table that contain
Department Number(field name dno) similar to that of given in list lstdnogiven
in interface web browseer Screen.
<html>
<head>
<title>Employee Records</title>
</head>
<body>
<h3>Employee Records</h3>
<form method="post" action="prog2.php">
<label>Enter the department no(s) to show:</label>
<input type="text" name="dno_list">
<br>
<input type="submit" name="show" value="Show Records">
</form>
<br>
<h3> find a book</h3>
<form>
<input type="">
</form>
<?php
$username = "root";
$password = "";
$dbname = "sumit";
die("Connection failed: " . $conn->connect_error);
}
if(isset($_POST['show'])){
$dno_list = $_POST["dno_list"];
$dno_arr = explode(',', $dno_list);
$dno_clauses = array();
foreach ($dno_arr as $dno) {
$dno_clauses[] = "dno = '$dno'";
}
$dno_clause_str = implode(' OR ', $dno_clauses);
$sql="SELECT * FROM employdb WHERE $dno_clause_str";
$result=$conn->query($sql);
if($result->num_rows>0)
{
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["Name"]. " - Department No: " .
$row["dno"]. "<br>";
}
}
}
$conn->close();
?>
</body>
</html>
3. Write a PHP program to store page views count in SESSION, to increment the count
on each refresh, and to show the count on web page.
<?php
session_start();
if(isset($_SESSION['page_views'])) {
$_SESSION['page_views'] = $_SESSION['page_views'] + 1;
} else {
$_SESSION['page_views'] = 1;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Page Views Counter</title>
</head>
<body>
<h1>Welcome to my website</h1>
<?php
echo "<p>You have visited this page " . $_SESSION['page_views'] . " times.</p>";
?>
<p>Thanks for visiting!</p>
</body>
</html>
4.Write a PHP program to store current date-time in a COOKIE and display the
"Last visited on date-time on the web page upon reopening of the same page
<!DOCTYPE html>
<html>
<head>
<title>Last Visited Date-Time</title>
</head>
<body>
<h1>Welcome to our website</h1>
<p>
<?php
if(isset($_COOKIE['last_visit'])) {
$last_visit = $_COOKIE['last_visit'];
echo "Welcome back! You last visited on " . $last_visit;
} else {
echo "Welcome to our website!";
}
?></p>
<?php
// set the cookie
setcookie('last_visit', date('Y-m-d H:i:s'), time() + (86400 * 30), "/");
?>
</body>
</html>
5.Using PHP and MySQL, develop a program to accept book information viz. Accession
number, title, authors, edition and publisher from a web page and store the information
in a database and to search for a book with the title specified by the user and to display
the search results with proper headings.
<!DOCTYPE html>
<html>
<head>
<title>Library Management System</title>
<style>
h1,h3{
text-align: center;
}
form{
margin: auto 50px;
border: 2px solid black;
border-radius: 10px;
padding: 20px;
max-width: 500px;
}
input[type="text"]{
width: 80%;
padding: 10px;
margin: 10px;
border-radius: 5px;
font-size: 16px;
}
input[type="submit"]{
padding: 10px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover{
background-color: #3e8e41;
}
p{
font-size: 18px;
margin: 10px;
}
hr{
border: none;
border-top: 1px solid black;
margin: 10px 0;
}
table{
border-collapse: collapse;
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
th, td{
text-align: left;
padding: 8px;
}
th{
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Library Management System</h1>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
method="post">
<label for="title">Title:</label><br>
<input type="text" id="title" name="title"><br>
<label for="author">Author:</label><br>
<input type="text" id="author" name="author"><br>
<label for="edition">Edition:</label><br>
<input type="text" id="edition" name="edition"><br>
<label for="publisher">Publisher:</label><br>
<input type="text" id="publisher" name="publisher"><br>
<input type="submit" value="Add Book">
</form>
<?php
// Connect to the database
$username = "root";
$password = "";
$dbname = "sumit";
die("Connection failed: " . $conn->connect_error);
}
// Handle add book form submission

if($_SERVER["REQUEST_METHOD"]=="POST" && isset($_POST["add book"]))
{
$title = $_POST['title'];
$author = $_POST['author'];
$edition = $_POST['edition'];
$publisher = $_POST['publisher'];
// Insert new book record into the database

$sql = "INSERT INTO Library (Title, author, Edition, Publisher)
VALUES ('$title','$author','$edition','$publisher')";
if($conn->query($sql) === TRUE){
echo "<p>New book added successfully</p>";
} else {
echo "<p>Error: " . $sql . "<br>" . $conn->error . "</p>";
}
}
// Handle search form submission

if(isset($_POST["search"])){
$search = $_POST['search'];
// Query the database for books with matching titles

$sql = "SELECT * FROM Library WHERE Title LIKE '%$search%'";
$result = $conn->query($sql);
// Display search results in a table

if ($result->num_rows > 0) {
echo "<h3>Search Results:</h3>";
echo "<table >";
echo "<tr><th>Accession
Number</th><th>Title</th><th>Author</th><th>Edition</th><th>Publisher</th></tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["acc_no"]."</td>";
echo "<td>".$row["title"]."</td>";
echo "<td>".$row["author"]."</td>";
echo "<td>".$row["Edition"]."</td>";
echo "<td>".$row["Publisher"]."</td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "<p>No results found for '$search'</p>";
}
}
$conn->close();
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
method="POST">
<label for="search">Search for a book by title:</label><br>
<input type="text" id="search" name="search"><br>
<input type="submit" value="Search">
</form>
</body>
</html>

HTML Css File

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css File

Uploaded by

Copyright:

Available Formats

1. Design a web page to validate credit card number according to the below speciticatio.

// All fields are valid

// Define the greetings based on the time of the day

// Display the greeting to the user

// Add an event listener to listen for changes in the input field

// Disable all buttons

// Handle add book form submission

// Insert new book record into the database

// Handle search form submission

// Query the database for books with matching titles

// Display search results in a table

You might also like