Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
93 views

HTML Css File

This document provides code samples for validating credit card numbers, validating form fields, greeting users based on time of day, updating a web page every minute, displaying the day of the week for a given birthdate, extracting area and phone numbers from a phone number string, and applying a filter to an image on mouseover. It contains 7 code samples with descriptions of what each code sample is demonstrating.

Uploaded by

sumit Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
93 views

HTML Css File

This document provides code samples for validating credit card numbers, validating form fields, greeting users based on time of day, updating a web page every minute, displaying the day of the week for a given birthdate, extracting area and phone numbers from a phone number string, and applying a filter to an image on mouseover. It contains 7 code samples with descriptions of what each code sample is demonstrating.

Uploaded by

sumit Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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>
<script type="text/javascript">

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>
<script type="text/javascript">
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>
<td><button value="01" onclick="add(this.value)" id="01">select</button></td>
<td><button value="02" onclick="add(this.value)" id="02">select</button></td>
<td><button value="03" onclick="add(this.value)" id="03">select</button></td>
</tr>
<tr>
<td>Mumbai</td>
<td><button value="10" onclick="add(this.value)"id="10">select</button></td>
<td><button value="11" onclick="add(this.value)" id="11">select</button></td>
<td><button value="12" onclick="add(this.value)" id="12">select</button></td>
<td><button value="13" onclick="add(this.value)"id="13">select</button></td>
</tr>
<tr>
<td>Chennai</td>
<td><button value="20" onclick="add(this.value)"id="20">select</button></td>
<td><button value="21" onclick="add(this.value)" id="21">select</button></td>
<td><button value="22" onclick="add(this.value)" id="22">select</button></td>
<td><button value="23" onclick="add(this.value)" id="23">select</button></td>
</tr>
<tr>
<td>Kolkata</td>
<td><button value="30" onclick="add(this.value)" id="30">select</button></td>
<td><button value="31" onclick="add(this.value)" id="31">select</button></td>
<td><button value="32" onclick="add(this.value)" id="32">select</button></td>
<td><button value="33" onclick="add(this.value)"id="33">select</button></td>
</tr>
</table>
<br>
<button onclick="show()"> show</button>
<script type="text/javascript">
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
$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(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;
border: 1px solid black;
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%;
border: 1px solid black;
margin-top: 20px;
margin-bottom: 20px;
}
th, td{
text-align: left;
padding: 8px;
border: 1px solid black;
}
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
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "sumit";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
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>

You might also like