JS Module pattern

3/8/2019 - 3:14 AM

const FeatureController = (function () {
  // Métodos Privados
  const itemFood = function (prop) {
    this.prop = prop;
  }

  // Métodos Públicos
  return {
    nome: function () {
      return x;
    },
  }
})();

const UIController = (function () {
  const UISelectors = {
    itemList: '#item-list',
    btnAddFoodItem: '.add-btn',
    itemFoodName: '#item-name',
    itemFoodCalories: '#item-calories'
  }
  return {
    name: function () {
     },
  }
})();

const App = (function (FeatureController, UIController) {

  const loadEventListners = function () {
  
  }

  return {
    init: function () {
      console.log('Initializing App...')
      loadEventListners();
    }
  }
})(FeatureController, UIController);

App.init();

app.js

const ItemController = (function () {
  const itemFood = function (id, name, calorie) {
    this.id = id;
    this.name = name;
    this.calorie = calorie;
  }

  const dataFood = {
    items: [
      { id: 0, name: 'Carne Moída', calories: 1200 },
      { id: 1, name: 'Peixe', calories: 1000 },
      { id: 2, name: 'Salada', calories: 200 }
    ],
    currentItem: null,
    totalCcalories: 0
  }

  return {
    getItemsFood: function () {
      return dataFood.items;
    },
    addItemFood: function (name, calories) {
      let ID;
      // Create ID
      if (dataFood.items.length > 0) {
        ID = dataFood.items[dataFood.items.length - 1].id + 1;
      } else {
        ID = 0;
      }

      // Calories to number
      calories = parseInt(calories);

      // Create new item
      newItemFood = new itemFood(ID, name, calories);
			console.log('TCL: ItemController -> newItemFood', newItemFood)

      // Add to items array
      dataFood.items.push(newItemFood);

      return newItemFood;

    },
    logDataFood: function () {
      return dataFood;
    }
  }

})();

const UIController = (function () {
  const UISelectors = {
    itemList: '#item-list',
    btnAddFoodItem: '.add-btn',
    itemFoodName: '#item-name',
    itemFoodCalories: '#item-calories'
  }
  return {
    populateUiWithFoods: function (itemsFood) {
      let html = '';
      itemsFood.forEach(itemFood => {
        html += `<li class="collection-item" id="item-${itemFood.id}">
        <strong>${itemFood.name}: </strong> <em>${itemFood.calories} Calories</em>
        <a href="#" class="secondary-content">
          <i class="edit-item fa fa-pencil"></i>
        </a>
      </li>`;

      });

      document.querySelector(UISelectors.itemList).innerHTML = html

    },
    getItemFoodInput: function () {
      return {
        name: document.querySelector(UISelectors.itemFoodName).value,
        calories: document.querySelector(UISelectors.itemFoodCalories).value
      }

    },
    getUISelectors: function () {
      return UISelectors;
    }
  }
})();

const App = (function (ItemController, UIController) {

  const loadEventListners = function () {
    const UISelectors = UIController.getUISelectors();

    document.querySelector(UISelectors.btnAddFoodItem).addEventListener('click', itemAddFood)
  }

  const itemAddFood = function (e) {
    const itemFoodInput = UIController.getItemFoodInput();

    if (itemFoodInput.name !== '' && itemFoodInput.calories !== '') {
      const newItemFood = ItemController.addItemFood(itemFoodInput.name, itemFoodInput.calories)
    }
    e.preventDefault();
  }

  return {
    init: function () {
      console.log('Initializing App...')

      const itemsFood = ItemController.getItemsFood();
      UIController.populateUiWithFoods(itemsFood);

      loadEventListners();
    }
  }
})(ItemController, UIController);

App.init();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <title>Tracalorie | Meal & Calorie Tracker</title>
</head>
<body>
  <!-- Navbar -->
  <nav>
    <div class="nav-wrapper blue">
      <div class="container">
        <a href="#" class="brand-logo center">Tracalorie</a>
        <ul class="right">
          <li><a href="#" class="clear-btn btn blue lighten-3">Clear All</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <br>

  <div class="container">
    <!-- Form Card -->
    <div class="card">
      <div class="card-content">
        <span class="card-title">Add Meal / Food Item</span>
        <form class="col">
          <div class="row">
            <div class="input-field col s6">
              <input type="text" placeholder="Add Item" id="item-name">
              <label for="item-name">Meal</label>
            </div>
            <div class="input-field col s6">
                <input type="text" placeholder="Add Calories" id="item-calories">
                <label for="item-calories">Calories</label>
            </div>
            <button class="add-btn btn blue darken-3"><i class="fa fa-plus"></i> Add Meal</button>
            <!--
            <button class="update-btn btn orange"><i class="fa fa-pencil-square-o"></i> Update Meal</button>
            <button class="delete-btn btn red"><i class="fa fa-remove"></i> Delete Meal</button>
            -->
            <button class="back-btn btn grey pull-right"><i class="fa fa-chevron-circle-left"></i> Back</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Calorie Count -->
    <h3 class="center-align">Total Calories: <span class="total-calories">0</span></h3>

    <!-- Item List -->
    <ul id="item-list" class="collection">
      <!--
      <li class="collection-item" id="item-0">
        <strong>Steak Dinner: </strong> <em>1200 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil"></i>
        </a>
      </li>
      <li class="collection-item" id="item-0">
        <strong>Cookie: </strong> <em>400 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil"></i>
        </a>
      </li>
      <li class="collection-item" id="item-0">
        <strong>Eggs: </strong> <em>300 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil"></i>
        </a>
      </li>
    -->
    </ul>
  </div>

  <script src="app.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>    
</body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS Module pattern