Scribd
Upload
37 views9 pages

Web Technology Lab Exam: 1. Design A Webpage To Create Time Converter

The document contains code for creating 3 webpages - a time converter, calculator, and McDonald's menu selection page. The time converter webpage allows a user to enter seconds and displays the equivalent time in minutes, hours, days, months, and years. The calculator webpage allows a user to enter two numbers and perform calculations like addition, subtraction, multiplication, division, and modulus. It displays the results. The McDonald's menu selection webpage displays a menu from which the user can select items which are added to a textarea. It calculates and displays the total cost on clicking a button and clears the selections on another button click.

Uploaded by

Anonymous OKSzmYl7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views9 pages

Web Technology Lab Exam: 1. Design A Webpage To Create Time Converter

The document contains code for creating 3 webpages - a time converter, calculator, and McDonald's menu selection page. The time converter webpage allows a user to enter seconds and displays the equivalent time in minutes, hours, days, months, and years. The calculator webpage allows a user to enter two numbers and perform calculations like addition, subtraction, multiplication, division, and modulus. It displays the results. The McDonald's menu selection webpage displays a menu from which the user can select items which are added to a textarea. It calculates and displays the total cost on clicking a button and clears the selections on another button click.

Uploaded by

Anonymous OKSzmYl7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Web Technology Lab Exam

1. Design a webpage to create time converter.

Code:
<html>
<head>
<title>Time Converter</title>
<style type="text/css">
td.a{padding: 10px;
white-space: 30px;}
h1{text-align:
center; color: #fed42a;}
table.b{border-collapse: separate;
border-spacing: 30px;}
body{background-color: #cf6227;}
</style>
1

</head>
<body>
<h1>Time Converter</h1>
<img src="tm.jpg" align="right">
<table>
<tr><td class="a">
<table class="b">
<tr><td>Seconds</td><td>:</td><td><input type="text" id="sec"></td>
</tr>
<tr>
<td>Hours</td><td>:</td><td><input type="text" id="hrs" readonly></td>
</tr>
<tr>
<td>Months</td><td>:</td><td><input type="text" id="mon" readonly></td>
</tr>
</table>
</td>
<td class="a">
<table class="b">
<tr>
<td>Minutes</td><td>:</td><td><input type="text" id="min" readonly></td>
</tr>
<tr>
<td>Days</td><td>:</td><td><input type="text" id="day" readonly></td>
</tr>
<tr>
<td>Years</td><td>:</td><td><input type="text" id="yrs" readonly></td></tr>

</table>
</td>
</tr>
<tr>
<td align="center"><button onclick="fun()">Convert</button></td>
<td align="center"><button onclick="res()">Reset</button></td>
</tr>
</table>
<script type="text/javascript">
function fun()
{var a=document.getElementById("sec").value;
a=Number(a);
document.getElementById("min").value=(a/60);
document.getElementById("hrs").value=(a/3600);
document.getElementById("day").value=(a/(3600*24));
document.getElementById("mon").value=(a/(3600*24*30));
document.getElementById("yrs").value=(a/(3600*24*365));}
function res()
{document.getElementById("sec").value="";
document.getElementById("min").value="";
document.getElementById("hrs").value="";
document.getElementById("day").value="";
document.getElementById("mon").value="";
document.getElementById("yrs").value="";}
</script>
</body>
</html>

2. Create a webpage to perform various calculations.

Code:
<html>
<head>
<title>Calculator</title>
<style>
table.t1{border:1px solid;

width:400px;

padding:0px;

color:#ffffff;}

table.t2{width:400px; padding:0px;}
.fm{border:1px solid;

padding:10px; text-align:center;

color:#ffffff;}

.col{color:#ffffff;}
.hdng{text-align:center;

text-decoration:underline;

font-family:Bookman Old Style;

color:#ffffff;}
body.b1{background-color:#333333;}
</style>
</head>
<body class="b1">

<h1 class="hdng">Calculator</h1><br>
<table class="t2">
<tr>
<td class="col"><b>Enter Ist No. (A)</b></td><td class="col">&nbsp
<b>:</b>&nbsp</td><td><input type="text" id="i1"></td>
</tr>
<tr>
<td class="col"><b>Enter IInd No.(B)</b></td><td class="col">&nbsp
<b>:</b>&nbsp</td><td><input type="text" id="i2"></td>
<tr><td><button onclick="fun()">Calculate</button></td>
<td></td>
<td><button onclick="res()">Reset</button></td></tr>
</table><br><hr><br>
<table class="t1">
<tr><th class="fm">Sum</th>
<td class="fm">A+B</td>
<td id="c1" class="fm">(a+b)</td></tr>
<tr><th class="fm">Difference</th>
<td class="fm">A-B</td>
<td id="c2" class="fm">(a-b)</td></tr>
<tr><th class="fm">Multiply</th>
<td class="fm">A*B</td>
<td id="c3" class="fm">(a*b)</td></tr>
<tr><th class="fm">Division</th>
<td class="fm">A/B</td>
<td id="c4" class="fm">(a/b)</td></tr>
<tr><th class="fm">Modulus</th>
<td class="fm">A%B</td>

<td id="c5" class="fm"> (a%b)</td></tr>


</table>
<script type="text/javascript">
function fun()
{

var a=document.getElemetById("i1").value;
var b=document.getElementById("i2").value;
a=Number(a);
b=Number(b);
document.getElementById("c1").innerHTML=(a+b);
document.getElementById("c2").innerHTML=(a-b);
document.getElementById("c3").innerHTML=(a*b);
document.getElementById("c4").innerHTML=(a/b);
document.getElementById("c5").innerHTML=(a%b);

function res()
{

document.getElementById("i1").value="";
document.getElementById("i2").value="";
document.getElementById("c1").innerHTML="(a+b)";
document.getElementById("c2").innerHTML="(a-b)";
document.getElementById("c3").innerHTML="(a*b)";
document.getElementById("c4").innerHTML="(a/b)";
document.getElementById("c5").innerHTML="(a%b)";

</script>
</body>
</html>

3. Create a webpage of Mc Donalds with options for selecting items from given menu which
is displayed in textarea below and total is generated on clicking on Total Cost. Textarea
is cleared on clicking on clear.

Code:
<html>
<head>
<title>McDonald's</title>
<style type="text/css">
h1{text-align: center;

font-weight: bold;

color: #ffff00;}

th,td{width:200px;

text-align: left; vertical-align: top;}

textarea{resize:none;

vertical-align: top;}

body{background-color: #ff0000;}
</style>
</head>
<body>
<h1>Welcome To The World Famous Fast Food Center<br>McDonald's!!!</h1>
<br><br>Select the menu items of your choice:<br><br>
<img src="mac1.png" align="right">
7

<table>
<tr><th>Major Dishes :</th>
<th>Starters :</th>
<th>Miscellaneous :</th></tr>
<tr><td>
<select id="md" size=4 onchange="sendId(this)">
<option value="80">Mc Burger</option>
<option value="90">Fish Fillets</option>
<option value="35">Veg Burger</option>
<option value="60">Chicken Burger</option>
</select></td>
<td><select id="st" size=4 onchange="sendId(this)">
<option value="45">French Fries</option>
<option value="60">Nuggets</option>
<option value="40">Hash Browns</option>
<option value="30">Mc Aloo Tikki</option>
</select></td>
<td><select id="ms" onchange="sendId(this)">
<option value="70">Milkshakes</option>
<option value="40">Soft Drinks</option>
<option value="50">Softy</option>
</select></td></tr>
</table>
<p>The item selected from the menu are:<br>
<textarea rows="10" cols="80" id="ta" readonly></textarea>&nbsp&nbsp<br><br>
<button onclick="cost()">Total Cost</button>&nbsp&nbsp
<button onclick="clr()">Clear</button></p>

<script type="text/javascript">
var total=0;
function gst(e)
{

var elt = document.getElementById(e);


if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;

function sendId(i)
{

i=i.id;
var a=gst(i);
var b=document.getElementById(i).value;
b=Number(b);
document.getElementById("ta").innerHTML+="\n"+a+"--->"+b;
total+=b;

function cost()
{document.getElementById("ta").innerHTML+="\n\nYou have to pay Rs."+total+" only.";}
function clr()
{

document.getElementById("ta").innerHTML="";
total=0;}

</script>
</body>
</html>

You might also like