Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN: 9780133594140
Author: James Kurose, Keith Ross
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Related questions
Question
Create a new javascript file called cart.js and make a product object for each of your products and store it in a products array when the script loads. Create an empty array to store the items added to the cart.
Program the "add to cart button" to take the product id, finds the product object in the products array and adds it to the items added to cart array.
Program the "remove from cart button" to take the product id and remove the project object from the items purchased array.
Existing code:
<!DOCTYPE html>
<html>
<head>
<div id="product1" class="card">
<img src="img/clorox.jpg">
<h1>Clorox</h1>
<p class="price">$20.00</p>
<p>Household Cleaner</p>
<p><button id="product1Btn1">Add to Cart</button></p>
<p><button id="product1Btn2">Remove from Cart</button></p>
</div>
<div id="product2" class="card">
<img src="img/oxiclean.jpg">
<h1>Oxiclean</h1>
<p class="price">$8.00</p>
<p>Household Cleaner</p>
<p><button id="product2Btn1">Add to Cart</button></p>
<p><button id="product2Btn2">Remove from Cart</button></p>
</div>
<div id="product3" class="card">
<img src="img/pinesol.jpg">
<h1>PineSol</h1>
<p class="price">$11.00</p>
<p>Household Cleaner</p>
<p><button id="product3Btn1">Add to Cart</button></p>
<p><button id="product3Btn2">Remove from Cart</button></p>
</div>
<div id="product4" class="card">
<img src="img/mrclean.jpg">
<h1>Mr Clean</h1>
<p class="price">$12.00</p>
<p>Household Cleaner</p>
<p><button id="product4Btn1">Add to Cart</button></p>
<p><button id="product4Btn2">Remove from Cart</button></p>
</div>
<div id="product5" class="card">
<img src="img/windex.jpg">
<h1>Windex</h1>
<p class="price">$15.00</p>
<p>Household Cleaner</p>
<p><button id="product5Btn1">Add to Cart</button></p>
<p><button id="product5Btn2">Remove from Cart</button></p>
</div>
</head>
</html>
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by stepSolved in 3 steps with 1 images
Knowledge Booster
Similar questions
- Part 5: JavaScript - Displaying the Input The next step is to display the user input on the HTML page. The input data is stored in the array, so each element in the array will become a separate line of output on the web page. Eventually, we will ensure the output is all upper case, and that each line of text is a different, random color. Below is an example of the final output, assuming the user input a, b, c, and then finally nothing. To display the output, you will need to use another loop structure: for, while, or do...while. You choose. Before outputting to the browser, first, output to the console to ensure your looping works. >> Use an appropriate loop structure to loop through the input data array, and output each array item to the console. Now that you're working with the data, you might as well make adjustments to ensure each item is now displayed as upper case. >> Make coding changes to display the input data output to the console as all upper case content. Now…arrow_forwardDevelop the code that would be used in the main() function to test the class Cube. Create an object of Cube type using the constructor with argument, with the name of "Box", side length of 5, and color "Brown". Print out the information for the Cube. Change the name to BigBox, and increase the volume by 60%. Print the information for your Cube object one more time to verify the changes. Edit View Insert Format Tools 12pt ✓ Paragraph v Table BIU ✓ T² ✓arrow_forwardIn java plsarrow_forward
- omplete this javascript file according to the individual instructionsgiven in the comments. *** DO NOT CHANGE any of the code that you are not instructed to. */ ////////////////////////// NOTE: Use the API endpoints available at// https://jsonplaceholder.typicode.com/// to get the data required in these exercises.// HINT: Read the documented Resources and Routes.// Also the guide:// https://jsonplaceholder.typicode.com/guide//////////////////////// Create a function named "getUser".// This function needs to accept a "userID"// parameter.// Use Fetch with Async/Await to request// the data for the requested user.// The function should return JSON data.arrow_forwardManagement has given you the greenlight to create the product portion of the web application. Create a Product class with the following attributes: a. Price b. Name c. Description d. Id Create a ShoppingCart.js file and include it in the products page. In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products and store it in the products array when the script loads. The shopping cart script should have the following functions: a. add - Takes an id, finds the product object in the products array and adds it to the items purchased array. b. remove - Takes an id and removes the corresponding object from the items purchased array. c. Returns html for displaying the items in the cart. Create a products.html page. Add 5 product images to the page. Under each product add an add to cart button. Make the id property of the button the id for the product.…arrow_forwardcreate an image file programmatically. Your image file should be called OnTheFlyPy.ppm and the code you write to create should be in a public static void makePPM() method defined in the provided Main.java class. Your OnTheFlyPy.ppm should be be 100 pixels wide and 100 pixels tall and the PPM header lines should be correct. The first two rows and last two rows in the OnTheFlyPy.ppm should be red (Red=255, Green=0, Blue= 0). The first two columns and last two columns in the OnTheFlyPy.ppm (except for the part that overlaps with the red pixels you created in the previous part) should should be blue (Red=0, Green=0, Blue= 255). The remaining pixels in your OnTheFlyPy.ppm image should be white (Red=255, Green=255, Blue= 255). Here is a picture of what your final image should look like: import java.io.*; public class Main{ public static void main(String[] args) { makePPM(); } public static void makePPM() { } }arrow_forward
- In the langauage R: Which of the following statements is NOT correct about themes in R? Select one: Once set, a theme applies to all subsequent plots and remains active until it is replaced by a different theme The theme_set() function takes the name of a theme as an argument If we want to change the overall look of the figure all at once, we can use ggplot’s theme engine The theme_minimal() function can make ggplot output look like it has been featured in the Wall Street Journalarrow_forwardCreate three students with the following details: Snow White, student ID: A00234,credits: 24 Lisa Simpson, student ID: C22044,credits: 56 Charlie Brown, student ID: A12003,credits: 6 Then enter all three into a lab and print a list to the screen.arrow_forwardburses.projectstem.org/courses/64525/assignments/9460863?module_item_id=18079077 Maps HH 50 Follow these steps to create your Warhol Grid: 1. Find or create an image (for this activity, a smaller starting image will produce higher quality results in a shorter amount of time). 2. Using the Python documentation as a guide, create a program that loads the image, filters three copies of it, and saves the result. Note: You will need to create the three filters using the filter() method. • Include multiple filters on at least two of your variants. One of your variants must apply a single filter multiple times with the use of a loop. For example, the top right image above uses a loop to blur the image 2 times (what if we did it 100 times?). U ▪ One of your images must apply at least two different filters to the same image. In the example image, the bottom right image includes a filter to smooth the image and then edge enhance them. L • Create the Warhol Grid using Python with the three images…arrow_forward
- Please written by computer source In this lab you will create and fill a two-dimensional array of 25 Rectangle objects, arranged in a 5x5 grid. Each Rectangle should have dimensions 100x100, and be arranged on your window so that there is no space between Rectangles. Each Rectangle object should start with one fill color (e.g. white) and when pressed with the mouse it should toggle to a second color (e.g. gray). Pressing a second time on the Rectangle should toggle it’s fill color back to the first color. 3. Use the following template for your main() method. Add missing statements necessary to create your two- dimensional 5x5 Rectangle array and nested for-loops to fill the array with 25 new Rectangle objects, located on your window in a regular 5x5 grid. Make sure to set the mouse-pressed event handler for each new Rectangle. 2. Declare at least two public static variables: a 2D array of Rectangle objects, and a Pad variable: public static Pad pad; public static void main(String[]…arrow_forward*with psuedo code First, launch NetBeans and close any previous projects that may be open (at the top menu go to File ==> Close All Projects). Then create a new Java application called "WeightedAvgDataAnalyzer" (without the quotation marks), that does the following: This program is similar to the previous assignment - "WeightedAvgDropSmallest" - with a major difference that the inputs for the program will be read from a file and the output for this assignment should be written to a new file. The concept of application is as follows: The program will read numbers from a file - data.txt - that you will create, where the weight is a double (greater than 0.0 and less than or equal to 1.0) and the other numbers are the number, n, of lowest values to drop and then the numbers to be averaged after dropping the lowest n values. Example data.txt file would display: 0.5 3 10 70 90 80 20 The program then calculates the weighted average of all those numbers except the lowest n numbers, where…arrow_forwardMost forms on websites will usually have some sort of test to confirm that the user is a human and not a bot. Update the contact form that you created in Part 3. Add a field to the form that asks the user for the answer to a simple maths problem. The form should only be submitted if the user provides the successful answer to the maths problem. For example you may ask the user what 3 + 4 equals. The form will only be successfully submitted if the user provides 7 as the answer. If the user provides the incorrect answer to the maths problem, you should display a bold red error message to the user on the page by manipulating the DOM. The message should be diplayed in the same location on the page as the form validation error message from Part 3. If the user provides the correct answer to the maths problem, then the form should be submitted and the user should receive the bold green success message from part 3. Once part 4 is complete the user should receive an error message if: • The form…arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSON
Computer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier Science
Network+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning 
Concepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage Learning
Prelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson Education
Sc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY
Computer Networking: A Top-Down Approach (7th Edi...
Computer Engineering
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:PEARSON
Computer Organization and Design MIPS Edition, Fi...
Computer Engineering
ISBN:9780124077263
Author:David A. Patterson, John L. Hennessy
Publisher:Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:9781337569330
Author:Jill West, Tamara Dean, Jean Andrews
Publisher:Cengage Learning
Concepts of Database Management
Computer Engineering
ISBN:9781337093422
Author:Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:9780133750423
Author:VENIT, Stewart
Publisher:Pearson Education
Sc Business Data Communications and Networking, T...
Computer Engineering
ISBN:9781119368830
Author:FITZGERALD
Publisher:WILEY