Answered: Need Help with a JavaScript problem…

EBK JAVA PROGRAMMING

8th Edition

ISBN:9781305480537

Author:FARRELL

Publisher:FARRELL

Chapter16: Graphics

Section: Chapter Questions

Problem 3GZ

See similar textbooks

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>

<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`

<span class="button-label">check</span>

</button>

<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

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 4 images

SEE SOLUTION Check out a sample Q&A here

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.