Scribd Logo
Upload

Welcome to Scribd!

  • Web Lab 5

    Uploaded by

    Muhammad Aashir
    25 views10 pages
    The document describes a lab exercise to design a calculator interface using HTML, CSS, and JavaScript. It includes code for a basic calculator interface with buttons for numbers, operators, and functions like square, cube, sine, cosine, and tangent. The code includes JavaScript functions to perform the calculations for each mathematical function when the corresponding button is clicked. It also provides examples of output code for additional JavaScript exercises involving prompts, tables, series, and menus.

    Original Description:

    web lab 5

    Original Title

    WEB_LAB_5

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a lab exercise to design a calculator interface using HTML, CSS, and JavaScript. It includes code for a basic calculator interface with buttons for numbers, operators, and functions like square, cube, sine, cosine, and tangent. The code includes JavaScript functions to perform the calculations for each mathematical function when the corresponding button is clicked. It also provides examples of output code for additional JavaScript exercises involving prompts, tables, series, and menus.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    25 views10 pages

    Web Lab 5

    Uploaded by

    Muhammad Aashir
    The document describes a lab exercise to design a calculator interface using HTML, CSS, and JavaScript. It includes code for a basic calculator interface with buttons for numbers, operators, and functions like square, cube, sine, cosine, and tangent. The code includes JavaScript functions to perform the calculations for each mathematical function when the corresponding button is clicked. It also provides examples of output code for additional JavaScript exercises involving prompts, tables, series, and menus.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 10

    Muhammad Aashir Khan

    02-134201-032 LAB-5

    Lab 05: JavaScript and HTML Document

    Exercises

    Design a proper interface of a calculator using Html , CSS and javaScript.Enhance the given example in
    the
    <html>
    <head>
    <title></title>
    <style></style>
    <script >
    function sin1()
    {
    var s1=document.getElementById("t1").value;
    var s=Math.sin(s1);
    document.getElementById("t1").value=s;
    }
    function cos1()
    {
    var s1=document.getElementById("t1").value;
    var s=Math.cosine(s1);
    document.getElementById("t1").value=s;
    }
    function tan1()
    {
    var s1=document.getElementById("t1").value;
    var s=Math.tan(s1);
    document.getElementById("t1").value=s;
    }
    function square1()
    {
    var s1=document.getElementById("t1").value;
    var s=s1*s1;
    document.getElementById("t1").value=s;
    }
    function cube1()
    {
    var s1=document.getElementById("t1").value;
    var s=s1*s1*s1;
    document.getElementById("t1").value=s;
    }
    function log1()
    {
    var s1=document.getElementById("t1").value;
    var s=Math.log(s1);
    document.getElementById("t1").value=s;
    }
    function root1()
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    {
    var s1=document.getElementById("t1").value;
    var s=Math.sqrt(s1);
    document.getElementById("t1").value=s;
    }
    </script>
    </head>
    <body>
    <form name=calc>
    <center>
    <br><br>
    <input id="t1" type="textfield" name="action" value="" size=18>
    <br>
    <table width=12%>
    <tr>
    <td><input type=button name=1 value=" 1 "
    onclick=document.calc.action.value+=1></td>
    <td><input type=button name=2 value=" 2 "
    onclick=document.calc.action.value+=2></td>
    <td><input type=button name=3 value=" 3 "
    onclick=document.calc.action.value+=3></td>
    <td><input type=button name=3 value=" +
    "onclick=document.calc.action.value+='+'></td>
    </tr>
    <tr>
    <td><input type=button name=4 value=" 4 "
    onclick=document.calc.action.value+=4></td>
    <td><input type=button name=5 value=" 5 "
    onclick=document.calc.action.value+=5></td>
    <td><input type=button name=6 value=" 6 "
    onclick=document.calc.action.value+=6></td>
    <td><input type=button name=3 value=" - "
    onclick=document.calc.action.value+='-'></td>
    </tr>
    <tr>
    <td><input type=button name=7 value=" 7 "
    onclick=document.calc.action.value+=7></td>
    <td><input type=button name=8 value=" 8 "
    onclick=document.calc.action.value+=8></td>
    <td><input type=button name=9 value=" 9 "
    onclick=document.calc.action.value+=9></td>
    <td><input type=button name=3 value=" * "
    onclick=document.calc.action.value+='*'></td>
    </tr>
    <tr>
    <td><input type=button name=0 value=" 0 "
    onclick=document.calc.action.value+=0></td>
    <td><input type=reset name=reset value=Reset ></td>
    <td><input type=button name='=' value=" =
    "onclick=document.calc.action.value=eval(document.calc.action.value)></td>
    </tr>
    <tr>
    <td><input type=button name=sqrt value=" Sqrt"
    onclick="root1()"></td>
    <td><input type=button name=log value=" Log "
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    onclick="log1()"></td>
    <td><input type=button name=square value=" Square"
    onclick="square1()"></td>
    <td><input type=button name=cube value=" Cube"
    onclick="cube1()"></td>
    </tr>
    <tr>
    <td><input type=button name=sin value="Sin"
    onclick="sin1()"></td>
    <td><input type=button name=cos value="Cos"
    onclick="cos1()"></td>
    <td><input type=button name=tan value="Tan"
    onclick="tan1()"></td>
    <td><input type=button name=quad value="Quad" onclick=></td>
    </tr>
    </table>
    </center>
    </form>
    </body>
    </html>

    OUTPUT:

    <html>

    <head>
    <title>Display alert box, confirmation box, prompt box and call a
    function.</title> <style> input {
    font-size: 26px;
    background-color:#09F;
    margin-top: 20px;
    padding: 10px; border-
    radius: 15%;
    }
    </style>
    <script>
    function alt1()
    {
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    alert("This is Salman Ahmed\nFrom Function");


    }
    </script>
    </head>
    <body><center><br><br>
    <h1>In this exercise, we taste our first JavaScript program.</h1>
    <input type="button" name="b1" value="Alert" onClick="alert('This is Salman n
    Taimoor')" />
    <input type="button" name="b2" value="Prompt" onClick="prompt('Enter Your
    Name:')" />
    <input type="button" name="b3" value="Confirmation" onClick="confirm('This is
    a Confirmation Box')" />
    <input type="button" name="b4" value="Alert Text" onClick="alt1()" />
    </center>
    </body>
    </html>

    OUTPUT:

    <html>
    <head>
    <title></title>
    <style></style>

    </head>
    <body>
    <script>
    var n=prompt("Enter The number for table:\n");
    var table="Table Of The Number You Have Enter:<br><br>";
    for(var i=1;i<11;i++)
    {
    table+=n +" * "+i+" = "+(i*n)+"<br>";
    }
    document.write(table);

    var n=prompt("Enter The number for Series:\n");


    var series="Series Of The Number You Have Enter:<br><br>";
    document.write("<br>"+series); for(var i=1;i<=n;i++)
    {
    document.write(i+" ");
    }
    document.writeln("<br>");
    alert("Enter Base and Power for Calculation:");
    var base=prompt("Enter The number for Base:\n");
    var power=prompt("Enter The number for Power:\n");
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    document.write("<br>Power Of The Number You Have Enter:<br><br>");


    var ans=1;
    for(var i=1;i<=power;i++)
    {
    ans=ans*base;
    }
    document.writeln("<br>"+base+" exp "+power+" = "+ans);

    var n=prompt("Enter The number for Series in even or odd:\n");


    if(n%2==1) {
    document.write("<br><br>Series Of The Odd Numbers You Have Enter:<br>");
    for(var i=1;i<=n;i+=2)
    {
    document.write(i+" ");
    }
    }
    else
    {
    document.write("<br><br>Series Of The Even Numbers You Have Enter:<br>");
    for(var i=0;i<=n;i+=2)
    {
    document.write(i+" ");
    }
    }

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

    OUTPUT:
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    <html>
    <head>
    <title>Menu System</title>
    <style> h1{text-decoration: underline; color: chocolate; font-size: 50pt;
    text-align: center;} body { background-attachment:fixed; background-image:
    url("brua.jpg"); background:cover; }
    div.gallery img
    {
    width: 100%;
    height: 25%; border-
    style:groove;
    }
    div.gallery
    {
    float: left;
    width: 180px;
    margin-left:240px;
    margin-bottom: 20px;
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    } div.desc
    { padding: 15px; text-
    align: center; font-weight:
    bold; text-decoration-line:
    underline; border-style: inset;
    margin-bottom: 10px;
    }
    #label_menu
    { font-style:italic;
    color:black; font-
    weight: bold; padding:
    35;
    }
    #bill
    {
    clear: both;
    }
    </style>
    <script language="javascript">
    var starter = [0,250,200,150];
    var major = [0,450,150,750];
    var desert = [0,150,250,250];
    var total=0; function ShowItems()

    { total=
    0;
    var S1=document.getElementById("menustarter").selectedIndex;
    var s1=document.getElementById("menustarter").options; var
    M2=document.getElementById("menumajor").selectedIndex; var
    m2=document.getElementById("menumajor").options; var
    D3=document.getElementById("menudesert").selectedIndex; var
    d3=document.getElementById("menudesert").options; var
    A1=document.getElementById("q1").selectedIndex; var
    a1=document.getElementById("q1").options;

    var B1=document.getElementById("q2").selectedIndex;
    var b1=document.getElementById("q2").options;

    var C1=document.getElementById("q3").selectedIndex;
    var c1=document.getElementById("q3").options;

    document.FastFood.textbox1.value = "\nFromStarters:\n"
    +s1[S1].text+"\nQuantity: "+a1[A1].text +"\n\n" +
    "\nFrom Major Foods:\n" + m2[M2].text+"\nQuantity:
    "+b1[B1].text + "\n\n"+
    "\nFrom Desert:\n" + d3[D3].text+"\nQuantity:
    "+c1[C1].text + "\n\n";

    total += starter[S1]*a1[A1].text + major[M2]*b1[B1].text +


    desert[D3]*c1[C1].text;
    } function FinalBill()
    { document.FastFood.textbox2.value = "Rs . " +
    total;
    }
    </script>
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    </head>
    <body>
    <h1>Fast Food Resturant</h1>
    <form name="FastFood">
    <div class="gallery">
    <img src="starter.jpg"/>
    <div class="desc">Starter</div>
    <div >
    <lable id="label_menu">Menu:</lable>
    <p><label>Item:&nbsp;</label>
    <label style="padding-left: 70px;">Quantity:</label>
    <select name="" id="menustarter">
    <option value=""></option>
    <option value="soup">Soup, 250</option>
    <option value="wonto">Wonton, 200</option>
    <option value="rolls">Rolls, 150</option>
    </select>&nbsp;&nbsp;&nbsp;

    <select name="" id="q1">


    <option name="q0"></option>
    <option name="q1">1</option>
    <option name="q2">2</option>
    <option name="q3">3</option>
    </select>
    </p>
    </div>
    </div>

    <div class="gallery">
    <img src="major.jpg" />
    <div class="desc">Major</div>
    <div >
    <lable id="label_menu">Menu:</lable>
    <p><label>Item:&nbsp;</label>
    <label style="padding-left: 73px;">Quantity:&nbsp;</label>
    <select name="" id="menumajor">
    <option value=""></option>
    <option value="c b">Chicken Burger, 450</option>
    <option value="c r">Chicken Roll, 150</option>
    <option value="c s">Chicken Steak, 750</option>
    </select>
    <select name="" id="q2">
    <option name="q0"></option>
    <option name="q1">1</option>
    <option name="q2">2</option>
    <option name="q3">3</option>
    </select>
    </p> </div> </div>
    <div class="gallery">
    <img src="desert.jpg" />
    <div class="desc">Desert</div>
    <div >
    <lable id="label_menu">Menu:</lable>
    <p><label>Item:&nbsp;</label>
    Muhammad Aashir Khan
    02-134201-032 LAB-5

    <label style="padding-left: 70px;">Quantity:&nbsp;</label>


    <select name="" id="menudesert">
    <option value=""></option>
    <option value="ft">Fruit Trifle, 150 </option>
    <option value="gj">Gulab Jaamun, 250</option>
    <option value="ic">Ice cream, 250</option>
    </select>&nbsp;

    <select name="" id="q3">


    <option name="q0"></option>
    <option name="q1">1</option>
    <option name="q2">2</option>
    <option name="q3">3</option>
    </select>
    </p> </div> </div>
    <div id="bill">
    <h2 style="padding-left: 240px;"> Your Order: </h2>

    <textarea style="margin-left: 240px;" rows="10" cols="30" name="textbox1"


    readonly="readonly"> </textarea><br>
    <input style="margin-left: 240px; margin-top: 5px" type=button
    name="order" value="Show Order: " onclick="ShowItems();">

    <h2 style="padding-left: 240px;color: black;"> BILL </h2>

    <input style="margin-left: 240px;" type="text" name="textbox2"


    readonly="readonly"><br> <input style="margin-left: 240px;" type=button value =
    "Display Bill" onclick = "FinalBill();"/>
    </div>
    </form>
    </body>
    </html>

    OUTPUT:
    SEL-310 Web Engineering Lab
    Semester BS CS – 06

    M.Shahmir 02-134192-029

    You might also like