Web Technologies

ITA1007 Web Development
Name: Yeswin N Faculty: Brindha K

Reg No: 15BCA0037 Slot: L51 + L52
Question 1:
According to Wikipedia a happy number is defined by the following process :
"Starting with any positive integer, replace the number by the sum of the squares of
its digits, and repeat the process until the number equals 1 (where it will stay), or it
loops endlessly in a cycle which does not include 1. Those numbers for which this
process ends in 1 are happy numbers, while those that do not end in 1 are unhappy
numbers (or sad numbers).Write a JavaScript program to find and print the first 5
happy numbers.
Answer:
<html>
<head>
<title>Happy Number</title>
<script type="text/javascript">
function happy_num(form)
{
var num=form.hapnum.value;
calc(num);
}
function calc(no)
{
var res=0,temp,count=0;
while(no!==0)
{
temp=parseInt(no%10);
temp*=temp;
no=parseInt(no/10);
res+=temp;
}
if(res<10)
{
if(res===1)
count=1;
else
count=2;
}
if(count===1)
{
document.getElementById("p1").innerHTML="Is a happy no.";
}
else if(count===2)
document.getElementById("p1").innerHTML="Is not a happy no.";
else
calc(res);
}
</script>
</head>
<body>
<form>
<input type="number" name="hapnum">
<input type="button" value="Find" onclick="happy_num(this.form);">
</form>
<p id="p1"></p>
</body>
</html>
Output:
Question 2:
Design a HTML page to generate an image slide show using Javascript. First input
all the images (minimum of 5 images) you want to add to the slideshow. Add a
button to start the slideshow. Repeatedly starting from the first to last, display each
image for 5 seconds and then display the next image. Add two buttons to view the
previous and next image.
Answer:
<html>
<head>
<title>Slide Show</title>
<script>
var myVar;
var i=0;
var arr=[];
var temp=0;
function myFunction()
{
if(i<4)
{
myVar = setTimeout(alertFunc, 1000);
i++;
}
else
{
myVar = setTimeout(alertFunc, 1000);
i=0;
}
}
function alertFunc()
{
document.slide.src=arr[i];
myFunction();
}
function stop()
{
clearTimeout(myVar);
}
function adds(form)
{
arr[temp++]=form.add.value;
}
function backward()
{
if(i===0)
i=4;
else
i--;
}
function forward()
{
if(i===4)
i=0;
else
i++;
}
</script>
</head>
<body>
<form>
<input type="text" name="add">
<input type="button" value="Add Image" onclick="adds(this.form)">
</form><br>
<input type="button" value="Start Slide Show" onclick="alertFunc();">
<input type="button" value="Stop Slide Show" onclick="stop();">
<p id="p1"></p>
<input type="button" value="<<" onclick="backward();">
<img src="" name="slide" alt="image" height="500" width="500">
<input type="button" value=">>" onclick="forward();">
</body>
</html>
Output:
Question 3:
Develop an Online Greetings Designer using Javascript and CSS. Add options to
i) Change the image
ii) Position the image (left, background, right)
iii) Edit text
iv) Change font size
v) Change font color
Answer:
<html>
<head>
<title>Greeting Designer</title>
var count=1;
function change_image()
{
if(count===1)
{
document.getElementById("d1").innerHTML=("<img src=\"images_2.jpg\"
alt=\"image 2\" width=\"300\" height=\"300\" id=\"i1\">");count=2;
}
else
{
document.getElementById("d1").innerHTML=("<img src=\"images_1.jpg\"
alt=\"image 1\" width=\"300\" height=\"300\" id=\"i1\">");count=1;
}
}
function edit_text(form)
{
document.getElementById("p1").innerHTML=form.edit.value;
}
function position_right()
{
document.getElementById('i1').style.left=1050 + "px";
}
function position_left()
{
document.getElementById('i1').style.left=0 + "px";
}
function font_size(form)
{
document.getElementById("p1").style.fontSize=form.size.value+"px";
}
function font_color(form)
{
document.getElementById("p1").style.color=form.col.value;
}
function background()
{
if(count===1)
document.body.style.backgroundImage="url('images_1.jpg')";
else
document.body.style.backgroundImage="url('images_2.jpg')";
}
</script>
<style>
#i1{position:relative;top:10px;}body{background-size: cover;}
</style>
</head>
<body>
<div id="d1"><img src="images_1.jpg" alt="image 1" width="300" height="300"
id="i1"></div>
<p id="p1">Hello World</p>
<input type='button' value="Change Image" onclick="change_image();">
<form>
<input type='text' name="edit">
<input type='button' value="Edit Text" onclick="edit_text(this.form);">
</form>
<input type='button' value="Right" onclick="position_right();">
<input type='button' value="Left" onclick="position_left();">
<input type='button' value="Background" onclick="background();">
<form>
<input type='number' name="size">
<input type='button' value="Set Font Size" onclick="font_size(this.form);">
</form>
<form>
<input type='text' name="col">
<input type='button' value="Set Font Color" onclick="font_color(this.form);">
</form>
</body>
</html>
Output:
Question 4:
Design an online Resume Generator using HTML and Javascript. Design a HTML
page where the user can input his personal, academic and experience details. Using
Javascript generate the formatted resume.
Answer:
<html>
<head>
<title>Online Resume</title>
function validate(form)
{
var na=form.username.value;
var add=form.add.value;
var email=form.email.value;
var mobile=form.phone.value;
var edu=form.edu.value;
var aof=form.aof.value;
var skill=form.skills.value;
var award=form.awards.value;
if((na==="")||(add==="")||(email==="")||(mobile==="")||(edu==="")||(aof==="")||(skill="")||(awar
d=""))
alert("Invalid details");
}
</script>
</head>
<body>
<h1 align="center">Online Resume Generator</h1><br><br>
<form method="post" action="Insert.php">
<table align="center" cellpadding="5">
<tr><td>Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr><td>Address:</td>
<td><textarea name="add" rows="5" cols="22"></textarea></td>
</tr>
<tr><td>Email ID:</td>
<td><input type="text" name="email"></td>
</tr>
<tr><td>Mobile No:</td>
<td><input type="number" name="phone"></td>
</tr>
<tr><td>Educational Qualification:</td>
<td><input type="text" name="edu"></td>
</tr>
<tr><td>Area of Interest:</td>
<td><input type="text" name="aof"></td>
</tr>
<tr><td>Skills:</td>
<td><input type="text" name="skills"></td>
</tr>
<tr><td>Awards:</td>
<td><input type="text" name="awards"></td>
</tr>
<tr><td></td>
<td><input type="submit" value="Post"
onclick="validate(this.form)">
<input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Php File:
<?php
$db= mysqli_connect("localhost", "root", "", "hackathon")
or die('Error Connecting Database');
$name= htmlspecialchars($_POST["username"]);
$add= htmlspecialchars($_POST["add"]);
$email= htmlspecialchars($_POST["email"]);
$mobile= htmlspecialchars($_POST["phone"]);
$edu= htmlspecialchars($_POST["edu"]);
$aof= htmlspecialchars($_POST["aof"]);
$skills= htmlspecialchars($_POST["skills"]);
$awards= htmlspecialchars($_POST["awards"]);
$query="INSERT INTO Resume
VALUES('$name','$add','$email','$mobile','$edu','$aof','$skills','$awards')";
mysqli_query($db, $query)
or die('Error Inserting');
echo "Name is: ".$name."<br>";
echo "Address is: ".$add."<br>";
echo "Email IDis: ".$email."<br>";
echo "Phone No. is: ".$mobile."<br>";
echo "Educational Qualification is: ".$edu."<br>";
echo "Area of Interest is: ".$aof."<br>";
echo "Skills is: ".$skills."<br>";
echo "Awards is: ".$awards."<br>";
Output:
Question 5:
A parking garage charges a $2.00 minimum fee to park for up to three hours. The
garage charges an additional $0.50 per hour for each hour or part thereof in excess
of three hours. The maximum charge for any given 24-hour period is $10.00.
Assume that no car parks for longer than 24 hours at a time. Write a script that
calculates and displays the parking charges for each customer who parked a car in
this garage yesterday. You should input from the user the hours parked for each
customer. The program should display the charge for the current customer and
should calculate and display the running total of yesterday's receipts. The program
should use the function calculate-Charges to determine the charge for each
customer. Use a text input field to obtain the input from the user.
Answer:
<html>
<head>
<title>Parking Charges</title>
var total=0;
function calculate_charges(form)
{
var hour=form.hours.value;
var charges=2;
if(hour<=24&&hour>3)
{
hour*=0.5;
charges+=hour;
total+=charges;
document.getElementById("p1").innerHTML="Charges is"+charges+"Total
Charges are: "+total;
}
else
{
total+=charges;
document.getElementById("p1").innerHTML="Charges is: "+charges+" Total
Charges are: "+total;
}
}
</script>
</head>
<body>
<form>
Enter the no. of hours:<input type="number" name="hours">
<input type="button" value="Calculate" onclick="calculate_charges(this.form);">
<p id="p1"></p>
</form>
</body>
</html>
Output:
Question 6:
Create a script that uses regular expressions to validate credit card numbers. Major
credit card numbers must be in the following formats:
American ExpressNumbers start with 34 or 37 and consist of 15 digits.
Diners ClubNumbers begin with 300 through 305, or 36 and 38 and
consists of 14 digits
DiscoverNumbers begin with 6011 or 65 and consist of 16 digits.
JCBNumbers beginning with 2131 or 1800 consist of 15 digits, while
numbers beginning with 35 consist of 16 digits.
MasterCardNumbers start with the numbers 51 through 55 and consist of
16 digits.
VisaNumbers start with a 4; new cards consist of 16 digits and old cards
consist of 13 digits.
Answer:
<html>
<head>
<title>Validate Credit Card</title>
{
var count=0;
var temp;
var name=form.cardname.value;
var number=form.number.value;
if(name.localeCompare("American Express")===0)
{
if(number.length===15)
{
temp=parseInt(number/10000000000000);
if((temp===34)||(temp===37))
count++;
}
}
else if(name.localeCompare("Diners Club")===0)
{
{
if((temp===36)||(temp===38))
count++;
if((temp>=300)&&(temp<=305))
count++;
}
}
else if(name.localeCompare("JCB")===0)
{
{
if((temp===2131)||(temp===1800))
count++;
}
else if(number.length===16)
{
if(temp===35)
count++;
}
}
else if(name.localeCompare("Discover")===0)
{
{
if(temp===6011)
count++;
if(temp===65)
count++;
}
}
else if(name.localeCompare("Master Card")===0)
{
{
if((temp>=51)&&(temp<=55))
count++;
}
}
else if(name.localeCompare("Visa")===0)
{
{
if(temp===4)
count++;
}
else if(number.length===16)
{
if(temp===4)
count++;
}
}
if(count===0)
document.getElementById("p1").innerHTML="Invalid Credit Card";
else
document.getElementById("p1").innerHTML="Valid Credit Card";
count=0;
}
</script>
</head>
<body>
<form>
<h2 align="center">Validate Credit Cards</h2>
Credit Card:<select name="cardname" ><option value="American Express">American
Express</option>
<option value="Diners Club">Diners Club</option>
<option value="Discover">Discover</option>
<option value="JCB">JCB</option>
<option value="Master Card">Master Card</option>
<option value="Visa">Visa</option></select><br>
Number:<input type="number" name="number"><br>
<input type="button" value="Validate" onclick="validate(this.form);">
</form>
<p id="p1"></p>
</body>
</html>
Output:
Question 7:
Develop a word decoder challenge game using HTML, CSS and JavaScript.
Present the player with a set of scrambled word & hint and challenge him to
unscramble them. For each attempt, randomly select a word, refresh the browser
window dynamically and display the scrambled word in red. Once the player
thinks the word has been properly decoded, he clicks on the Check Answer button
to see the results. If the answer is correct, the player is notified via a success
message displayed in a popup dialog window or displays a failure message.
Answer:
<html>
<head>
<title>Word Decoder</title>
var i;
var
check=["OESTRIN","NEGATOR","ENATION","ARENITE","INERTIA","ASSAULT","CALI
BER","DEFICIT","INTERIM","TORNADE"];
var dis=["I S T N R E O","N A G R E O T","E T N A N I O","E A R T E I N","A E N I
R T I","A S T S A U L","I B R E C A L","I E I F D T C","M I E N R T I","D T R O E N A"];
function generate()
{
i=parseInt(Math.random()*(9-0)+0);
document.getElementById("p1").innerHTML=dis[i];
document.getElementById("p2").innerHTML="Hint:Hint No."+(i+1);
}
function checks(form)
{
var val=form.ans.value;
if((val.toUpperCase()).localeCompare(check[i])===0)
alert("Correct!");
else
alert("Incorrect!");
}
</script>
</head>
<style>
#p1{color:red;font-size: 20px;font-weight: bolder;}
</style>
<body>
<p id="p1"></p>
<p id="p2"></p>
<input type="button" value="Generate" onclick="generate();">
<form>
<input type="text" name="ans">
<input type="button" value="Check" onclick="checks(this.form);">
</form>
</body>
</html>
Output:
Question 8:
Develop a JavaScript program that will determine whether a department-store
customer has exceeded the credit limit on a charge account. For each customer, the
following facts are available:
a) Account number
b) Balance at the beginning of the month
c) Total of all items charged by this customer this month
d) Total of all credits applied to this customer's account this month
e) Allowed credit limit
The program should input each of these facts from a prompt dialog as an integer,
calculate the new balance (= beginning balance + charges credits), display the
new balance and determine whether the new balance exceeds the customer's credit
limit. For customers whose credit limit is exceeded, the program should output
XHTML text that displays the message Credit limit exceeded.
Answer:
<html>
<head>
<title>Balance Checking</title>
function check()
{
var ac_no=parseInt(prompt("Enter Account No."));
var limit=parseInt(prompt("Enter Credit Limit"));
var begin_bal=parseInt(prompt("Enter Beginning Balance"));
var expe=parseInt(prompt("Enter Expenditures"));
var credit_pay=parseInt(prompt("Enter Credit Payments"));
var new_bal=begin_bal+expe-credit_pay;
document.write("\nAccount No: "+ac_no+"<br>");
document.write("\nCredit Limit: "+limit+"<br>");
document.write("\nBeginning Balance: "+begin_bal+"<br>");
document.write("\nTotal Expenditures: "+expe+"<br>");
document.write("\nTotal Credit Payments: "+credit_pay+"<br>");
document.write("\nNew Balance: "+new_bal+"<br>");
if(new_bal>limit)
{
document.write("Credit Limit Exceeded");
}
}
</script>
</head>
<body>
<input type="submit" value="Click Me" onclick="check();">
</body>
</html>
Output:
Question 9:
A company wants to transmit data over the telephone, but it is concerned that its
phones may be tapped. All of its data is transmitted as four-digit integers. It has
asked you to write a program that will encrypt its data so that the data may be
transmitted more securely. Your script should read a four-digit integer entered by
the user in a prompt dialog and encrypt it as follows: Replace each digit by (the
sum of that digit plus 7) modulus 10. Then swap the first digit with the third, and
swap the second digit with the fourth. Then output XHTML text that displays the
encrypted integer.
Answer:
<html>
<head>
<title>Telephone Directory</title>
function encrypt(form)
{
var i;
var num=form.num.value;
var temp;
var arr=[4];
for(i=3;i>=0;i--)
{
arr[i]=parseInt(num%10);
num=parseInt(num/10);
arr[i]=(arr[i]+7)%10;
}
i=0;
for(i=0;i<2;i++)
{
temp=arr[i];
arr[i]=arr[i+2];
arr[i+2]=temp;
}
document.getElementById("p1").innerHTML="Encrypted Text
is:"+arr[0]+arr[1]+arr[2]+arr[3];
}
</script>
</head>
<body>
<form>
<p>Enter the Number:<input type="number" name="num"><input type="button"
value="Encrypt" onclick="encrypt(this.form);"></p>
</form>
<p id="p1"></p>
</body>
</html>
Output:
Question 10:
Write a program to demonstrate Event Handling
Validation of registration form
Open a Window from the current window
Change color of background at each click of button or refresh of a page
Display calendar for the month and year selected from combo box
OnMouseover event
Answer:
<html>
<head>
<title>Java Script</title>
<style>sup{color:red;}</style>
<script>
{
var n=form.name.value;
var address=form.add.value;
var pin=form.zip.value;
var mob=form.phone.value;
var email=form.email.value;
var pas=form.pass.value;
var vepas=form.vepass.value;
var i;
var count=0;
var data=0;
var temp=0;
var options = document.getElementsByName("options[]");
var gender = document.getElementsByName("gen");
var coun=document.getElementById("country");
var flag=0;
for(i=0;i<email.length;i++)
{
if(email.charAt(i)==='@'|| email.charAt(i)==='.')
flag++;
}
if(flag<2)
data++;
if((pas.length>=6)||(vepas.length>=6))
{
if(pas.localeCompare(vepas)!==0)
data++;
}
else
data++;
for(i=0;i<3;i++)
{
if(options[i].checked===false)
count++;
}
for(i=0;i<2;i++)
{
if(gender[i].checked===false)
temp++;
}
var month=document.getElementById("month");
var year=document.getElementById("year");
if(((month.value).localeCompare("Select")===0)&&((year.value).localeCompare("Select")===0
))
data++;
if((n==="")||(address==="")||(pin.length!==6)||((coun.value).localeCompare("Select")===0)||(tem
p===2)||(count>=2)||(mob.length!==10))
data++;
if(data===0)
window.open("https://www.w3schools.com/jsref/met_win_open.asp","_blank");
else
alert("Invalid Details");
}
function col()
{
var arr=["pink","lightgreen","goldenrod","brown","lightblue","steelblue","salmon"];
var a=parseInt(Math.random()*(7-0));
document.body.style.backgroundColor = arr[a];
}
</script>
</head>
<body>
<h2 align="center">Test Java Script Form Validation</h2><br>
<form>
<table width="40%" align="center">
<tr><td>Name<sup>*</sup></td>
<td><input type="text" maxlength="20" name="name"></td></tr>
<tr>
<td>Date of Birth</td>
<td><select id="month">
<option value="Select">Select</option>
<option value="January">January</option>
<option value="February" >February</option>
<option value="March" >March</option>
<option value="April" >April</option>
<option value="May" >May</option>
<option value="June" >June</option>
<option value="July" >July</option>
<option value="August" >August</option>
<option value="September" >September</option>
<option value="October" >October</option>
<option value="November" >November</option>
<option value="December" >December</option>
</select>
<select id="year">
<option value="Select">Select</option>
<option value="1998">1998</option>
<option value="1999" >1999</option>
</select></td>
<td></td>
</tr>
<tr><td>Address<sup>*</sup></td>
<td><textarea name="add" rows="5" cols="22"></textarea></td></tr>
<tr>
<td>Zip Code<sup>*</sup></td>
<td><input type="number" name="zip"></td>
</tr>
<tr>
<td>Country<sup>*</sup></td>
<td><select id="country"><option value="Select">Select</option>
<option value="India">India</option>
<option value="Hungary">Hungary</option>
<option value="Indonesia">Indonesia</option>
<option value="USA">USA</option>
<option value="China">China</option>
</select></td>
</tr>
<tr>
<td>Gender<sup>*</sup></td>
<td><input type="radio" name="gen" value="Male">Male
<input type="radio" name="gen" value="Female">Female</td>
</tr>
<tr>
<td>Preferences<sup>*</sup></td>
<td><input type="checkbox" name="options[]" value="Red">Red
<input type="checkbox" name="options[]" value="Blue">Blue
<input type="checkbox" name="options[]" value="Green">Green</td>
</tr>
<tr>
<td>Phone<sup>*</sup></td>
<td><input type="number" name="phone"></td>
</tr>
<tr>
<td>Email<sup>*</sup></td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Password(6-8 characters)<sup>*</sup></td>
<td><input type="password" name="pass" maxlength="8"></td>
</tr>
<tr>
<td>Verify Password<sup>*</sup></td>
<td><input type="password" name="vepass" maxlength="8"></td>
</tr>
<tr>
<td></td>
<td> <br><input type="button" value="Send" onclick="validate(this.form)">
<input type="reset" value="Clear"></td>
<td></td>
</tr>
</table>
</form>
<input type="button" value="Background Color" onclick="col();">
<p id="p1"></p>
</body>
</html>
Output:

Web Technologies

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Technologies

Caricato da

Copyright:

Formati disponibili

ITA1007 Web Development

Name: Yeswin N Faculty: Brindha K

Potrebbero piacerti anche