Add shopping list view and controller

src/js/config.js

@@ -1,3 +1,3 @@
 export const proxy = "https://cors-anywhere.herokuapp.com/";
-export const key = "a29e6f0d970c58f6b815fcf932d8b209";
+export const key = "88cbb175bfc3969652528d64a25711e0";
 export const url = "http://food2fork.com/api/";

src/js/index.js

@@ -4,6 +4,7 @@ import List from "./models/List";
 import { elements, renderLoader, clearLoader } from "./views/base";
 import * as searchView from "./views/searchView";
 import * as recipeView from "./views/recipeView";
+import * as listView from "./views/listView";
 
 /** Global state of the app
  * - Search Object
@@ -13,6 +14,7 @@ import * as recipeView from "./views/recipeView";
  */
 
 const state = {};
+window.state = state;
 
 /**
  * SEARCH CONTROLLER
@@ -99,6 +101,37 @@ const controlRecipe = async () => {
 // fire controlrecipe if the hashchange or on pageload
 ["hashchange", "load"].forEach(event => addEventListener(event, controlRecipe));
 
+/**
+ * LIST CONTROLLER
+ **/
+const controlList = () => {
+  // create a new list, if none exists yet
+  if (!state.list) state.list = new List();
+
+  // Add all the ingredients to the list
+  state.recipe.ingredients.forEach(el => {
+    const item = state.list.addItems(el.count, el.unit, el.ingredient);
+    listView.renderItem(item);
+  });
+};
+
+// Delete and update list items
+elements.shopping.addEventListener("click", e => {
+  // get the id of the clicked element
+  const id = e.target.closest(".shopping__item").dataset.itemid;
+
+  // delete and update the list
+  if (e.target.matches(".shopping__delete, .shopping__delete *")) {
+    state.list.deleteItem(id);
+    listView.deleteItem(id);
+  } else if (e.target.matches(".shopping__count-value")) {
+    // get the new value
+    const value = parseFloat(e.target.value, 10);
+    // Update in list
+    state.list.updateItems(id, value);
+  }
+});
+
 // Update servings button event handler
 elements.recipe.addEventListener("click", e => {
   if (e.target.matches(".btn-decrease, .btn-decrease *")) {
@@ -111,10 +144,7 @@ elements.recipe.addEventListener("click", e => {
     // increase button clicked
     state.recipe.updateServings("inc");
     recipeView.updateRecipeServings(state.recipe);
+  } else if (e.target.matches(".recipe__btn-add, .recipe__btn-add *")) {
+    controlList();
   }
 });
-
-/**
- * LIST CONTROLLER
- **/
-window.l = new List();

src/js/views/base.js

@@ -4,7 +4,8 @@ export const elements = {
   searchResults: document.querySelector(".results"),
   searchResultsList: document.querySelector(".results__list"),
   searchResultsPages: document.querySelector(".results__pages"),
-  recipe: document.querySelector(".recipe")
+  recipe: document.querySelector(".recipe"),
+  shopping: document.querySelector(".shopping__list")
 };
 
 export const elementStrings = {

src/js/views/listView.js

@@ -0,0 +1,26 @@
+import { elements } from "./base";
+
+export const renderItem = item => {
+  const markup = `
+    <li class="shopping__item" data-itemid=${item.id}>
+      <div class="shopping__count">
+          <input type="number" value="${item.count}" step="${item.count}"
+          class="shopping__count-value">
+          <p>${item.unit}</p>
+      </div>
+      <p class="shopping__description">${item.ingredient}</p>
+      <button class="shopping__delete btn-tiny">
+          <svg>
+              <use href="img/icons.svg#icon-circle-with-cross"></use>
+          </svg>
+      </button>
+  </li>
+  `;
+
+  elements.shopping.insertAdjacentHTML("beforeend", markup);
+};
+
+export const deleteItem = id => {
+  const item = document.querySelector(`[data-itemId="${id}"]`);
+  if (item) item.parentElement.removeChild(item);
+};

src/js/views/recipeView.js

@@ -96,7 +96,7 @@ export const renderRecipe = recipe => {
                 ${recipe.ingredients.map(el => createIngredient(el)).join("")}
                 </ul>
 
-                <button class="btn-small recipe__btn">
+                <button class="btn-small recipe__btn recipe__btn-add">
                     <svg class="search__icon">
                         <use href="img/icons.svg#icon-shopping-cart"></use>
                     </svg>