HomeworkLib
Question

a) Write JavaScript code (Q4.js) that is executed when the place order button is pressed and it calculates the cost of each i

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "Q4.html" is created, which contains following code.

Q4.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!--title for web page -->

<title>Question 4 Web page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--link to external stylesheet -->

<link href="Q4.css" rel="stylesheet">

</head>

<body>

<div id="container">

<h2>Create Your own Flower Bouqute</h2>

<!--form with action and id attribute -->

<form action="" id="frm">

<fieldset>

<table border="0">

<tr>

<th>Item</th>

<th>Unit</th>

<th>Price</th>

</tr>

<tr>

<td>Red Roses</td>

<!--textbox for rose -->

<td><input type="text" size="3" id="rose"/></td>

<td>$5.5</td>

</tr>

<tr>

<td>Yellow Lily</td>

<!--textbox for Yellow lilly -->

<td><input type="text" size="3" id="lily"/></td>

<td>$7.5</td>

</tr>

<tr>

<td>White Mini Calla</td>

<!--textbox for Scalla -->

<td><input type="text" size="3" id="scalla"/></td>

<td>$4.00</td>

</tr>

<tr>

<td>Pink Orchid</td>

<!--textbox for Orchid -->

<td><input type="text" size="3" id="orchid"/></td>

<td>$8.00</td>

</tr>

<tr>

<td>Orange Daisy</td>

<!--textbox for daisy -->

<td><input type="text" size="3" id="daisy"/></td>

<td>$7.00</td>

</tr>

</table>

<br><br>

<label>Choose your delivery method</label><br><br>

<!--radio buttons for delivery method -->

<input type="radio" name="delivery"/>Standered ($2)

<input type="radio" name="delivery"/>Premium ($6)

<br><br>

<!--button to submit form and calling method calculateTotal() -->

<input type="button" value="Place Order" id="sub" onclick="calculateTotal();"/>

</fieldset>

</form>

<!--div to display details -->

<div id="result"></div>

</div>

<!--link to external javascript file -->

<script type="text/Javascript" src="Q4.js"></script>

</body>

</html>

*******************************

Q4.css :

/*External Javascrit file */

/*style rule for body */

body{

color: mediumblue;

background-color: darkorange;

}

/*style rule for form */

#frm{

width: 540px;

padding: 10px;

}

/*style rule for fieldset */

fieldset{

border-color:blue;

}

*****************************

Q4.js :

//function to calculate total

function calculateTotal() {

//taking unit of rose

var roseUnit = document.getElementById("rose").value;

//taking unit of lily

var lilyUnit = document.getElementById("lily").value;

//taking unit of scalla

var scallaUnit = document.getElementById("scalla").value;

//taking unit of orchid

var orchidUnit = document.getElementById("orchid").value;

//taking unit of daisy

var daisyUnit = document.getElementById("daisy").value;

//checking delivery method

var deliveryType = document.getElementsByName("delivery");

//validating inputs

if (roseUnit == "" || isNaN(roseUnit)) {

//if empty or not a number

alert("Unit for Rose can not be empty or should be digit");

}

else if (lilyUnit == "" || isNaN(lilyUnit)) {

//if empty or not a number

alert("Unit for Lily can not be empty or should be digit");

}

else if (scallaUnit == "" || isNaN(scallaUnit)) {

//if empty or not a number

alert("Unit for Scalla can not be empty or should be digit");

}

else if (orchidUnit == "" || isNaN(orchidUnit)) {

//if empty or not a number

alert("Unit for orchid can not be empty or should be digit");

}

else if (daisyUnit == "" || isNaN(daisyUnit)) {

//if empty or not a number

alert("Unit for daisy can not be empty or should be digit");

}

else {

//calculating price for all units

var redRose = parseInt(roseUnit) * 5.5;

var yellowLily = parseInt(lilyUnit) * 7.5;

var whiteScalla = parseInt(scallaUnit) * 4.0;

var pinkOrchid = parseInt(orchidUnit) * 8.00;

var orangeDaisy = parseInt(daisyUnit) * 7.00;

//checking which delivery type is selected

var delivery;

//checking delivery method

if (deliveryType[0].checked == true) {

delivery = 2;//if standered is selected

}

else {

delivery = 6;//if premium method is selected

}

//calculating final total

var totalCost=redRose+yellowLily+whiteScalla+pinkOrchid+orangeDaisy+delivery;

//desplay details

var finalResult="Red Roses(units="+roseUnit+"):$"+redRose+"<br/>";

finalResult=finalResult+"Yellow Lily(units="+lilyUnit+"):$"+yellowLily+"<br/>";

finalResult=finalResult+"White Mini Calla(units="+scallaUnit+"):$"+whiteScalla+"<br/>";

finalResult=finalResult+"Pink Orchid(units="+orchidUnit+"):$"+pinkOrchid+"<br/>";

finalResult=finalResult+"Orange Daisy(units="+daisyUnit+"):$"+orangeDaisy+"<br/>";

finalResult=finalResult+"Delivery:$"+delivery+"<br/><br/>";

finalResult=finalResult+"Final Total:$"+totalCost;

//display details on the div

document.getElementById("result").innerHTML=finalResult;

}

}

======================================================

Output : Open web page Q4.html in the browser and will get the screen as shown below.

Screen 1 :Q4.html

Question 4 Web page 0 localhost:8080/04.html Create Your own Flower Bougute Item Unit Price Red Roses Yellow Lily White Mini

Screen 2 :Screen when value is empty

Question 4 Web page ⓘ localhost:8080/Q4.html 11八田 Create Your own Flower Bouqute Item Unit Price 853 Red Roses Yellow Lily Wh

Screen 3 :Screen showing details

Question 4 Web page localhost:8080/04.html Create Your own Flower Bougute Item Unit Price S5.5 2 $7.5 Red Roses Yellow Lily W

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
a) Write JavaScript code (Q4.js) that is executed when the place order button is pressed and...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user...

    JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions. Your trivia game should contain: 2 text boxes 2 select dropdowns 2 multiple choice questions (using radio buttons, 4 options min) 1 choose-all-that-apply (checkboxes, 4 options min, one answer should be "None of the above"). No part-points for semi-correct answers. The questions can cover any topic you wish - but please keep it professional and easy enough that the...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

  • Write an interactive C++ program that asks a user to input the color code of a...

    Write an interactive C++ program that asks a user to input the color code of a resistor and determines its value and tolerance Tell the user how to input the color rings “Instructions” Tell the user to input the colors one after the other After the program receives the information it will display the resistance and tolerance Output an error message if the user enters an invalid color code (no garbage values should be displayed), and ask for another input...

  • Hello, this is my code. moest of the things works but when select the price, i...

    Hello, this is my code. moest of the things works but when select the price, i just dont get my total. can someone help me out . thank you My queshion is also here The page will simulate the site for a Chicago-based small bus line that travels to St Louis, Milwaukee, and Detroit. Here are the requirements: The home page (i.e. the main page) should simply be the heading, image, and slogan of the site.  The home page should NOT...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • need this in #c . You will now add server side validation code to the frmPersonnel...

    need this in #c . You will now add server side validation code to the frmPersonnel page. Currently, when the Submit button is pressed, the frmPersonnelVerified page is displayed. This is because the frmPersonnelVerified page is set as the Submit button's PostBackUrl property. Instead of having the page go directly to the frmPersonnelVerified page when the Submit button is pressed, we want to do some server side validation. If any of the validation rules fail, we will redisplay the frmPersonnel...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT