Create a products.html page. Add 5 product images to the page. Create a Product class with the following attributes: Price, Name, Description and Id. Under each product add an add to cart button. Make the id property of the button the id for the product. Add a remove from cart button on each item. At the top right of the page at a link that says (0) cart. When the add item is pressed, this number should increase. When the remove item is pressed, this number should decrease. When I click on the link, it should take me to a Checkout page. The checkout page should display all the items in the cart, and a total price. Add a form on the page that takes my name, email, phone number, and credit card number. Use a regular expression to validate the email, phone number, and credit card.
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: add - Takes an id, finds the product object in the products array and adds it to the items purchased array, remove - Takes an id and removes the corresponding object from the items purchased array and Returns html for displaying the items in the cart.
Trending nowThis is a popular solution!
Step by stepSolved in 3 steps
- using flex box css html codingarrow_forwardAdd JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names. Code for index.html: <!DOCTYPE html><html><head><title>Discussion 12</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><header><h1>Custom Computers</h1></header><section><h2>Our custom models</h2><p>Our computer models are built using high-performance hardware</p><div class="computer"><div>The standard model</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulummetus velit a tortor. Phasellus vel quam eu nunc molestie porta. Maurismassa justo, dignissim eget eleifend sit amet, condimentum.</p></div><div class="computer"><div>The casual gaming model</div><p>Lorem ipsum dolor sit…arrow_forwardOn the index page, add a link that says "Subscribe To Our Marketing List". Clicking the link should take the user to another page that contains a signup form. The form should contain a subscribe button and the following text fields: Email Address, Re-enter Email Address, First Name. Using java create a script called subscribe.js, In the subscribe.js script, it should add an event for the subscribe button that listens for the onclick event. When the onclick event occurs, it should validate that the email text matches the re-enter email text and that the first name textbox is not empty. If the validation fails for either, display the appropriate error message beside the textbox. For example, This entry must equal the first entry, This field is required. If validation is successful, display an alert that says thanks for joining our list and remember to include your script on the page.arrow_forward
- 1 What types of argument does the jQuery factory method accept? 2. With which jQuery method can you get or set a CSS property value? 3. What statement would you use to attach a method to the click event of an element with the ID of elem, to make it slowly hide? 4. How can you retrieve an element node object from a jQuery selection object? 5. What statement would set the sibling element immediately preceding one with the ID of news to display in bold? 6. What are the key advantages and disadvantages of using a software framework when constructing web applications? 7. What are the advantages of React's component-based approach to constructing user interfaces? 8. Describe the differences between props and state in React.arrow_forwardThe _________ method loads a style sheet named style.css for a node or a scene. Question 16 options: node.setStyleSheet("style.css"); node.getStyleSheets.setStyleSheet("style.css"); node.setStylesheets("style.css"); node.getStylesheets.add("style.css");arrow_forwardUsing the template engine, build a page that pulls a list of shapes from the ColorShapes database and presents that list, as a form, to the webapp user. The webapp user is then prompted to select a single shape from the list. Menus or radio buttons are acceptable presentation methods for this page (radio buttons preferred). Using the template engine, build a page that takes the Shape the webapp user selected, and generates a list of Colored Shapes for the selected Shape. I will fill in for database , just leave an open spacearrow_forward
- How to create a product table page: To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary. • Modify the horizontal navigation menu so it indicates that the product list page is the current page. • Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row. Create a new style sheet named summary.css for the product list page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the products/index.html file so it points to the correct style sheet. • Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…arrow_forwardWhen modifying the layout of a page in the Salesforce app, there is a maximum number of columns possible in the layout. This number is: Question 1 options: 2 1 4 3 Question 2 A facility exists that allows a user to follow changes that might occur to records of an object. This facility is called: Question 2 options: Following Posting Social collaboration Feed tracking Question 3 Mini-page layouts are useful in previewing objects (e.g., Invoice objects). Mini-page layouts are accessible from: Question 3 options: Chatter page Recently viewed pull-down menu Home page Recent items sidebar Question 4 It is possible in Salesforce to adjust the user interface about what is shown to the user. For instance, showing only open invoices in the page. To set this, we need to create and customise a new: Question 4 options: Graphical User Interface Visualisation View Invoice Question 5 There…arrow_forwardComplete the following webpage assignment. Assignment Instructions: Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.arrow_forward
- I'm trying to learn CSS and it isn't easy. Can someone help me with this problem? Modify or add one CSS rule for each requirement below to change the text color property as specified. By color name: change the text color for byname class elements from black to blue. By RGB values: change the text color for byrgb class elements from black (rgb(0, 0, 0)) to green by modifying the second number to be 255. By HSL values: change the text color for byhsl class elements from black (hsl(0, 0%, 0%)) to cyan by modifying the first number to be 200, the second number to 100%, and the third number to 50%. Code: <p class="byname">The text is blue</p> <p class="byrgb">The text is green</p> <p class="byhsl">The text is cyan</p>arrow_forwardAdd the appropriate punctuation to select a group of elements based on their CSS class. var nameElements = $('___name');arrow_forward
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSONComputer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier ScienceNetwork+ 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 LearningPrelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson EducationSc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY