Academics Education Web Application

Design a Program to Input the Temperatures of 2 countries of January, February and March. Also create a SUBMIT button; on clicking which will display the averages of the temperatures of each country and an Alert message below the submit button.

pexels-negative-space-169573

In this program we considered the user input of two countries namely India and Canada.

The user can input the values according to their choice.

On clicking the submit button; the system will display the average of the temperatures of India and Canada separately. Also, an Alert message will be displayed in the next row (strictly READONLY).

Let’s have the look to the output setup:

The above image shows the design of the webpage.

Now lets create the program and there after we will see how it works.

<html>

<head>

<title>Temperature Averages</title>

<script>

function avg()

{

var a=parseInt(frm.t1.value);

var b=parseInt(frm.t2.value);

var c=parseInt(frm.t3.value);

var d=parseInt(frm.t4.value);

var e=parseInt(frm.t5.value);

var f=parseInt(frm.t6.value);

var g=(a+c+e)/3;

var h=(b+d+f)/3;

document.frm.t7.value=“AVG:”+g

document.frm.t8.value=“AVG:”+h

document.frm.t9.value=“you are supposed to wear woolen clothes”

}

</script>

</head>

<body>

<h1><center>Temperature Averages</center></h1>

<form name= “frm”>

<table border= “2” align=”center”>

<tr><th>TEMPERATURE</th><th>INDIA</th><th>CANADA</th></tr>

<tr><td>JAN</td><td><input type=“text” name=t1 value=” ” size=“50%”></td>

<td><input type=“text” name=t2 value=” ” size=“50%”></td></tr>

<tr><td>FEB</td><td><input type=“text” name=t3 value=” ” size=“50%”></td>

<td><input type=“text” name=t4 value=” ” size=“50%”></td></tr>

<tr><td>MAR</td><td><input type=“text” name=t5 value=” ” size=“50%”></td>

<td><input type=“text” name=t6 value=” ” size=“50%”></td></tr>

<tr><td><input type= “button” onclick=avg() value=“submit”></input></td>

<td><input type=“text” name=t7 value=” ”  size=“50%”READONLY></td>

<td><input type=“text” name=t8 value=” ” size=“50%” READONLY></td></tr>

<tr><td>Alert</td>

<td colspan=“2”><input type= “text” name=t9 value=” ” size=“100%”READONLY></input></td></tr>

</table>

</form>

</body>

</html>

Working of the JS CODE:

    Ankana Saha

    Hi,Ankana here!
    I'm passionate on writing poems and experimenting out various health care and skin care DIY hacks. And of course sharing those with you!
    So stay tuned Guys!!

    10 thoughts on “Design a Program to Input the Temperatures of 2 countries of January, February and March. Also create a SUBMIT button; on clicking which will display the averages of the temperatures of each country and an Alert message below the submit button.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Back To Top