Overview As you know, a them I have been pushing is to get you more and more ind
ID: 3679271 • Letter: O
Question
Overview
As you know, a them I have been pushing is to get you more and more independent in terms of expanding your skills. For this assignment, I will show you a new (though not dramatically different) way of doing something, and ask you to apply it.
Up to this point, we have been retrieving information from forms using the format:
document.formName.elementName.value
However, these days, a more conventional and appropriate way of retrieving information from a form is to name your form elements using the ‘id’ attribute instead of the ‘name’ attribute. (The one exception is for radio buttons where you the only way to group buttons together is by giving them a ‘name’ attribute and having the same value for all of the buttons).
So in this assignment you are going to do things differently than you did in the past: ALL of your form elements (except for radio buttons) should be named using the ‘id’ attribute instead of the ‘name’ attribute.
Then, in order to retrieve information, you will no longer use:
document.formName.elementName.value;
Instead, you will use:
document.getElementById('some_id_name').value;
For example, if your form has a text field with an id called ‘txtDollars’, you would retrieve its value using:
var usDollars = document.getElementById('txtDollars').value;
To determine if a checkbox is checked, use:
document.getElementById('name_of_your_checkbox').checked
The Assignment
You will simulate a restaurant’s pizza ordering page. Have a form with the following fields:
The name as a textbox
The phone number as a textbox
Pizza size: Select box with choices for Small ($10), Medium ($15), Large ($20)
Have checkboxes for the following options: Mushrooms, Sausage, Olives
Have a radio button in which you ask the user if they are a member of the “Pizza Club”
A button to submit the form. The button should say ‘Make My Pizza’
All naming conventions and required attributes for the form must be respected.
Bonus up to 10 points: Style your form so that it is very “neat” using the content from week #10 (CSS positioning and layout). That is, so that textboxes and input prompts are not staggered to different lengths, radio buttons line up, etc, etc. This can be tricky, so don’t spend time on it unless you get the rest of the project under control. Bonus points will not be awarded if the estimate calculation does not work properly. Also, using lots of ‘ ’ characters will not suffice. You must use the positioning concepts including the ‘float’ element as discussed in the notes.
When the user submits their form, your script will thank the user for ordering with your company, and tell them the cost of their pizza. Use the following business rules to determine the cost:
· Initial cost of the pizza will, of course, come from the size the user chooses
· Mushrooms cost an extra $1, Olives cost an extra $1, Sausage costs an extra $2
· If they are a member of the “Pizza Club”, they will get a 20% discount on their pizza.
· Research how to use JavaScript’s toFixed() function and use it to make sure that whatever variable is holding the ultimate cost of the pizza is limited to exactly 2 decimal places.
HINT: There are several ways of coming up with the cost, but one approach might be to start with a variable called something like ‘pizzaCost’, and initize its value to 0. Then keep updating the value of this variable based on the what the user has selected in the form. So your coding steps might use a strategy similar to: cost = 0 à User chooses a medium pizza: cost gets assigned a value of 15 à user selects olives: add 1 to cost to make it 16 à user selects sausage: add 2 to cost making it 18 à user is a member of the pizza club, adjust cost by reducing it by 20% (e.g. cost = cost – 0.2*cost) .
Styling:
· Have a div section called main_content that surrounds all of the content on your page.
· Have a div secton called company_info at the top of your page (but inside main_content) that has an image related to your company, and the company name.
· Have a div section called confirmation where you will output a confirmation message to the user. In this section you will output a confirmation message that thanks them (by the name they entered) for visiting your pizza shop, and output the cost. For example: Thank you, John Smith, for visiting Best Pizza Inc. The cost of your pizza is $18.00 dollars.
· Use an external stylesheet. Use contextual selectors to style the main_content div by diving it a border and a 400 pixel width. Style the confirmation div by giving it a background color.
Hints/Reminders: I want you all to ace this project, so here are a few freebie hints and reminders.
· Make sure you can comfrotably replicate the JavaScript code in the museum_admission.htm and tip_calculator.htm examples as this assignment uses very similar principles. However, note these pages do not use the getElementById format!
· Remember to do everything in increments. For example, do not create the entire form at once. First just take care of the pizza size part. Then put a (temporary) alert statement in your code outputting the cost. Only AFTER you are sure this works, should you move on to a subsequent item, such as seeing if they want mushrooms. ONLY AFTER you get that section working together with the initial cost should you move on to the next item. And so on… If you try to do too many things at once, debugging becomes a nightmare. And you may find that your colleagues are much less likely to help if they see all kinds of little bugs present at once. This suggests that the procedure indicated here was not followed
· Don't forget that when retriving a numeric value from a text box, it comes in as a string and must therefore be converted to a numeric value.
· It would probably be easiest to start off with a variable to hold cost, initialize it to 0, and then update as you investigate the different form elements.
· When it comes time to output your final statement, you may want to have 2-3 strings and then concatenate them together in your final output statement. You don’t have to do it this way, but you may find that it makes life a fair bit easier.
Explanation / Answer
We create two file one html file and one css file.
first i show you html file then style.css file
create html file and out code
Html code start here
<!--
This is html file
We use external stylesheet name style.css.
style.css include in head part of this page.
In div company_info change image according to you requrement.
First we add name field
Then phone munber
Then Pizza size in select box and we set pizza size cost in option value
Then apply three checkboxes and also pass option value in checkbox
Then member ration button and pass discount value.
If you want change option value then direct change in html. if you want set all value according to database then apply script.
End of this we add javascript code and calculate pizza cost and show message in confirmation.
if you want confirmation div disply none first time then apply css property in style.css
and apply display block code before document.getElementsByClassName("confirmation")[0].innerHTML = confirmation; in javascript code
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main_content">
<div class="company_info">
<img src="Koala.jpg" width="100"/>
</div>
<div class="confirmation">
</div>
<div class="field">
<div class="inner_field">
<div class="label">
Name:-
</div>
<div class="inputfield">
<input type="text" name="name" id="name" />
</div>
<div class="clr"></div>
</div>
<div class="inner_field">
<div class="label">
Phone Number:-
</div>
<div class="inputfield">
<input type="text" name="phone" id="phone" />
</div>
<div class="clr"></div>
</div>
<div class="inner_field">
<div class="label">
Pizza size :-
</div>
<div class="inputfield">
<select id="pizzatype">
<option value="10">Small ($10)</option>
<option value="15">Medium ($15)</option>
<option value="20">Large ($20)</option>
</select>
</div>
<div class="clr"></div>
</div>
<div class="inner_field">
<input type="checkbox" name="vehicle" value="1" class="pizzaoption"/> Mushrooms
<input type="checkbox" name="vehicle" value="2" class="pizzaoption"/> Sausage
<input type="checkbox" name="vehicle" value="1" class="pizzaoption"/> Olives
</div>
<div class="inner_field">
<div class="label_member">
Member of the "Pizza Club" :-
</div>
<div class="inputfield_member">
<input type="radio" name="vehicle" value="20" id="member"/>
</div>
<div class="clr"></div>
</div>
<div>
<input type="button" name="submit" value="Make My Pizza"/>
<div>
</div>
</div>
<script>
function createCost(){
// define some varible
var pizzaCost=0;
var discount =0;
var confirmation;
// get pizza size value here
var pizzatype = document.getElementById('pizzatype').value;
// get customer name here
var name = document.getElementById('name').value;
// get customer phone number here
var phone = document.getElementById('phone').value;
// check customer name
if(name == ''){
alert('please enter name');
return false;
}
// check customer phone number
if(phone == ''){
alert('please enter phone number');
return false;
}
// check pizza size select and not if not select show alert message and retirn false
if(pizzatype == ''){
alert('please select Pizza size');
return false;
}
// get all checked checkbox value in loop
var checkedValue = null;
var inputElements = document.getElementsByClassName('pizzaoption');
// start loop here
for(var i=0; inputElements[i]; ++i){
// check current checkbox checked or not
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
// add extra cost here according to checked
pizzaCost = (pizzaCost+Number(checkedValue));
}
}
// add extra cost in pizza size cost
pizzaCost = pizzaCost+Number(pizzatype);
// check member radion button select or not. if select then apply discount in if condation
if (document.getElementById('member').checked) {
rate_value = document.getElementById('member').value;
discount = (pizzaCost*Number(rate_value)/100);
}
// convert final cost in decimal value
pizzaCost = pizzaCost-discount;
pizzaCost = pizzaCost.toFixed(2);
// show confirmation message
confirmation = 'Thank you, '+name+', for visiting Best Pizza Inc. The cost of your pizza is $'+pizzaCost+' dollars ';
document.getElementsByClassName("confirmation")[0].innerHTML = confirmation;
}
</script>
</body>
</html>
Html code end here
Create style.css file and put this code.
body{margin:0;padding:0;}
.main_content{width:400px;border:1px solid;margin:auto;}
.confirmation{background:#CCCCCC none repeat scroll 0 0;padding:5px;}
.field{padding:5px;}
.inner_field{width:100%;padding-bottom:5px;}
.label{float:left; width:30%;}
.label_member{float:left; width:60%;}
.inputfield{float:left; width:70%;}
.inputfield_member{float:left; width:40%;}
.clr{clear:both;}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.