Forkify

    Introduction
    • Concept of Application State
      State:
      It's about the state of the app in any given moment, like what is the current search, what's current on the shopping list, what's the current recipe.
      All of these data is the state and we want that to be in one central place, so in one central object, that will have basically all the data that defines the app in a given moment.
      In the Forkify app it's all stored in const state = {};

    • Advanced DOM manipulation techniques
      Always create a file that will contain all the classes used in the querySelectors and getElementByID, colors, etc so if we want to change them, it will be easy.

    • ES6 template string to render entire HTML components

    • How to create a loading spinner
      a) Build it on the base.js file, where there's the base classes and colors, so if we need to reuse, it's already ready.

    • Closest Method
      In one button, let's say we have the buttons (Page 1 <) and (Page 2 >).
      If we click on page, we select the span element, if we click on the arrow, we select the SVG icon, and if we click on the button itself, we select the button element.
      So, it's complicated to say that I want something to happen when a click on the button happens, because there's many areas where the click can happen.
      There's where the Closest Method comes in.
      const btn = e.target.closest('.btn-inline'); // this is the buttons class, now if we click on the Page, 1 or < it will select the button.
      What it does: it returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
      Syntax: Element.closest()

    • Selecionando IDs
      Whenever we click on one of the recipes, we get the recipes id un the URL.
      Example: diegommagno.com/?#474742.
      Inside this URL, the #474742 is called "the hash".
      We use the fact that everytime we click a new recipe, this hash changes to the clicked recipes id.
      So, we use the hash change event, that is fired everytime the hash on URL is changed.