/    Sign up×
Community /Pin to ProfileBookmark

Restaurant Menu Design

I’m a total newb at javascript and I understand the concepts but not enough for this project I have to do. If there is any expert who would graciously write up the coding behind this I would be eternally grateful and would appreciate it. This is the project as follows:

You’re going into business by opening a fast food restaurant! For this project, you are to
create a Fast Food restaurant web page to incorporate a form and function(s) to manage the customer’s interaction with the web page content. Your page needs to display a picture of a restaurant when the page is first loaded. You need to offer at least three menu items and their associated text boxes. A picture of the food item in the menu will replace the picture of the restaurant when the user places the mouse cursor over the appropriate input text box. This effect is known as an image rollover (chapter 9). So you will need at least an additional three images.

The customer will have to order the items by filling in the number of items in text boxes and then the total bill due is calculated by clicking a button labeled “Ring It UP”. The onclick action for this button will call a function called billme() that will calculate the bill. A discount calculation needs to be applied in this function. Separate functions to calculate the tax due and the total bill can be broken out of the billme() function, but it is not required.

Discounts (10% off for 5 or more items of any product) are applied before the tax is calculated, 7% sales tax applied. Display the cost subtotal in one textarea, the tax in a second textarea, and the total bill in a third textarea. Also display the money saved in the fourth textarea if discounts are applied. As an alternative, all of this information may be placed as one large string value into one textarea, with one item displayed per line. Also include a reset button to clear all form object values and place the values of 0 (zero) in each of the text boxes.

Include three radio buttons with the same name.

  • 1. to indicate you are a student.

  • 2. to indicate you are a Professor.

  • 3. to indicate neither 1 and 2.
  • Apply an extra 10% discount if you have the Pitt student radio button selected, 5% discount for the Pitt professor radio button selected, and no discount for button 3.

    Include a checkbox for a $1.00 donation to the Pitt Old Instructor’s Retirement fund. If this box is checked your bill will have $1.00 added to it after taxes. No money is added to your bill if the box is unchecked.

    Document your code and webpage with comments.

    My email is [email][email protected][/email] if anyone can help or just post on here. Thanks!

    to post a comment
    JavaScript

    7 Comments(s)

    Copy linkTweet thisAlerts:
    @mjdamatoNov 20.2006 — You should at least attempt the assignment before asking others to do your homework.
    Copy linkTweet thisAlerts:
    @dkizzyauthorNov 20.2006 — I did, and it just resulted in messed up coding like none other
    Copy linkTweet thisAlerts:
    @blutterNov 20.2006 — Can you post what you've done so far?
    Copy linkTweet thisAlerts:
    @crushmeguyNov 21.2006 — People might be willing to help you if you make some sort of effort to show you genuinely want to learn these programming concepts. No one here is going to help you get a grade just because you don't want to study your text book.

    Doug
    Copy linkTweet thisAlerts:
    @dkizzyauthorNov 21.2006 — I know and agree, I just didn't have a chance to post it up earlier so sorry for the wrong impression. I need help with the rollover part and I can't get the discount to work, but check if it all works also.


    <html>

    <head>

    <title>Eat the fast food!</title>

    <script language=javascript>

    function billme()

    {

    var v1= document.order.burgerQty.value;

    var v2= document.order.friesQty.value;

    var v3= document.order.drinkQty.value;

    var v4= document.order.discountRB[0];

    var v5= document.order.discountRB[1];

    var v6= document.order.discountRB[2];

    var v7= document.order.donateCB.checked;

    //These lines define the variables.

    v1= parseInt(v1);
    v2= parseInt(v2);
    v3= parseInt(v3);
    //These lines make sure that variables 1, 2, and 3 are numbers.

    order.subtotalBox.value= (v1*2)+(v2*1.5)+(v3*1.75)

    if (document.order.discountRB[0].checked) {
    document.order.subtotalBox.value= (order.subtotalBox.value)*0.9
    }
    else if (document.order.discountRB[1].checked) {
    document.order.subtotalBox.value= (order.subtotalBox.value)*0.95
    }
    //These lines assign discount function to the radio buttons.

    document.order.taxBox.value= (document.order.subtotalBox.value)*0.07



    if (document.order.donateCB.checked) {
    order.grandtotalBox.value= 1+(order.subtotalBox.value*1.07)
    }
    else {
    order.grandtotalBox.value= order.subtotalBox.value*1.07
    }
    //These lines assign function to the checkbox.


    if (document.order.discountRB[0].checked) {
    document.order.savingsBox.value= ((v1*2)+(v2*1.5)+(v3*1.75))*0.1
    }
    else if (document.order.discountRB[1].checked) {
    document.order.savingsBox.value= ((v1*2)+(v2*1.5)+(v3*1.75))*0.05
    }
    else if (document.order.discountRB[2].checked) {
    document.order.savingsBox.value= 0
    }
    //These lines define what should be displayed in the discount box.

    }


    function burgerImage() {
    document.mainpic.src="burger.jpg"
    }

    function friesImage(){
    document.mainpic.src="fries.jpg"
    }

    function drinkImage(){
    document.mainpic.src="drink.jpg"
    }

    function restoreImage() {
    document.mainpic.src="building.jpg"
    }



    </script>

    </head>

    <body>

    <h1 align=center>Eat some food!</h1>

    <br>

    <p align=center><img src="building.jpg" alt="Picture" id="mainpic" /></p>

    <br>

    <form id=order name=order>

    <p align=center>

    <strong>Please fill out the form accordingly. Put the number of

    items you want in the box next to each.</strong>

    <br>

    <br>

    Burger $2.00 <input type="text" name="burgerQty" size="2" value="0" onmouseover= "burgerImage()" onmouseout= "restoreImage()"><br>

    Fries $1.50 <input type="text" name="friesQty" size="2" value="0" onmouseover= "friesImage()" onmouseout= "restoreImage()"><br>

    Drink $1.75 <input type="text" name="drinkQty" size="2" value="0" onmouseover= "drinkImage()" onmouseout= "restoreImage()">

    <br>

    <br>

    <strong>Please select one of the following options:</strong><br>

    <input type="radio" name="discountRB" /> Pitt Student (10% off) <br>

    <input type="radio" name="discountRB" /> Pitt Professor (5% off) <br>

    <input type="radio" name="discountRB" /> Neither Student or Professor (no discount) <br>

    <br>

    <input type="checkbox" name="donateCB" /> Donate $1 to the Pitt Old Instructor's Retirement Fund<br>

    <br>

    <input type="button" name="calcBtn" value="Ring It UP" onclick="billme(document.order)" />

    <input type="reset" name="resetBtn" value="Clear Form" />

    <br>

    <br>

    SubTotal: $<input type="text" name="subtotalBox" size="6" value="0" /><br>

    Tax: $<input type="text" name="taxBox" size="6" value="0" /><br>

    Grand Total: $<input type="text" name="grandtotalBox" size="6" value="0" /><br>

    Money saved with discounts: $<input type="text" name="savingsBox" size="6" value="0" /><br>

    </p>

    </body>

    </html>
    Copy linkTweet thisAlerts:
    @dkizzyauthorNov 21.2006 — I Tried, but those are the only two things I need to figure out
    Copy linkTweet thisAlerts:
    @dkizzyauthorNov 21.2006 — the problem with the image rollover is I get them to work only when I don't have the main picture being restored. I don't know how to make it so the main image is shown first, then when i do the rollover on the textboxes show the others and then going back to the main picture, I'm probably missing a line of code because the main picture only shows whenever i rollover onto the french fries textbox but then the others all collide with the main pic and the screen looks like its flicking.

    I got the discount to work, but not the donation button/function to add to the grand total
    ×

    Success!

    Help @dkizzy spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...