JAVASCRIPT
1. Design a web page to validate credit card number
according to the below specification.
Following tables outlines the major credit cards you
might want to validate, along with their
allowed prefixes and lengths.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ques:1</title>
</head>
<body>
<h1>Question 1</h1>
<div class="card">
<fieldset>
<legend>Credit card validation</legend>
<label for="card">Card</label>
<input type="number" id="creditnum" name="card" placeholder="Enter your card
number">
<br>
<button type="button" id="mybutton">Validate</button>
</fieldset>
</div>
<script src="ques1.js"></script>
</body>
</html>
document.getElementById("mybutton").onclick = function () {
var cardnumber = document.getElementById("creditnum").value;
if (cardnumber.length == 16 && cardnumber.charAt(0) == 5 && cardnumber.charAt(1) == 1
|| cardnumber.charAt(1) == 2 || cardnumber.charAt(1) == 3 || cardnumber.charAt(1) == 4 ||
cardnumber.charAt(1) == 5) {
console.log(cardnumber + " is a Master Card");
}
else if (cardnumber.length == 13 || cardnumber.length == 16 && cardnumber.charAt(0) == 4)
{
console.log(cardnumber + " is a Visa");
}
else if (cardnumber.length == 15 && cardnumber.charAt(0) == 3 && cardnumber.charAt(1)
== 4 || cardnumber.charAt(0) == 3 && cardnumber.charAt(1) == 7) {
console.log(cardnumber + " is a American Express Card");
}
else {
console.log(cardnumber + " is not valid");
}
}
Output:
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)
• E-mail (should not contain invalid addresses)
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ques:2</title>
</head>
<body>
<h1 id="heading">Question 2</h1>
<div class="regpage">
<fieldset>
<legend>Rregistration Page</legend>
<label for="name">Name: </label>
<input type="text" id="myname" name="name" placeholder="Enter your name">
<br>
<label for="email">Email: </label>
<input type="email" id="mail" name="email" placeholder="Enter your email"
onclick()="myfunc">
<br>
<label for="password">Password: </label>
<input type="password" id="pass" name="pass" placeholder="Enter password">
<br>
<button type="button" id="mybutton">Validate</button>
</fieldset>
</div>
<script src="ques2.js"></script>
</body>
</html>
document.getElementById("mybutton").onclick = function () {
var flag = 0;
var flag1 = 0;
var name = document.getElementById("myname").value;
var email = document.getElementById("mail").value;
var pass = document.getElementById("pass").value;
var len = email.length;
//validating Name field
if (name.length < 6) {
flag1 = 0;
}
if (name.length >= 6) {
flag1 = 1;
}
for (let i = 0; i < name.length; i++) {
if (name[i] >= 'a' && name[i] <= 'z' || name[i] >= 'A' && name[i] <= 'Z') {
flag = 1;
}
else {
flag = 0;
}
}
if (flag == 0 && flag1 == 0) {
console.log("Invalid name.\n");
console.log("Please enter a name with length of more than 6 cahracters.\n");
}
if (flag == 0 && flag1 == 1) {
console.log("Invalid name.\n");
console.log("Please enter a name with length of more than 6 cahracters.\n");
}
if (flag == 1 && flag1 == 0) {
console.log("Invalid name.\n");
console.log("Please enter a name with length of more than 6 cahracters.\n");
}
if (flag == 1 && flag1 == 1) {
console.log("valid name.\n");
}
//validating E-mail
if (email.indexOf('@') <= 0)
console.log("Invalid @ position");
else if ((email.indexOf('.') == len - 4 && email.indexOf('@') <= len - 6) ||
(email.indexOf('.') == len - 3 && email.indexOf('@') <= len - 5))
console.log("valid email");
else {
console.log("INVALID");
}
//validating password
if (pass.length <= 5) {
console.log("Invalid password.\n");
}
else {
console.log("valid password.\n");
}
Output:
3. Write a java script program to "Wish a user " at different
hours of a day.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ques:3</title>
</head>
<body>
<h1 id="heading">Question 3</h1>
<script src="ques3.js"></script>
</body>
</html>
var day = new Date();
var hr = day.getHours();
if (hr >= 0 && hr < 12) {
document.write("Good Morning!");
} else if (hr == 12) {
document.write("Good Noon!");
} else if (hr > 12 && hr <= 17) {
document.write("Good Afternoon!");
} else {
document.write("Good Evening!");
}
Output:
4. Design a web page that self-modifying itself after every one
minute.
Program:
<!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>Ques:4</title>
<script src="ques4.js"></script>
</head>
<style>
p{
text-align: center;
font-size: x-large;
}
</style>
<body>
<p id="para">I am random!!</p>
</body>
</html>
function Refresh(){
var arr=["My","again after a minute","Me after one minute"];
var p=document.getElementById("para");
var r=Math.floor(Math.random()*arr.length);
p.innerHTML=arr[r];
}
setInterval('Refresh()',10000);
Output:
5. Write a code for web application, which accepts the birth date
from the user in a textbox and display the day of the week in a
message box on the click of a button.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ques:5</title>
</head>
<body>
<h1 id="heading">Question 5</h1>
<label for="box">Date: </label>
<input type="date" id="tbox" name="box">
<br>
<button type="button" id="mybutton">Convert</button>
<script src="ques5.js"></script>
</body>
</html>
document.getElementById("mybutton").onclick = function () {
var date = document.getElementById("tbox").value;
var d= new Date(date);
var day = d.getDay();
var array=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
alert("day is: " + array[day]);
}
Output:
6. Write a script that inputs a telephone number as a string in the
form (555)555-555. The script should use strings method split to
extract the area code as token and the last four digits of the phone
numbers as a token. Display the area code in one text field and
the seven-digit phone number in another text field.
Program:
<!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>Ques:6</title>
<script src="ques6.js"></script>
</head>
<style>
input{
margin: 5px;
}
</style>
<body>
<label>Enter Phone number [in the form (555) 555-5555]:</label>
<input type="text" name="phone" id="phone" value="(xxx) xxx-xxxx" size="14"
maxlength="14" onchange="validate()" /><br/>
<label>Area Code: </label>
<input type="text" name="area" id="area" size="8"/><br/>
<label>Number: </label>
<input type="text" name="telephone" id="telephone" size="8"/>
</body>
<script>
</script>
</html>
function validate() {
var number=document.getElementById("phone").value;
if (number.charAt(0) != "(" || number.charAt(4) != ")" || number.charAt(5) != " " ||
number.charAt(9) != "-") {
alert("Invalid Format....Please Enter again!");
return;
}
for (var i = 1; i < 14; i++) {
if (i==0 || i==4 || i==5 || i==9)
continue;
else if(isNaN(number.charAt(i))) {
alert("Invalid Format....Please Check again!");
return;
}
}
var areac=number.split(" ");
document.getElementById("area").value=areac[0];
var tel=areac[1].split("-");
document.getElementById("telephone").value=tel.join("-");
}
Output:
7. Create a web page that applies the invert filter to an image if
the user moves the mouse over it.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ques:7</title>
<script src="ques7.js"></script>
</head>
<body>
<h1 id="heading">Question 7</h1>
<div>
<img height="300px" src="/Images/airtel.png" id="image" onmouseover="invert()"
onmouseout="revert()">
</div>
</body>
</html>
function invert(){
var img = document.getElementById("image");
img.style.filter="invert(100%)";
function revert(){
var img = document.getElementById("image");
img.style.filter="invert(0%)";
}
Output:
8. Design a web page to perform survey on four different model of
Maruti (Maruti -K10, Zen Astelo, Wagnor, Maruti- SX4)
Chennai &Kolkatta). Display tabulated report like format given
below owned by person living in four metro cities:
Program:
<!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>Question-9</title>
</head>
<body>
<h2>Survey</h2>
<label for="">City: </label>
<select name="" id="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Kolkata">Kolkata</option>
</select>
<label for="">Models of Maruti: </label>
<select name="" id="model">
<option value="Maruti-K10">Maruti-K10</option>
<option value="Zen-Astelo">Zen-Astelo</option>
<option value="Wagnor">Wagnor</option>
<option value="Maruti-SX4">Maruti-SX4</option>
</select>
<button onclick="submit_data()">Submit</button>
<table border="1" id="table" cellpadding="15">
<tr>
<td ></td>
<td>Maruti-K10</td>
<td>Zen-Astelo</td>
<td>Wagnor</td>
<td>Maruti-SX4</td>
</tr>
<tr>
<td>Delhi</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mumbai</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Chennai</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Kolkata</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="/JAVASCRIPT/ques9.js"></script>
</body>
var arr = [];
for (let i = 0; i < 5; i++) {
arr[i] = [];
for (let j = 0; j < 5; j++) {
arr[i][j] = 1;
}
}
function submit_data() {
var city = document.getElementById("city").selectedIndex;
var model = document.getElementById("model").selectedIndex;
city++;
model++;
var table = document.getElementById("table");
table.rows[city].cells[model].innerHTML = arr[city][model]++;
}
Output:
XML
1. Write an XML file which will display the Book information
which includes the following:
• Title of the book
• Author Name
• ISBN number
• Publisher name
• Edition
• Price
Write a Document Type Definition (DTD) to validate the
above XML file.
Program:
XML FILE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<?xml-model href="validate.dtd" type="application/xml-dtd"?>
<Book-info>
<title>Harry Potter</title>
<author>J K Rowling</author>
<isbn>978-0-395-19395-8</isbn>
<publisher-name>Bhavya Shastri </publisher-name>
<edition>5th</edition>
<price>29.99</price>
</Book-info>
DTD FILE:
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT Book-info (title,author,isbn,publisher-name,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher-name (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
Output:
2. Display the above XML File as follows:
The contents should be displayed in a block. And the Author
names information should be displayed in one color and should be
capitalized and in bold. Use your own colors for remaining
information. Use CSS for the above purpose.
Program:
<!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>XML PARSING</title>
</head>
<style>
table,th,td,tr{
border-collapse: collapse;
border: 1px solid black;
}
table td:nth-child(2){
color: red;
text-transform: capitalize;
font-weight: bold;
}
td,th{
padding: 10px;
text-align: center;
}
</style>
<body>
<table id="book-info">
<tr>
<th>
Title
</th>
<th id="author">
Author Name
</th>
<th>
ISBN Number
</th>
<th>
Publisher Name
</th>
<th>
Edition
</th>
<th>
Price
</th>
</tr>
</table>
</body>
<script>
var pars=new DOMParser();
var xml="<Book-info>"+
"<title>Harry Potter</title>"+
"<author>J K Rowling</author>"+
"<isbn>978-0-395-19395-8</isbn>"+
"<publisher-name>Bhavya Shastri </publisher-name>"+
"<edition>5th</edition>"+
"<price>29.99</price>"+
"</Book-info>";
var tab=document.getElementById("book-info");
var xmlDoc=pars.parseFromString(xml,"text/xml");
var row=tab.insertRow(1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
cell1.innerHTML=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;;
cell2.innerHTML=xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
cell3.innerHTML=xmlDoc.getElementsByTagName("isbn")[0].childNodes[0].nodeValue;
cell4.innerHTML=xmlDoc.getElementsByTagName("publisher-
name")[0].childNodes[0].nodeValue;
cell5.innerHTML=xmlDoc.getElementsByTagName("edition")[0].childNodes[0].nodeValue;
cell6.innerHTML=xmlDoc.getElementsByTagName("price")[0].childNodes[0].nodeValue;
</script>
</html>
Output:
PHP
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 the user-id and password match a new welcome window should appear.
Program:
Index.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">
<title>Login Validate</title>
</head>
<style>
label,input,select{
margin-bottom: 10px;;
}
</style>
<body>
<form action="validate.php" method="post">
<label for="name"> UserName: </label>
<input type="text" name="uname" id="name" required>
<label for="pass">Password:</label>
<input type="password" name="password" id="pass" required><br/>
<input type="submit" value="submit" >
</form>
</body>
</html>
Validate.php
<?php
$u_name=$_POST['uname'];
$pass=$_POST['password'];
$conn=new mysqli("localhost","root","","test");
if($conn->connect_error)
{
die("Connection failed. ".$conn->connect_error);
}
$sql="select * from form_val where Username='$u_name' and Password='$pass' ";
$result=$conn->query($sql);
if($result->num_rows>0)
echo"Record Matched..... Welcome!";
else
echo "No record Found!!!";
$conn->close();
?>
OUTPUT
2. 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 browser Screen.
Program:
Index.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">
<title>Display PERS</title>
</head>
<style>
label,input,select{
margin-bottom: 10px;;
}
</style>
<body>
<form action="show.php" method="post">
<label for="DeptNo">Department Number: </label>
<input type="text" name="Department" placeholder="Enter Dno">
<input type="submit" value="Submit">
</form>
</body>
</html>
show.php
<?php
$dno=$_POST['Department'];
$conn=new mysqli("localhost","root","","test");
if($conn->connect_error)
{
die("Connection failed. ".$conn->connect_error);
}
$sql="select * from PERS where Dno= '$dno' ";
$result=$conn->query($sql);
if($result->num_rows>0)
{
while($row=$result->fetch_assoc())
{
echo "Employee ID :".$row['Emp_ID']." "." "."Employee Name: ".$row['Name']." 
"." "."Salary: ".$row['Salary']."  "." "."Department Number: ".$row['Dno']."<br>"."<br>";
}
}
else
echo "No record Found!!!";
$conn->close();
?>
OUTPUT
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.
Program:
<?php
session_start();
if(isset($_SESSION['views']))
{
$_SESSION['views'] = $_SESSION['views'] + 1;
}
else{
$_SESSION['views'] = 1;
}
echo "View Count: ".$_SESSION['views'];
?>
OUTPUT
First Time Visit:
After Refreshing 3 times:
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.
Program:
<h2>Your Last time Visit was:</h2>
<?php
date_default_timezone_set("Asia/Kolkata");
setcookie('LastVisit',date("d/m/Y"." "."h-i-sa"." "."l"));
if(isset($_COOKIE['LastVisit'])) {
$visit=$_COOKIE['LastVisit'];
echo $visit;
}
else
{
echo "It's Your First Time Visit...hihi!!";
}
?>
OUTPUT
First Time Visit:
For all other Visits:
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.
Program:
Index.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">
<title>Book Info</title>
</head>
<style>
table{
margin: 70px 550px;
}
table,tr,td{
border: 5px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
label,input,select{
margin-bottom: 10px;;
}
h2,h3{
text-align: center;
}
</style>
<body>
<h2>Book Information and Management System</h2>
<h3>Enter the Records of a Book</h3>
<form action="insert.php" method="post">
<table >
<tr>
<td>Enter the Accession Number of the Book: </td>
<td><input type="text" name="Aname" required></td>
</tr>
<tr>
<td>Enter the title of the Book: </td>
<td><input type="text" name="title" required></td>
</tr>
<tr>
<td>Enter the Author of the Book: </td>
<td><input type="text" name="auth" required></td>
</tr>
<tr>
<td>Enter the Edition of the Book: </td>
<td><input type="text" name="ed" required></td>
</tr>
<tr>
<td>Enter the Publisher of the Book: </td>
<td><input type="text" name="pub" required></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Insert.php
<?php
$ano=$_POST['Aname'];
$tit=$_POST['title'];
$author=$_POST['auth'];
$ed=$_POST['ed'];
$pub=$_POST['pub'];
$conn=new mysqli("localhost","root","","test");
if($conn->connect_error)
{
die("Connection Establishment Failed!!".$conn->connect_error);
}
$quer="Insert into BookDB values('$ano','$tit','$author','$ed','$pub');";
$result=$conn->query($quer);
if($result==TRUE)
{
echo "Records Entered Successfully!!!"."<br/>";
echo "<a href='search.html'>Search a Book Here</a> OR ";
echo "<a href='index.html'>Enter a new Record</a>";
}
else
{
echo "Error Inserting Records!!!"."<br/>";
echo "<a href='index.html'>Back to Homepage</a>";
}
$conn->close();
?>
Search.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">
<title>Book Info</title>
</head>
<style>
table{
margin: 70px 550px;
}
table,tr,td{
border: 5px solid black;
border-collapse: collapse;
padding: 5px;
}
label{
margin-left: 500px;
}
h2,h3{
text-align: center;
}
</style>
<body>
<h2>Book Information and Management
System</h2> <h3>Search a Book</h3>
<form action="show.php" method="post">
<label>Enter the title of the Book you want to search: </label>
<input type="text" name="title" > <input type="submit"
value="Search" >
</form>
</body>
</html>
show.php
<!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>Book Info</title>
</head>
<style>
table{
margin-left: 50px;
margin-bottom: 20px;
}
th{
width: 10%;
}
table,tr,td,th{
border: 5px solid black;
border-collapse: collapse;
padding: 5px;
text-align: center;
}
h2,h3{
text-align: center;
}
</style>
<body>
<h2>Book Information and Management
System</h2> <h3>The Book you Requested for</h3>
<?php
$tit = $_POST['title'];
$conn = new mysqli("localhost", "root", "", "test");
if ($conn->connect_error) {
die("Connection Establishment Failed!!" . $conn->connect_error);
}
$quer = "select * from BookDB where Title='$tit' ";
$result = $conn->query($quer);
if ($result->num_rows > 0) {
while($row=$result->fetch_assoc())
{?>
<table>
<tr>
<th>Accession Number</th>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Publisher</th>
</tr>
<tr>
<td><?php echo $row['ANo']; ?></td>
<td><?php echo $row['Title']; ?></td>
<td><?php echo $row['Author']; ?></td>
<td><?php echo $row['Edition']; ?></td>
<td><?php echo $row['Publisher']; ?></td>
</tr>
</table>
<?php
}
}
else {
echo "Is Not Present!!! No Records Found for the Requested Title " . "<br/>";
echo "<a href='search.html'>Back to Search Page</a>";
}
$conn->close();
echo '<pre>';
echo "\t<a href='search.html'>Search a Book Here</a>\n \tOR\n\t<a href='index.html'>Enter a new
Record</a>\n";
echo '</pre>';
?>
</body>
</html>
OUTPUT
