ZuoTi.Pro
Question

Set up Follow the same process that you followed before when you set up the Build...

Set up

Follow the same process that you followed before when you set up the Build a Simple Website assignment - except for this time we'll create the website in a "week2" folder with the typical files:

  • index.html
  • css/styles.css
  • js/scripts.js

This is the standard structure that we'll use in all assignments.

The Problem

We are going to convert the exercise that we did in class yesterday into a website. Here is the problem that we'll solve:

"Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook. The backpack costs $56.99. The calculator costs $104.89. The textbook costs $51.97."

Calculate the total price.

Oh, and the bookstore gives a 10% discount if you spend over $200.00

What is the total cost of the 3 items?

Instructions

  1. Create a form that has an input and label for each item that Youie purchased. The label should describe the item. The input value attribute should be set to the value of the item. Add a button to the form. Add one additional input element that will be used to output the total price.
  2. Use window.onload to set up your program to run after the page has been loaded.

    It would look something like this: 
    window.onload = function(){
    setUpForm();
};
    In the above example I've used "setUpForm" as the name of the function that would run after the page is loaded. You can use your own names for this function.

    Then have the "setUpForm" function (or whatever you decide to call it) read the button from the DOM, and add a click handler to it. When the user clicks on the button, to totals will be calculated.

    You'll have one more function that actually calculates the totals and discount.
  3. Set the value of the total price input element to the result of your calculations.
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

index.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!--title for web page -->

<title>Total Price Calculator</title>

<meta charset="UTF-8">

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

</head>

<body>

<form>

<!--label for Backpack -->

<label>Backpack</label>

<!--textbox for Backpack -->

<input type="text" id="txtBackpack" value="56.99"/>

<br>

<br>

<!--label for Calculator -->

<label>Calculator</label>

<!--textbox for Calculator -->

<input type="text" id="txtCalculator" value="104.89"/>

<br>

<br>

<!--label fot Textbook -->

<label>Textbook</label>

<!--textbox for Textbook -->

<input type="text" id="txtTextbook" value="51.97"/>

<br>

<br>

<!--button to calculate total price -->

<input type="Submit" id="btnCalculate" value="Calculate Total Price"/>

<br> <br>

<!-- label to display total price -->

<label>Total Price</label>

<!--textbox for total price -->

<input type="text" id="txtTotal"/>

</form>

<script>

//calling function calculteTotal on Window load event

window.onload=function()

{

//function to calculate total price

calculteTotal();

}

//function defination calculteTotal

function calculteTotal()

{

//adding event listerner to the button btnCalculate and calling function total()

document.getElementById("btnCalculate").addEventListener("click",total());

}

//function defination total() that calculates total and display total

function total()

{

//getting value of items purchased

//price of backpack

var backpack=parseFloat(document.getElementById("txtBackpack").value);

//price of calculator

var calculator=parseFloat(document.getElementById("txtCalculator").value);

//price of textbook

var textbook=parseFloat(document.getElementById("txtTextbook").value);

//calculate total cost

var totalPrice=backpack+calculator+textbook;

//if cost is greater than 200 then apply 10% discount

var discount=0;

if(totalPrice > 200)

{

discount=totalPrice*10/100;

}

//display total price in the textbox txtTotal

document.getElementById("txtTotal").value=totalPrice-discount;

}

</script>

</body>

</html>

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

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

Screen 1 :index.html

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

0 0
Add a comment
Know the answer?
Add Answer to:
Set up Follow the same process that you followed before when you set up the Build...
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

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • Lab Assignment : In this lab, you are going to implement QueueADT interface that defines a...

    Lab Assignment : In this lab, you are going to implement QueueADT interface that defines a queue. Then you are going to use the queue to store animals. 1. Write a LinkedQueue class that implements the QueueADT.java interface using links. 2. Textbook implementation uses a count variable to keep track of the elements in the queue. Don't use variable count in your implementation (points will be deducted if you use instance variable count). You may use a local integer variable...

  • So I have no idea how to set up #1. I'm pretty sure I can find the particular solution once I kno...

    So I have no idea how to set up #1. I'm pretty sure I can find the particular solution once I know the equation, but I would just love some help of that as well. I included this second page as a formality, feel free not to use the website. . Introduction: An Army cannon is designed so that when a shell is fired from it, the carriage that the gun tube assembly sits on remains stationary, while the gun...

  • JAVA Hello I am trying to add a menu to my Java code if someone can...

    JAVA Hello I am trying to add a menu to my Java code if someone can help me I would really appreacite it thank you. I found a java menu code but I dont know how to incorporate it to my code this is the java menu code that i found. import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ButtonGroup; import javax.swing.JCheckBoxMenuItem; import javax.swing.JFrame; import javax.swing.JMenu; import javax.swing.JMenuBar; import javax.swing.JMenuItem; import javax.swing.JRadioButtonMenuItem; public class MenuExp extends JFrame { public MenuExp() { setTitle("Menu Example");...

  • Please provide original Answer, I can not turn in the same as my classmate. thanks In...

    Please provide original Answer, I can not turn in the same as my classmate. thanks In this homework, you will implement a single linked list to store a list of computer science textbooks. Every book has a title, author, and an ISBN number. You will create 2 classes: Textbook and Library. Textbook class should have all above attributes and also a “next” pointer. Textbook Type Attribute String title String author String ISBN Textbook* next Textbook Type Attribute String title String...

  • Write a program in C++ that simulates a soft drink machine. The program will need several...

    Write a program in C++ that simulates a soft drink machine. The program will need several classes: DrinkItem, DrinkMachine and Receipt. For each of the classes you must create the constructors and member functions required below. You can, optionally, add additional private member functions that can be used for doing implementation work within the class. DrinkItem class The DrinkItem class will contains the following private data members: name: Drink name (type of drink – read in from a file). Type...

  • If you’re using Visual Studio Community 2015, as requested, the instructions below should be exact but...

    If you’re using Visual Studio Community 2015, as requested, the instructions below should be exact but minor discrepancies may require you to adjust. If you are attempting this assignment using another version of Visual Studio, you can expect differences in the look, feel, and/or step-by-step instructions below and you’ll have to determine the equivalent actions or operations for your version on your own. INTRODUCTION: In this assignment, you will develop some of the logic for, and then work with, the...

  • I've posted 3 classes after the instruction that were given at start You will implement and...

    I've posted 3 classes after the instruction that were given at start You will implement and test a PriorityQueue class, where the items of the priority queue are stored on a linked list. The material from Ch1 ~ 8 of the textbook can help you tremendously. You can get a lot of good information about implementing this assignment from chapter 8. There are couple notes about this assignment. 1. Using structure Node with a pointer point to Node structure to...

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
ADVERTISEMENT