Need Help with a JavaScript problem You will be creating a Shopping List App (sort of ToDo app) You will build it with 5 main functions (you may have a few helper functions as well): renderShoppingList => "A shopping list should be rendered to the page" handleNewItemSubmit => "You should be able to add items to the list" handleItemCheckClicked => "You should be able to check items on the list" handleDeleteItemClicked() => "You should be able to delete items from the list" The final function, handleShoppingList, will be responsible for calling all our other ones (functions). It will be the callback function for our app's document ready. All you have to do for this assignment is add the code inside renderShoppingList() function to render the initial items from the STORE and using the jQuery methods html to the .js-shopping-list element. HTML Code:
Need Help with a JavaScript problem You will be creating a Shopping List App (sort of ToDo app) You will build it with 5 main functions (you may have a few helper functions as well): renderShoppingList => "A shopping list should be rendered to the page" handleNewItemSubmit => "You should be able to add items to the list" handleItemCheckClicked => "You should be able to check items on the list" handleDeleteItemClicked() => "You should be able to delete items from the list" The final function, handleShoppingList, will be responsible for calling all our other ones (functions). It will be the callback function for our app's document ready. All you have to do for this assignment is add the code inside renderShoppingList() function to render the initial items from the STORE and using the jQuery methods html to the .js-shopping-list element. HTML Code:
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
Related questions
Question
Need Help with a JavaScript problem
You will be creating a Shopping List App (sort of ToDo app)
You will build it with 5 main functions (you may have a few helper functions as well):
- renderShoppingList => "A shopping list should be rendered to the page"
- handleNewItemSubmit => "You should be able to add items to the list"
- handleItemCheckClicked => "You should be able to check items on the list"
- handleDeleteItemClicked() => "You should be able to delete items from the list"
The final function, handleShoppingList, will be responsible for calling all our other ones (functions). It will be the callback function for our app's document ready.
All you have to do for this assignment is add the code inside renderShoppingList() function to render the initial items from the STORE and using the jQuery methods html to the .js-shopping-list element.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<linkrel="shortcut icon"href="#">
<linkhref="https://fonts.googleapis.com/css?family=Old+Standard+TT"rel="stylesheet">
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<linkhref="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<linkrel="stylesheet"href="index.css">
</head>
<body>
<divclass="container">
<h1>Shopping List</h1>
<formid="js-shopping-list-form">
<labelfor="shopping-list-entry">Add an item</label>
<inputtype="text"name="shopping-list-entry"class="js-shopping-list-entry"placeholder="e.g., broccoli">
<buttontype="submit">Add item</button>
</form>
<ulclass="shopping-list js-shopping-list">
</ul>
</div>
<scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/cuid/1.3.8/browser-cuid.min.js"></script>
<scriptsrc="//code.jquery.com/jquery.min.js"></script>
<scripttype="text/javascript"src="script.js"></script>
</body>
</html>
JavaScript code:
// `STORE` is responsible for storing the underlying data
// that our app needs to keep track of in order to work.
//
// for a shopping list, our data model is pretty simple.
// we just have an array of shopping list items. each one
// is an object with a `name` and a `checked` property that
// indicates if it's checked off or not.
// we're pre-adding items to the shopping list so there's
// something to see when the page first loads.
const STORE = [
{id: cuid(), name: "apples", checked: false},
{id: cuid(), name: "oranges", checked: false},
{id: cuid(), name: "milk", checked: true},
{id: cuid(), name: "bread", checked: false}
];
// HELPER function for generateShoppingItemsString()
function generateItemElement(item) {
// returns and a string literal of HTML and values from each object
return`
<li data-item-id="${item.id}">
<span class="shopping-item js-shopping-item ${item.checked ? "shopping-item__checked" : ''}">${item.name}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle js-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete js-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`;
}
// HELPER FUNCTION for renderShoppingList
function generateShoppingItemsString(shoppingList) {
console.log("Generating shopping list element");
// stores an array of all the HTML to be rendered on the page.
const items = shoppingList.map((item) => generateItemElement(item));
// returns a string from each item in array
return items.join("");
}
function renderShoppingList() {
// you will be calling generateShoppingItemsString AND rendering to the page
// put your code here only
console.log('`renderShoppingList` ran');
}
function handleNewItemSubmit() {
// this function will be responsible for when users add a new shopping list item
console.log('`handleNewItemSubmit` ran');
}
function handleItemCheckClicked() {
// this function will be responsible for when users click the "check" button on
// a shopping list item.
console.log('`handleItemCheckClicked` ran');
}
function handleDeleteItemClicked() {
// this function will be responsible for when users want to delete a shopping list
// item
console.log('`handleDeleteItemClicked` ran')
}
// this function will be our callback when the page loads. it's responsible for
// initially rendering the shopping list, and activating our individual functions
// that handle new item submission and user clicks on the "check" and "delete" buttons
// for individual shopping list items.
function handleShoppingList() {
renderShoppingList();
//handleNewItemSubmit();
//handleItemCheckClicked();
//handleDeleteItemClicked();
}
// when the page loads, call `handleShoppingList`
$(handleShoppingList);
Expert Solution
![](/static/compass_v2/shared-icons/check-mark.png)
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 4 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education