Sei sulla pagina 1di 14

1.

Write a script to take three numbers from the user and display the greatest number out of
three.
Code:
<html>
<head>
<script>
function largest()
{
var num1, num2, num3;
num1 = Number(document.getElementById("N").value);
num2 = Number(document.getElementById("M").value);
num3 = Number(document.getElementById("O").value);
if(num1>num2 && num1>num3)
{
window.alert(num1+"-is greatest");
}
else if(num2>num1 && num2>num3)
{
window.alert(num2+"-is greatst");
}
else if(num3>num1 && num3>num1)
{
window.alert(num3+"is greatest");
}
}
</script>
</head>
<body>
<h1>Calculate largest among three numbers</h1>
<hr color="cyan">
<br>
Enter number 1: <input type="text" id="N"></input><br>
Enter number 2: <input type="text" id="M"></input><br>
Enter number 3: <input type="text" id="O"></input><br>
<hr color="cyan">
<center><button onclick="largest()">OK</button>
</body>
</html>
OUTPUT:
2. Create two functions that calculate properties of a circle. Create a function called
calcCircumfrence to Pass the radius to the function and Calculate the circumference based
on the radius and output "The circumference is NN". Create a function called calcArea to
Pass the radius to the function. Calculate the area based on the radius, and output "The
area is NN".

Code:

<!DOCTYPE html>

<html>

<head>

<title>Area Of Circle and Circumference</title>

</head>

<body>

<script>

function calcCircumference()

var r=document.getElementById('n1').value;

var calc=2*22/7*r;

document.getElementById('output1').innerHTML="Circumferenceof Circle is "+calc;

function calcArea()

var r=document.getElementById('n1').value;

var area=22/7*r*r;

document.getElementById('output2').innerHTML="Area of Circleis"+area;

</script>

Enter the Radius:<input type="text" id="n1" name="radius" placeholder>

<br>

<button type="button"onclick="calcCircumference()">

Circumference</button>

<button type="button" onclick="calcArea()">Area</button>

<br>
<p id="output1"></p>

<p id="output2"></p>

</body>

</html>

OUTPUT:

3. Complete the following function called Count that takes an array of integers and the size
of the array, and return the number of items in the array that is greater than 13 and less
than 29.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Count the array Of Integers</title>
</head>
<body>
<script type="text/javascript">
function Count()
{
var arr=new Array(48,36,15,14,3,8,24,6,18,79,26,29,13);
for(var i=0;i<arr.length;i++)
{
if(arr[i]>13 && arr[i]<29)
{
var data=arr[i];
document.getElementById('output').append(data+" ,");
}
}
}
</script>
Integer Data In Array:48,36,15,14,3,8,24,6,18,79,26,29,13 <br>
<button type="button" onclick="Count()">
Count Numbers</button>
<div id="output">
</div>
</body>
</html>

OUTPUT:

4. Write a JavaScript to implement Age calculator which displays age in days, months
and years.

CODE:
<!DOCTYPE html>
<html>
<head>
<title>Age CAlculator</title>
</head>
<body>
<h2>Age Calculator</h2>
<label for="dob"> Date Of Birth: </label>
<input type="date" id="date_of_birth">
<input type="button" value="Calculator age" onclick="ageCalculator()">
<h3>Age:</h3>
<div id="age">
</div>
<script src="4.js">
</script>
</body>
</html>

$(document).ready(function(){
$("#calculate").click(function(){
var mdate = $("#birth_date").val().toString();
var yearThen = parseInt(mdate.substring(0,4), 10);
var monthThen = parseInt(mdate.substring(5,7), 10);
var dayThen = parseInt(mdate.substring(8,10), 10);

var today = new Date();


var birthday = new Date(yearThen, monthThen-1, dayThen);

var differenceInMilisecond = today.valueOf() - birthday.valueOf();

var year_age = Math.floor(differenceInMilisecond / 31536000000);


var day_age = Math.floor((differenceInMilisecond % 31536000000) /
86400000);
if ((today.getMonth() == birthday.getMonth()) && (today.getDate() ==
birthday.getDate())) {
alert("Happy B'day!!!");
}

var month_age = Math.floor(day_age/30);

day_age = day_age % 30;

if (isNaN(year_age) || isNaN(month_age) || isNaN(day_age)) {


$("#exact_age").text("Invalid birthday - Please try again!");
}
else {
$("#exact_age").html("You are<br/><span id=\"age\">" + year_age + " years
" + month_age + " months " + day_age + " days</span> old");
}
});
});
OUTPUT:

5. Write a program that reads number of miles, cost of a gallon of gas, and car gas
consumption (miles per gallon) and then determines the cost of a specific trip. The
output should be displayed using document.writeln
Code:

6. 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="Ayyappan.jpg" width="400px" height="400px">
<button class="as">Next</button>
<script>
var imgs = ['Ayyappan.jpg'];
var num=0;
function addimg()
{
var im = document.getElementById("op");
var scri = im.value;
var len = imgs.length;
imgs[len] = scri ;
alert(imgs.length);
}
function next()
{
var slide = document.getElementById("slider");
num++;
if ( num >= imgs.length )
{
num=0;
}
slide.src = imgs[num];
}
function prev()
{
var sl = document.getElementById("slider");
num--;
if (num <0)
{
num = imgs.length-1;
}
sl.src=imgs[num];
}
function sart(){
setInterval(next,5000);}
</script>
</body>
</html>
OUTPUT:

7. 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:

8. 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","ASSAUL
T","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:
12. 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 HTML 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>
14.Create a script that uses regular expressions to validate credit card numbers. Major credit card
numbers must be in the following formats:  American Express—Numbers start with 34 or 37 and
consist of 15 digits.  Diners Club—Numbers begin with 300 through 305, or 36 and 38and consists
of 14 digits  Discover—Numbers begin with 6011 or 65 and consist of 16 digits.  JCB—Numbers
beginning with 2131 or 1800 consist of 15 digits,while numbers beginning with 35 consist of 16
digits.  MasterCard—Numbers start with the numbers 51 through 55 and consistof 16 digits. 
Visa—Numbers start with a 4; new cards consist of 16 digits and old cards consist of 13 digits.

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)

count++; temp=parseInt(number/100000000000000); if(temp===65)

count++;

else if(name.localeCompare("Master Card")===0)

{
if(number.length===16)

temp=parseInt(number/100000000000000); if((temp>=51)&&(temp<=55))

count++;

else if(name.localeCompare("Visa")===0)

if(number.length===13)

temp=parseInt(number/1000000000000); if(temp===4)

count++;

else if(number.length===16)

temp=parseInt(number/1000000000000000); 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:

Potrebbero piacerti anche