I was wondering if someone could help me with javascript code. Im not sure if this is very advanced or would take someone long to do or not. If someone could help me do this or even help me get started that would be great. Thanks, Craig You are the owner of Frost Bites Hawaiian shave ice company and need your website to take an order and calculate the price of each shave ice. The program will calculate the price based on size and sales tax. It will be added to your previously completed frost bites website. Follow these steps to construct your program: To obtain the input needed from the user: Add html buttons to the body section of the html page as follows: 5 buttons labeled: cherry, lime, grape, watermelon, and orange that when clicked set the variable flavor 3 buttons for size: small, medium, or large that when clicked set the variable size i.e. (onclick="size='small'") 1 ORDER button that when clicked calls a function to calculate and output the price. ---------------------------------------------- Define a function as follows: The function should have two parameters: flavor and size and a variable tax_rate which is set to 0.06. The flavor is only needed to include in the output statement. The size determines the price: small - $2; medium - $2.50; large - $3. The tax should be added to the price.
1) this reeks of homework -- a LOT of people frown on doing homework for others (wonder why) 2) the very methodology is broken since again, the unwritten rule of JavaScript is that if you can't make it functional without scripting FIRST, you likely have no business adding scripting to it. Which is why "flavors" and "size" should be radio input, NOT buttons... and the submit should be allowed to submit normally to make the purchase or add to the cart-- then if you WANT to enhance it with a scripted total calculation, that's fine... but I'd do that in realtime whenever a radio button is checked, NOT when it's submitted. All in all looks like crap put together by someone who doesn't know enough about what JavaScript's job is to make a 'problem' like that in the first place. Though if that is indeed homework, well... fully what I expect out of the average "educator" since most of them don't know enough to be flapping their gums on the subject they are allegedly there to teach!
I remember a couple similar (enough) assignments, both for me, and friends taking similar courses in high-school and uni. The problem is that when you do it right, ie. solves the problem the right way, by altering the assignment and making the code properly, you usually don't get a good mark, simply because teachers don't like being called idiots. Even when they are.
Which is probably why formal education and I got along like sodium and water... and why I still consider a degree in IT to be worth less than a sheet of bog roll; PARTICULARLY when it comes to web development. But then, most people sleazing out scripts for websites don't know enough about HTML, CSS or the difference between client-side and server-side -- much less security for same -- to be writing a single blasted line of JavaScript. Now that I've had a good 4 hours sleep, Let's actually do this just to show what I meant above... First a form that works just fine all by itself without scripting; since everything sent by this should be re-checked server side anyways, meaning the JavaScript cost calculation SHOULD be thrown away (as it's far to easy to send "2.5" with a calculated cost of "0.00" otherwise) <form action="#" method="get" id="coneForm"> <h1>Cone Order form</h1> <fieldset id="coneFlavors"> <legend>Choose Flavor</legend> <label for="flavor_cherry">Cherry</label> <input type="radio" name="flavor" id="flavor_cherry" value="cherry" /> <br /> <label for="flavor_lime">Lime</label> <input type="radio" name="flavor" id="flavor_lime" value="lime" /> <br /> <label for="flavor_grape">Grape</label> <input type="radio" name="flavor" id="flavor_grape" value="grape" /> <br /> <label for="flavor_watermelon">Watermelon</label> <input type="radio" name="flavor" id="flavor_watermelon" value="watermelon" /> <br /> <label for="flavor_orange">Orange</label> <input type="radio" name="flavor" id="flavor_orange" value="orange" /> </fieldset> <fieldset id="coneSizes"> <legend>Choose Size</legend> <label for="size_small">Small</label> <input type="radio" name="size" id="size_small" value="2" /> <br /> <label for="size_medium">Medium</label> <input type="radio" name="size" id="size_medium" value="2.5" /> <br /> <label for="size_large">Large</label> <input type="radio" name="size" id="size_large" value="3" /> </fieldset> <div id="coneSubmitsAndHiddens"> <input type="submit" value="Order" id="coneSubmit" /> </div> <noscript> <p> There will be a 6% tax applied to your cost. A realtime calculation is avaiable on browsers where JavaScript is supported and unblocked. </p> </noscript> </form> Code (markup): Naturally it's good to have a scripting off message that there's more functionality with scripting enabled. I set it to send as 'get' so you can see what the server would receive in your address bar. A GOOD server side handler for this should check the values and resend the form checking any selected radio buttons, and adding messages explaining why the submit failed. Scripting only elements should be added BY the script -- like the calculation table and any messages relating to it. Likewise it might be nice to disable the submit when scripting is on until both radio sets have a value selected. (since we chose no defaults). I'd do that something like this: (function() { var d = document; function getInputs(targetId) { return d.getElementById(targetId).getElementsByTagName('input'); } var coneForm = d.getElementById('coneForm'), coneFlavors = getInputs('coneFlavors'), coneSizes = getInputs('coneSizes'), coneSubmitDiv = d.getElementById('coneSubmitsAndHiddens'), coneSubmit = d.getElementById('coneSubmit'), coneTotals = coneForm.insertBefore( d.createElement('fieldset'), coneSubmitDiv ), selected = 0, t; coneTotals.id = "coneTotals"; coneSubmit.disabled = true; function make(tag, parent, content, attributes) { var e = d.createElement(tag); if (content) { if (tag == 'input') e.value = content; else e.appendChild(d.createTextNode(content)); } if (parent) parent.appendChild(e); if (attributes) for (var t in attributes) e[t] = attributes[t]; return e; } make('legend', coneTotals, 'Costs'); make('p', coneForm, 'You must select both a flavor and a size before the order button will be enabled.'); function orSelect(mask) { if ((selected |= mask) == 3) coneSubmit.disabled = false; } function addTotalLine(title, shortName) { var d = make('div', coneTotals, false, { className : shortName = 'cost_' + shortName, }); make('label', d, title, { for : shortName }); return make('input', d, '0.00', { type : 'text', id : shortName, readOnly : true, replaceMoney : function(value) { this.value = Number(value).toFixed(2); } }); } var cost = addTotalLine('Product Cost:', 'product'), tax = addTotalLine('Tax:', 'tax'), total = addTotalLine('Grand Total:', 'total'); for (t = 0; t < coneSizes.length; t++) { coneSizes[t].onchange = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.checked) { orSelect(1); cost.replaceMoney(t.value); tax.replaceMoney(t.value * 0.06); total.replaceMoney(t.value * 1.06); } } } for (t = 0; t < coneFlavors.length; t++) { coneFlavors[t].onchange = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.checked) orSelect(2); } } })(); Code (markup): Put it in an anonymous function so there's no chance of other scripts interfering in it, put in a few simple functions to make element gathering and creation simpler, grab hold of everything AT THE START so we're not wasting time trying to run the 'slow' "getElement" methods 'as needed' -- particularly when events fire. Make a results fieldset, give it a legend, add our labels and set up some disabled fieldsets for our totals. We then iterate through the size fieldsets to add the onchange handlers to set a bit 0 in our 'enable the order button' flag as well as show our titles, then iterate through the flavor radio set so onchange a selected button will set bit 1 in the same flag. The handler for the enabled flags checking that both are set, if so enabling the submit. Because the inputs showing the totals are disabled, they are NOT sent server side. This is good, as you should NEVER BE TRUSTING CLIENT SIDE CALCULATIONS IN THE FIRST PLACE! Client side calcs are for quickly showing the results in realtime, NOT for processing something like a product order. I put a live demo of this up here: http://www.cutcodedown.com/for_others/CMadeIt/ Dunno if that actually helps, as it goes way outside the scope of the... well... really inadequate and incomplete instructions you have there.
I mentioned that -- it's so in testing you can see the result in your address bar; for real world application I'd switch to POST. You hit 'order' you can also see something a lot of people don't realize -- 'readonly' inputs are never sent back to the server; a good thing since you shouldn't be using the scripted values in the first place server-side. It's why in the handful of cases I would plug scripted values into a form as input, I do so as readonly. When testing markup I like to use get so I can review what's actually being sent before I start writing the server side code to process the data, just to be sure everything's kosher.