Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 526db2f

Browse files
184 Forkify: Shopping List Controller
- Added 7.7.14 named as "Building the Shopping List Controller"
1 parent 5dea8e1 commit 526db2f

File tree

4 files changed

+69
-12
lines changed

4 files changed

+69
-12
lines changed

‎Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/index.js‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/********************************************************************************************************************
2-
* Implementation of the listView Module at ./src/js/views/listView.js.
2+
* We will now implement the controller for the shopping list in this controller module named as controlList() below.
33
*
4+
* controlList() is only called when the "Add to Shopping List" Button is clicked in the .recipe class.
5+
*
6+
* Therefore, we handle that using event delegation in .recipe class' element again.
7+
*
8+
* We also handle click event when the user wants to update/remove the item from the shopping list.
49
*/
510
// Import Data Models
611
import Search from './models/Search';
@@ -10,6 +15,7 @@ import List from './models/List';
1015
// Import Front-End Views
1116
import * as searchView from './views/searchView';
1217
import * as recipeView from './views/recipeView';
18+
import * as listView from './views/listView';
1319

1420
// Import Common Code Base
1521
import { elements, renderLoader, clearLoader, elementStrings } from './views/base';
@@ -22,6 +28,7 @@ import { elements, renderLoader, clearLoader, elementStrings } from './views/bas
2228
* - Liked Recipes -- Stored persistently. We'll know about JS local storage (i.e., persistent data) later.
2329
*/
2430
const state = {};
31+
window.state = state; // TESTING
2532

2633
// SEARCH CONTROLLER
2734
const controlSearch = async () => {
@@ -144,6 +151,48 @@ const controlRecipe = async () => {
144151
['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe));
145152

146153

154+
// SHOPPING LIST CONTROLLER
155+
156+
// TEST CODE
157+
// window.l = new List();
158+
159+
const controlList = () => {
160+
// Create a new shopping list, IF there is none yet
161+
if (!state.list)
162+
state.list = new List();
163+
164+
// Add each ingredient to the list and the UI
165+
state.recipe.ingredients.forEach(el => {
166+
const item = state.list.addItem(el.count, el.unit, el.ingredient);
167+
listView.renderItem(item);
168+
});
169+
};
170+
171+
172+
// Handling update/delete list item events
173+
elements.shopping.addEventListener('click', event => {
174+
// get the ID of the item we want to delete/update
175+
const id = event.target.closest(`.${elementStrings.shoppingItem}`).dataset.itemid;
176+
177+
// handle the delete event
178+
if (event.target.matches(`.${elementStrings.shoppingDelete}, .${elementStrings.shoppingDelete} *`)) {
179+
// Delete from state
180+
state.list.deleteItem(id);
181+
182+
// Remove the item from the UI
183+
listView.deleteItem(id);
184+
}
185+
186+
// handle the updation of the items in the shopping list
187+
else if (event.target.matches(`.${elementStrings.shoppingCount}`)) {
188+
// Read the data from the UI and update it in our state
189+
const val = parseFloat(event.target.value, 10);
190+
if (val >= 0)
191+
state.list.updateCount(id, val);
192+
}
193+
});
194+
195+
147196
// Handling recipe button clicks
148197
elements.recipe.addEventListener('click', event => {
149198
// This time we cannot use the closest() method because this time we have two buttons that can be clicked.
@@ -154,19 +203,22 @@ elements.recipe.addEventListener('click', event => {
154203

155204
// Decrease Servings Button is clicked
156205
if (event.target.matches(`.${elementStrings.servingsDecreaseButton}, .${elementStrings.servingsDecreaseButton} *`)
157-
&& state.recipe.servings > 1)
206+
&& state.recipe.servings > 1){
158207
state.recipe.updateServings('dec');
208+
recipeView.updateServingsAndIngredients(state.recipe);
209+
}
159210

160211
// Increase Servings Button is clicked
161-
else if (event.target.matches(`.${elementStrings.servingsIncreaseButton}, .${elementStrings.servingsIncreaseButton} *`))
212+
else if (event.target.matches(`.${elementStrings.servingsIncreaseButton}, .${elementStrings.servingsIncreaseButton} *`)){
162213
state.recipe.updateServings('inc');
214+
recipeView.updateServingsAndIngredients(state.recipe);
215+
}
163216

164-
recipeView.updateServingsAndIngredients(state.recipe);
217+
else if (event.target.matches(`.${elementStrings.addToShoppingList}, .${elementStrings.addToShoppingList} *`)) {
218+
controlList();
219+
}
220+
165221
//console.log(state.recipe); // TESTING
166222
});
167223

168224

169-
// SHOPPING LIST CONTROLLER
170-
171-
// TEST CODE
172-
window.l = new List();

‎Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/base.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ export const elementStrings = {
2020
servingsIncreaseButton: "btn-increase",
2121
servingsDecreaseButton: "btn-decrease",
2222
ingredientQuantity: "recipe__count",
23-
servings: "recipe__info-data--people"
23+
servings: "recipe__info-data--people",
24+
addToShoppingList: "recipe__btn--add",
25+
shoppingItem: "shopping__item",
26+
shoppingDelete: "shopping__delete",
27+
shoppingCount: "shopping__count-value"
2428
};
2529

2630
// function to render the loading spinner from the ./dist/css/style.css.

‎Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/listView.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { elements } from './base';
33

44
export const renderItem = item => {
55
// Get the markup below .shopping__list class in ./index.html
6+
67
/** Array Version */
78
// const markup = `
89
// <li class="shopping__item" data-itemid=${item.id}>
@@ -23,7 +24,7 @@ export const renderItem = item => {
2324
const markup = `
2425
<li class="shopping__item" data-itemid=${item.id}>
2526
<div class="shopping__count">
26-
<input type="number" value="${item.value.count}" step="${item.value.count}" >
27+
<input type="number" value="${item.value.count}" step="${item.value.count}" min="0" class="shopping__count-value">
2728
<p>${item.value.unit}</p>
2829
</div>
2930
<p class="shopping__description">${item.value.ingredient}</p>
@@ -46,6 +47,6 @@ export const deleteItem = id => {
4647

4748
/** Map Version */
4849
const item = document.querySelector(`[data-itemid="${id}"]`);
49-
item.parentElement.removeChild(item);
50+
if(item)item.parentElement.removeChild(item);
5051
};
5152

‎Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/recipeView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export const renderRecipe = recipe => {
108108
${recipe.ingredients.map(el => createIngredient(el)).join('')}
109109
</ul>
110110
111-
<button >
111+
<button class="btn-small recipe__btn recipe__btn--add">
112112
<svg class="search__icon">
113113
<use href="img/icons.svg#icon-shopping-cart"></use>
114114
</svg>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /