Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
Make the html/css/javascript code like this please. category1 = Korean traditional category2 = European wine category3 = Canadian beer each category has 7 items.  Just leave item's names "item1, item2 etc..". descriptions and prices also. I will edit them later. You should use JavaScript Objects and Arrays! It should be dynamically Generated!

Make the html/css/javascript code like this please. category1 = Korean traditional category2 = European wine category3 = Canadian beer each category has 7 items.  Just leave item's names "item1, item2 etc..". descriptions and prices also. I will edit them later. You should use JavaScript Objects and Arrays! It should be dynamically Generated!

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question

Make the html/css/javascript code like this please.

category1 = Korean traditional
category2 = European wine
category3 = Canadian beer

each category has 7 items. 
Just leave item's names "item1, item2 etc..".
descriptions and prices also.
I will edit them later.

You should use JavaScript Objects and Arrays!

It should be dynamically Generated!

Some of your site will be static (i.e., coded in HTML directly in index.html) and never change. Other parts of the site will be dynamic (i.e., created using DOM API calls at run-time) and will update in response to various events and user actions. Here is a basic wireframe of what your site needs to include, and which parts are static or dynamic. NOTE: don't worry too much about how it looks. Focus on the structure and functionality. Menu Navigation: Clickable Category Names Dynamically Generated Category1 Category2 Category1 Name Name Item 1 Item 2 Item 3 Selected Category Name: Dynamically Set When Category is Clicked Header: Always the same Store Name Store Slogan/Description... Category3 Description Item 1 description... Item 2 description... Item 3 description.... Table Body: Dynamic, All Non-Discontinued Inventory Items for Chosen Category Price $3.99 $53.00 $0.75 Table Header: Always the Same Clicking Anywhere On A Row should console.log() Price formatted to Dollars and Cents Dynamic Content All of your store's dynamic content will be written in JavaScript in the `src/app.js` file. Here is a list of the tasks you need to complete: 1. Create an event handler to run when the page is loaded. Your function should do the following: a. Create all of the buttons for your store's Categories i. Loop through all of your category objects and create a <button> element for each, adding it to the <nav id="menu">...</nav> ii. Use each Category's name for the button's text iii. When the button is clicked, show that category's products in your <tbody>...</tbody>. See below for more details. b. Show a list of products in the <tbody>...</tbody> of your Table. By default, you should use your first category. See below for more details 2. Write a function that will show a product list in the <tbody>...</tbody> based on a category Object: a. Update the text of the Selected Category Title above your table with the category's name b. Clear the current <tr>...</tr> rows from the <tbody>...</tbody>. HINT: innerHTML = "" wwwwwwww c. Filter your products Array (i.e., use Array.prototype.filter()) to get: i. All products in the chosen category. HINT: use Array.prototype.includes() ii. All products that are NOT discontinued d. Loop (use Array.prototype.forEach()) over your filtered product list and add them to the table's body: i. Create a <tr> element 1. Add a click handler to your <tr> that will console.log() the product whenever the user clicks it ii. Create <td> elements for the product's title, description, and price 1. Convert the price in cents to dollars and cents 2. Format it as Canadian Currency (HINT: research Intl. NumberFormat() and currency formatting) iii. Append these <td> elements to the <tr> iv. Append this <tr> to the <tbody> In your solution, you will likely require all of the following: console.log() and NOTE that you can log Objects like so: console.log({ object }) document.querySelector() to find elements in the DOM document.createElement() to create new DOM elements node.appendChild() to add an element as a child of a DOM node element.innerHTML to modify the HTML content of an element. Don't overuse this!
Transcribed Image Text:Some of your site will be static (i.e., coded in HTML directly in index.html) and never change. Other parts of the site will be dynamic (i.e., created using DOM API calls at run-time) and will update in response to various events and user actions. Here is a basic wireframe of what your site needs to include, and which parts are static or dynamic. NOTE: don't worry too much about how it looks. Focus on the structure and functionality. Menu Navigation: Clickable Category Names Dynamically Generated Category1 Category2 Category1 Name Name Item 1 Item 2 Item 3 Selected Category Name: Dynamically Set When Category is Clicked Header: Always the same Store Name Store Slogan/Description... Category3 Description Item 1 description... Item 2 description... Item 3 description.... Table Body: Dynamic, All Non-Discontinued Inventory Items for Chosen Category Price $3.99 $53.00 $0.75 Table Header: Always the Same Clicking Anywhere On A Row should console.log() Price formatted to Dollars and Cents Dynamic Content All of your store's dynamic content will be written in JavaScript in the `src/app.js` file. Here is a list of the tasks you need to complete: 1. Create an event handler to run when the page is loaded. Your function should do the following: a. Create all of the buttons for your store's Categories i. Loop through all of your category objects and create a <button> element for each, adding it to the <nav id="menu">...</nav> ii. Use each Category's name for the button's text iii. When the button is clicked, show that category's products in your <tbody>...</tbody>. See below for more details. b. Show a list of products in the <tbody>...</tbody> of your Table. By default, you should use your first category. See below for more details 2. Write a function that will show a product list in the <tbody>...</tbody> based on a category Object: a. Update the text of the Selected Category Title above your table with the category's name b. Clear the current <tr>...</tr> rows from the <tbody>...</tbody>. HINT: innerHTML = "" wwwwwwww c. Filter your products Array (i.e., use Array.prototype.filter()) to get: i. All products in the chosen category. HINT: use Array.prototype.includes() ii. All products that are NOT discontinued d. Loop (use Array.prototype.forEach()) over your filtered product list and add them to the table's body: i. Create a <tr> element 1. Add a click handler to your <tr> that will console.log() the product whenever the user clicks it ii. Create <td> elements for the product's title, description, and price 1. Convert the price in cents to dollars and cents 2. Format it as Canadian Currency (HINT: research Intl. NumberFormat() and currency formatting) iii. Append these <td> elements to the <tr> iv. Append this <tr> to the <tbody> In your solution, you will likely require all of the following: console.log() and NOTE that you can log Objects like so: console.log({ object }) document.querySelector() to find elements in the DOM document.createElement() to create new DOM elements node.appendChild() to add an element as a child of a DOM node element.innerHTML to modify the HTML content of an element. Don't overuse this!
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 4 steps with 8 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
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 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)
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
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS