Professional Documents
Culture Documents
15mis0429 (Javascript)
15mis0429 (Javascript)
15mis0429 (Javascript)
JAVASCRIPT
NAME: B.NIKHILA
REG.NO:15MIS0429
SLOT: L9+10
FACULTY: JAYAKUMAR S
Question 1:
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.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>"Image Slider"</title>
<style>
.as{
margin-top:300px;
float:left;
height:50px;
}
img{
float:left;
margin-top:10px;
margin-right:10px;
margin-left:10px;
}
</style>
</head>
<body>
<label>Enter the image path: </label><input id="op" type="text" size = 20px > <button
onclick="addimg()"> Add Image </button> <button onclick="sart()">Start slide show
</button><br>
<button class="as">Prev</button>
<img id="slider" src="a.png" width="400px" height="400px">
<button class="as">Next</button>
<script>
var imgs = ['a.png'];
var num=0;
function addimg()
{
var im = document.getElementById("op");
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
CODE:
<html>
<head>
<title>Greeting Card</title>
<style>
#main
{
background-image:url('');
height:700px;
width:600px;
border:5px double red;
background-color:#65d396;
margin-left:250px;
margin-top:20px;
position:absolute;
}
#imga
{
position:absolute;
top:105px;
left:85px;
height:440px;
width:420px;
border:2px solid black;
}
#content{
position:absolute;
top:25px;
left:190px;
}
#person{
position:absolute;
top:55px;
left:255px;
}
#msg{
position:absolute;
bottom:10px;
left:80px;
width:420px;
height:100px;
border:2px solid black;
}
#change{
width:350px;
height:680px;
position:absolute;;
top:130px;
right:25px;
border:4px dashed blue;
padding:15px;
}
#head{
background-color:yellow;
border:2px dashed blue;
text-align:center;
margin-top:25px;
}
</style>
</head>
<body>
<div id=head>
<h1>ONLINE GREETING GENRATOR </h1>
</div>
<div id="main">
<span id=content>HAPPY BIRTHDAY </span>
<span id=person>RAJESH</span>
<div id="imga">
<img id="kl" src="file:///F:/studies/fall%20sem%2017-18/swe1008/notepad++/cake.jpg" width=420px
height=440px >
</div>
<div id=msg>
<p id="bmsg"></p>
</div>
</div>
<div id=change>
<h2>DESIGN YOUR GREETING</h2>
url:<input type="text" id ="ur" size=25 >
<button onclick="im()" >change image</button>
<button onclick="document.getElementById('kl').src='flower.png'" >back</button><br>
<h3>Position Image </h3>
<button onclick="document.getElementById('imga').style.left='20px'" >Left</button>
<button onclick="document.getElementById('imga').style.left='85px'" >center</button>
<button onclick="document.getElementById('imga').style.left='140px'" >Right</button><br>
background url :<input type="text" id="lp" size=25"><br>
<button type="button" onclick="BACKGR()" >Background Image</button><br>
Background color:<input type="color" id="fg"><button type="button"
onclick="backcolor()">Change</button><br><br>
Edit Greeting:<br>
<button type="button" onclick="editText()" >Edit Greeting</button><br>
<button type="button" onclick="e1()">Edit Title </button><br>
<button type="button" onclick="e2()">Edit Name </button><br>
<button type="button" onclick="e3()">Write Message </button><br><br>
Change size:<br>
<button type="button" onclick="s1()">Change title size </button><br>
<button type="button" onclick="s2()">Change name size </button><br>
<button type="button" onclick="s3()">Change message size</button><br><br>
Your color<br> <input type="color" id="pc"><button type="button" onclick="cl()">Change
Title</button><br>
<input type="color" id="pc1"><button type="button" onclick="cl1()">Change Name</button><br>
<input type="color" id="pc2"><button type="button" onclick="cl2()">Change
Message</button><br><br>
<script>
function im(){
var u = document.getElementById('ur');
var y =u.value;
document.getElementById('kl').src=y;
}
function cl(){
var t = document.getElementById('pc');
var c = t.value;
document.getElementById('content').style.color=c;
}
function cl1(){
var t = document.getElementById('pc1');
var c = t.value;
document.getElementById('person').style.color=c;
}
function cl2(){
var t = document.getElementById('pc2');
var c = t.value;
document.getElementById('bmsg').style.color=c;
}
function BACKGR(){
var t =document.getElementById('lp');
var u = t.value;
document.getElementById('main').style.backgroundImage=u;
}
function backcolor()
{
var t =document.getElementById('fg');
var u = t.value;
document.getElementById('main').style.backgroundColor=u;
}
function editText()
{
var kl = prompt("Enter the title of the greeting");
var nm = prompt("Enter the name of the person");
var msge = prompt("Enter the message for the greeting");
document.getElementById('content').innerHTML=kl;
document.getElementById('person').innerHTML=nm;
document.getElementById('bmsg').innerHTML=msge;
}
function e1(){
var kl = prompt("Enter the title of the greeting");
document.getElementById('content').innerHTML=kl;
}
function e2(){
var nm = prompt("Enter the name of the person");
document.getElementById('person').innerHTML=nm;
}
function e3(){
var msge = prompt("Enter the message for the greeting");
document.getElementById('bmsg').innerHTML=msge;
}
function s1(){
var jk=prompt("Enter the size title of the greeting");
document.getElementById('content').style.fontSize= jk;
}
function s2(){
var jk=prompt("Enter the size of name");
document.getElementById('person').style.fontSize= jk;
}
function s3(){
var jk=prompt("Enter the size of message");
document.getElementById('bmsg').style.fontSize= jk;
}
</script>
</div>
</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.
CODE:
<html>
<head>
<title>Online Resume</title>
<script type="text/javascript"> 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.
CODE:
<html>
<head>
<title>Parking Charges</title>
<script type="text/javascript"> 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:
CODE:
<html>
<head>
<title>Validate Credit Card</title>
<script type="text/javascript"> function validate(form)
{
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(number.length===14)
{
temp=parseInt(number/1000000000000); if((temp===36)||(temp===38))
count++; temp=parseInt(number/100000000000); if((temp>=300)&&(temp<=305))
count++;
}
}
else if(name.localeCompare("JCB")===0)
{
if(number.length===15)
{
temp=parseInt(number/100000000000); if((temp===2131)||(temp===1800))
count++;
}
else if(number.length===16)
{
temp=parseInt(number/100000000000000); if(temp===35)
count++;
}
}
else if(name.localeCompare("Discover")===0)
{
if(number.length===16)
{
temp=parseInt(number/1000000000000); if(temp===6011)
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.
CODE:
<html>
<head>
<title>Word Decoder</title>
<script type="text/javascript"> 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.”
CODE:
<html>
<head>
<title>Balance Checking</title>
<script type="text/javascript"> 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.
CODE:
<html>
<head>
<title>Telephone Directory</title>
<script type="text/javascript"> 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:
OUTPUT:
Change color of background at each click of button or refresh a page
Code:
<html>
<head>
<script type="text/javascript"> function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var
color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 15)];
}
document.body.style.background= color;
}
</script>
</head>
<body onclick="get_random_color()">
<b>Click me to change my color!</b>
</body>
</html>
Output:
Display calendar for the month and year selected from the combo box OnMouseOverEvent
Code:
<html>
<head>
<script language="javascript" type="text/javascript"> var i=0,j,cnt=0,c; var
days=["sun","mon","tue","wed","thu","fri","sat"]; var yr,k,mon; var
last=[31,28,31,30,31,30,31,31,30,31,30,31]; var
mn=["January","February","March","April","May","June","July","August","S
eptember","October","November","December"]; function my()
{ yr=document.form1.qual.value; k=document.form1.qual1.value; if(yr%4==0&&yr%100==0||yr%400){las
t[1]=29;} document.write("<table width='50%' height='60%' border='9' bgcolor='Cyan'>");
document.write("<tr><td colspan='7'><center>"+ mn[k]+" "+yr+"</center></td></tr>");
document.write("<tr>"); for(i=0;i<=6;i++)
{document.write("<td>"+days[i]+"</td>");} document.write("</tr>"); var date2=new Date(yr,k,1); var
daz=date2.getDay(); cnt=0; for(i=0;i<=daz-1;i++)
{document.write("<td></td>"); cnt=cnt+1; } for(j=1;j<=last[k];j++)
{ c=cnt%7; if(c==0)
{
document.write("</tr><tr><td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>");cnt++;
}
else
{
document.write("<td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>"); cnt++;
} } document.write("</tr></table>");
}
</script>
</head>
<body bgcolor="DarkSalmon">
<form name="form1">
<select name="qual">
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option> </option>
</select>
<select name="qual1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option> </option>
</select>
<input type="button" value="ok" onclick=my()></input></form>
</body>
</html>
OUTPUT:
OnMouseoverEvent
Code:
<html>
<head>
<script language="javascript"> function preload()
{ topon=new Image(100,50); topon.src="waterfall.jpg";