title: error "r" is not defined when I try to log it into the console
body: <p>When trying to test my code using the variable r. Which I defined with window.r , It gives me an error variable not defined.</p>
  
  <p>When I type <code>r.parseIngredients()</code> into the command line, the following error occurs:</p>
  
  <blockquote>
    <p>VM3439:1 Uncaught ReferenceError: r is not defined
        at :1:1</p>
  </blockquote>
  
  <h2>index.js file:</h2>
  
  <pre><code>import Search from './models/Search';
  import Recipe from './models/Recipe';
  import * as searchView from './views/searchView';
  import { elements, renderLoader, clearLoader } from './views/base';
  
  // const search = new Search('pizza');
  // console.log(search);
  // search.getResults();
  
  /**  GLobal state of the app
   *  - Search object
   *  - Current Recipe Object
   *  - Shopping list object
   *  - Liked recipes
   */
  const state = {};
  
  /*
  -- Search Controller
  */
      const controlSearch = async () =&gt; {
      // 1) Get query from view
      // const query = searchView.getInput();
      const query = 'pizza';
  
      if (query) {
          // 2) New seach object and add to state
          state.search = new Search(query);
  
          // 3) Prepare UI for results
          searchView.clearInput();
          searchView.clearResults();
          renderLoader(elements.searchRes);
  
          try {    
              // 4) Search for recipes
              await state.search.getResults();
  
              // 5) Render results on UI
              clearLoader();
              searchView.renderResults(state.search.results);
          } catch (err) {
              alert('Something wrong with the search...');
              clearLoader();
          }
      }
  }
  
  elements.searchForm.addEventListener('submit', e =&gt; {
      e.preventDefault();
      controlSearch();
  });
  
  
  // Testing
  window.addEventListener('load', e =&gt; {
      e.preventDefault();
      controlSearch();
  });
  
  elements.searchResPages.addEventListener('click', e =&gt; {
      const btn = e.target.closest('.btn-inline');
      if (btn) {
          const goToPage = parseInt(btn.dataset.goto, 10);
          searchView.clearResults();
          searchView.renderResults(state.search.results, goToPage);
      }
  });
  
  /*
  Recipe Controller
  */
  const controlRecipe = async () =&gt; {
      // Get ID from url
      const id = window.location.hash.replace('#', '');
      console.log(id);
  
      if (id) {
          // Prepare UI for changes
  
          // Create new recipe object
          state.recipe = new Recipe(id);
  
          // Testing 
          window.r = state.recipe;
  
          try {
              // get recipe data
              await state.recipe.getRecipe();
  
              // Calculate servings and time
              state.recipe.calcTime();
              state.recipe.calcServings();
  
              // Render recipe
              console.log(state.recipe);
  
          } catch (err) {
              alert('Error processing recipe!');
          }
  
      }
  };
  
  // window.addEventListener('hashchange', controlRecipe);
  // window.addEventListener('load', controlRecipe);
  
  ['hashchange', 'load'].forEach(event =&gt; window.addEventListener(event, controlRecipe));
  </code></pre>
  
  <h2>Recipe.js file:</h2>
  
  <pre><code>import axios from 'axios';
  import { key, proxy } from '../config.js'
  
  export default class Recipe {
      constructor(id) {
          this.id = id;
      }
  
      async getRecipe() {
          try {
              const res = await axios(`${proxy}http://food2fork.com/api/get?key=${key}&amp;rId=${this.id}`);
              this.title = res.data.recipe.title;
              this.author = res.data.recipe.publisher;
              this.img = res.data.recipe.image_url;
              this.url = res.data.recipe.source_url;
              this.ingredients = res.data.recipe.ingredients;
              console.log(res);
          } catch (error) {
              console.log(error);
              alert('Something went wrong')
          }
      }
  
      calcTime() {
          // Assuming that we need 15 min for each 3 ingredients
          const numIng =  this.ingredients. length;
          const periods = Math.ceil(numIng / 3);
          this.time = periods * 15;
      }
  
      calcServings() {
          this.servings = 4;
      }
  
      parseIngredients() {
          const unitsLong = ['tablespoons', 'tablespoon', 'ounces', 'ounce', 'teaspoons', 'teaspoon', 'cups', 'pounds'];
          const unitsShort = ['tbsp', 'tbsp', 'oz', 'oz', 'tsp', 'tsp', 'cup', 'pound'];
  
          const newIngredients = this.ingredients.map(el =&gt; {
              // 1) Uniform units
              let ingredient = el.toLowerCase();
              unitsLong.forEach((unit, i) =&gt; {
                  ingredient = ingredient.replace(unit, unitsShort[i]);
              });
  
              // 2) Remove parentheses
              ingredient = ingredient.replace(/ *\([^)]*\) */g, ' ')
  
              // 3) Parse ingredients into count, unit and ingredient
              const arrIng = ingredient.split(' ');
              const unitIndex = arrIng.findIndex(el2 =&gt; unitsLong.includes(el2));
  
              let objIng;
              if (unitIndex &gt; -1) {
                  // There is a unit
                  // Ex. 4 1/2 cups, arrCount is [4, 1/2]
                  // 4 cups, arrCount is [4]
                  const arrCount = arrIng.slice(0, unitIndex);
  
                  let count;
                  if (arrCount.length === 1) {
                      count = arrIng[0];
                  } else {
                      count = eval(arrIng.slice(0, unitIndex).join('+'));
                  }
  
              } else if (parseInt(arrIng[0], 10)) {
                  // There is no unit, but the first element is a number
                  objIng = {
                      count: parseInt(arrIng[0], 10),
                      unit: '',
                      ingredient: arrIng.slice(1).join(' ')
                  }
  
              } else if (unitIndex === -1) {
                  // There is no unit and No number in the 1st position
                  objIng = {
                      count: 1,
                      unit: '',
                      ingredient 
                  }
              }
  
              return objIng;
          });
          this.ingredients = newIngredients;
      }
  }
  </code></pre>
  
  <p><code>r.parseIngredients()</code> should display the ingredients units abbreviated. <strong>ex: 4 tablespoons should be 4 tbsp.</strong></p>