Tutorial Pemrograman

Cara Membuat Kalkulator Kalori dengan JavaScript

Salah satu cara termudah untuk mengendalikan berat badan adalah dengan cara mengontrol jumlah asupan kalori yang masuk ke dalam tubuh. Dengan bahasa pemrograman JavaScript, kita dapat dengan mudah membuat kalkulator kalori. Kalkulator kalori bertujuan untuk menghitung semua asupan kalori dalam makanan yang akan masuk ke dalam tubuh.

Lalu, bagaimana caranya membuat kalkulator kalori dengan bahasa pemrograman JavaScript? Yuk buka komputer kamu dan ikuti beberapa langkah mudah di bawah ini.

1. Buka XAMPP Control Panel, serta aktifkan Apache.

2. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membuat Kalkulator Kalori dengan JavaScript</title>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body>
    <nav>
        <div class="nav-wrapper red">
            <div class="container">
                <a href="#" class="brand-logo center">Kalkulator Kalori</a>
                <ul>
                    <li>
                        <a href="#" class="clear-btn btn red lighten-3">Hapus</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <br>

    <div class="container">
        <div class="card">
            <div class="card-content">
                <span class="card-title">Tambahkan Jenis Makanan</span>
                <form class="col">
                    <div class="row">
                        <div class="input-field col s6">
                            <input type="text" placeholder="Nama Makanan" id="item-name">
                            <label for="item-name">Nama Makanan</label>

                        </div>
                        <div class="input-field col s6">
                            <input type="number" placeholder="Jumlah Kalori" id="item-calories">
                            <label for="item-calories">Jumlah Kalori</label>
                        </div>
                    </div>
                    <div class="row">
                        <button class="btn add-btn blue green"><i class="fa fa-plus"></i> Tambah</button>
                        <button class="btn update-btn orange"><i class="fa fa-pencil-square-o"></i> Perbaharui</button>
                        <button class="btn delete-btn red"><i class="fa fa-remove"></i> Hapus</button>
                        <button class="btn back-btn grey pull-right"><i class="fa fa-chevron-circle-left"></i>
                            Kembali</button>
                    </div>
                </form>
            </div>
        </div>

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

        <!-- Item list -->
        <ul id="item-list" class="collection">
            <!-- <li class="collection-item" id="item-0"><strong>Steak:</strong> <em>900 Calories</em>
                <a href=3"" class="secondary-content"><i class="fa fa-pencil"></i></a>
            </li>
            <li class="collection-item" id="item-0"><strong>Egg:</strong> <em>600 Calories</em>
                <a href=3"" class="secondary-content"><i class="fa fa-pencil"></i></a>
            </li>
            <li class="collection-item" id="item-0"><strong>Cookies:</strong> <em>900 Calories</em>
                <a href=3"" class="secondary-content"><i class="fa fa-pencil"></i></a>
            </li> -->
        </ul>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script src="script.js"></script>
</body>

</html>

Simpan kode HTML5 di atas di folder xampplite → htdocs → buat folder baru dengan nama KalkulatorKalori → simpan kode di atas dengan nama index.html. karena script bahasa pemograman CSS hanya sedikit, maka script css langsung digabungkan di file index.html

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/ KalkulatorKalori. Tampilan kalkulator kalori yang sudah lengkap dengan background. Namun, kalkulator kalori belum bisa digunakan.

4. Agar kalkulator kalori bisa digunakan, buka halaman teks editor baru dan ketikkan kode JavaScript berikut ini.

//Storage Controller
const StorageCtrl = (function () {
  // public methods
  return {
    storeItem: function (item) {
      let items;
      //check if any items in local storage
      if (localStorage.getItem("items") === null) {
        items = [];
        //push new items
        items.push(item);
        //set local storage
        localStorage.setItem("items", JSON.stringify(items));
      } else {
        items = JSON.parse(localStorage.getItem("items"));
        items.push(item);
        localStorage.setItem("items", JSON.stringify(items));
      }
    },
    getItemFromStorage: function () {
      let items;
      if (localStorage.getItem("items") === null) {
        items = [];
      } else {
        items = JSON.parse(localStorage.getItem("items"));
      }
      return items;
    },
    updateItemStorage: function (updatedItem) {
      let items = JSON.parse(localStorage.getItem("items"));
      items.forEach((item, index) => {
        if (updatedItem.id === item.id) {
          items.splice(index, 1, updatedItem);
        }
      });
      localStorage.setItem("items", JSON.stringify(items));
    },
    deleteItemStorage: function (itemToDeleteID) {
      let items = JSON.parse(localStorage.getItem("items"));
      items.forEach((item, index) => {
        if (itemToDeleteID === item.id) {
          items.splice(index, 1);
        }
      });
      localStorage.setItem("items", JSON.stringify(items));
    },
    removeAllItems: function () {
      localStorage.removeItem("items");
    },
  };
})();

//Iten Controller
const ItemCtrl = (function () {
  //item Constructor
  const Item = function (name, calories) {
    this.id = id.next().value;
    this.calories = calories;
    this.name = name;
  };

  function* genID() {
    let id = 1;
    while (true) {
      yield id++;
    }
  }
  const id = genID();

  // Data Structure / State
  const data = {
    items: StorageCtrl.getItemFromStorage(),
    currentItem: null,
    totalCalories: 0,
  };

  //public methods
  return {
    getItems: function () {
      return data.items;
    },
    logData: function () {
      return data;
    },
    addItem: function (name, calories) {
      const newItem = new Item(name, parseInt(calories));
      data.items.push(newItem);
      return newItem;
    },
    getTotCalories: function () {
      let cal = 0;
      data.items.forEach((item) => {
        cal += item.calories;
      });
      data.totalCalories = cal;
      return data.totalCalories;
    },
    getItemByID: function (id) {
      let found = null;
      data.items.forEach((item) => {
        if (item.id === id) {
          found = item;
        }
      });
      return found;
    },
    updateItemByID: function (id, name, calories) {
      let updatedItem = null;
      data.items.forEach((item) => {
        if (item.id === id) {
          item.name = name;
          item.calories = parseInt(calories);
          updatedItem = item;
        }
      });
      return updatedItem;
    },
    setCurrentItem: function (item) {
      data.currentItem = item;
    },
    getCurrentItem: function () {
      return data.currentItem;
    },
    itemToBeDeleted: function (id) {
      //Get ids;
      const ids = data.items.map((item) => {
        return item.id;
      });
      const index = ids.indexOf(id);

      //Remove itme
      data.items.splice(index, 1);
    },
    clearAllItems: function () {
      data.items = [];
    },
  };
})();

//UI Controller
const UICrtl = (function () {
  const UISelectors = {
    itemList: "#item-list",
    listItems: "#item-list li",
    addBtn: ".add-btn",
    updateBtn: ".update-btn",
    deleteBtn: ".delete-btn",
    backBtn: ".back-btn",
    clearBtn: ".clear-btn",
    itemNameInput: "#item-name",
    itemCaloriesInput: "#item-calories",
    totalCalories: ".total-calories",
  };

  // public method
  return {
    populateItemList: function (items) {
      let html = "";
      items.forEach((item) => {
        html += `<li class="collection-item" id="item-${item.id}">
              <strong>${item.name}</strong> - <em>${item.calories} calories</em>
              <a href=3"" class="secondary-content"><i class="edit-item fa fa-pencil"></i></a>
          </li>`;
      });
      document.querySelector(UISelectors.itemList).innerHTML = html;
    },
    clearEditState: function () {
      UICrtl.clearInputs();
      document.querySelector(UISelectors.updateBtn).style.display = "none";
      document.querySelector(UISelectors.deleteBtn).style.display = "none";
      document.querySelector(UISelectors.backBtn).style.display = "none";
      document.querySelector(UISelectors.addBtn).style.display = "inline";
    },
    showEditState: function () {
      document.querySelector(UISelectors.updateBtn).style.display = "inline";
      document.querySelector(UISelectors.deleteBtn).style.display = "inline";
      document.querySelector(UISelectors.backBtn).style.display = "inline";
      document.querySelector(UISelectors.addBtn).style.display = "none";
    },
    getSelectors: function () {
      return UISelectors;
    },
    getItemInput: function () {
      return {
        name: document.querySelector(UISelectors.itemNameInput).value,
        calories: document.querySelector(UISelectors.itemCaloriesInput).value,
      };
    },
    addListItem(item) {
      const li = document.createElement("li");
      li.className = "collection-item";
      li.id = `item-${item.id}`;
      li.innerHTML = `
      <strong>${item.name}</strong> - <em>${item.calories} calories</em>
      <a href=3"" class="secondary-content">
      <i class="edit-item fa fa-pencil"></i></a>`;
      document
        .querySelector(UISelectors.itemList)
        .insertAdjacentElement("beforeend", li);
    },
    clearInputs: function () {
      document.querySelector(UISelectors.itemNameInput).value = "";
      document.querySelector(UISelectors.itemCaloriesInput).value = "";
    },
    statusList: function (status) {
      document.querySelector(UISelectors.itemList).style.display = status;
    },
    updateTotCalories: function (totalCal) {
      document.querySelector(UISelectors.totalCalories).innerHTML = totalCal;
    },
    addItemToForm: function () {
      const currentItem = ItemCtrl.getCurrentItem();
      document.querySelector(UISelectors.itemNameInput).value =
        currentItem.name;
      document.querySelector(UISelectors.itemCaloriesInput).value =
        currentItem.calories;
      UICrtl.showEditState();
    },
    updateListItem: function (item) {
      const listItems = document.querySelectorAll("#item-list li");
      const listItemsConvert = Array.from(listItems);
      listItemsConvert.forEach((li) => {
        const liID = li.getAttribute("id");
        if (liID === `item-${parseInt(item.id)}`) {
          li.innerHTML = `
            <strong>${item.name}</strong> - <em>${item.calories} calories</em>
            <a href=3"" class="secondary-content">
            <i class="edit-item fa fa-pencil"></i></a>`;
        }
      });
    },
    removeLiItem: function (id) {
      const itemID = `#item-${id}`;
      const item = document.querySelector(itemID);
      item.remove();
    },
    removeAllItems: function () {
      const items = document.getElementById("item-list");
      items.innerHTML = "";
    },
  };
})();

//App Controller
const App = (function (ItemCtrl, StorageCtrl, UICrtl) {
  //load event listener
  const loadEventListeners = function () {
    const UISelectors = UICrtl.getSelectors();

    //add item event
    document
      .querySelector(UISelectors.addBtn)
      .addEventListener("click", itemAddSubmit);

    //Edit icon click event
    document
      .querySelector(UISelectors.itemList)
      .addEventListener("click", itemEditClick);

    // Update one item
    document
      .querySelector(UISelectors.updateBtn)
      .addEventListener("click", itemUpdateSubmit);

    // Return to list adding
    document
      .querySelector(UISelectors.backBtn)
      .addEventListener("click", function (e) {
        UICrtl.clearEditState();
        e.preventDefault();
      });

    //Delte one item
    document
      .querySelector(UISelectors.deleteBtn)
      .addEventListener("click", deleteItem);

    document
      .querySelector(UISelectors.clearBtn)
      .addEventListener("click", clearAllItem);

    document.addEventListener("keypress", function (e) {
      if (e.keyCode === 13 || e.which === 13) {
        e.preventDefault();
        return false;
      }
    });
  };

  //add item submit
  const itemAddSubmit = function (e) {
    //Get form input from UICtrl
    const input = UICrtl.getItemInput();
    if (input.name !== "" && input.calories !== "") {
      const newItem = ItemCtrl.addItem(input.name, input.calories);

      //add item to the UI
      UICrtl.addListItem(newItem);

      //Get total calorie
      const totalCal = ItemCtrl.getTotCalories();

      //Update calorie.
      UICrtl.updateTotCalories(totalCal);

      // made list appeared
      UICrtl.statusList("block");

      //store in localStorage
      StorageCtrl.storeItem(newItem);

      //clear input fields
      UICrtl.clearInputs();
    }

    e.preventDefault();
  };

  const itemEditClick = function (e) {
    if (e.target.classList.contains("edit-item")) {
      //Get List item id
      const listID = e.target.parentNode.parentNode.id;

      //split the item-id tp get omlu te id
      const listIdArr = listID.split("-");
      // get the id number
      const id = parseInt(listIdArr[1]);

      //Get Item
      const itemToEdit = ItemCtrl.getItemByID(id);

      //set curret item
      ItemCtrl.setCurrentItem(itemToEdit);

      //add item to form
      UICrtl.addItemToForm();
    }
    e.preventDefault();
  };

  const itemUpdateSubmit = function (e) {
    const input = UICrtl.getItemInput();
    const itemId = ItemCtrl.getCurrentItem().id;

    // update the data
    const updatedItemSubmit = ItemCtrl.updateItemByID(
      itemId,
      input.name,
      input.calories
    );

    // udpate item list in UI
    UICrtl.updateListItem(updatedItemSubmit);

    //Get total calorie
    const totalCal = ItemCtrl.getTotCalories();

    //Update calorie.
    UICrtl.updateTotCalories(totalCal);

    //set ititial states
    UICrtl.clearEditState();

    //Udpate local storage
    StorageCtrl.updateItemStorage(updatedItemSubmit);

    //clear input fields
    UICrtl.clearInputs();

    e.preventDefault();
  };

  const deleteItem = function (e) {
    // retrieve the item id
    const itemToDeleteID = ItemCtrl.getCurrentItem().id;

    ItemCtrl.itemToBeDeleted(itemToDeleteID);

    UICrtl.removeLiItem(itemToDeleteID);

    //Get total calorie
    const totalCal = ItemCtrl.getTotCalories();

    //Update calorie.
    UICrtl.updateTotCalories(totalCal);

    //delete fron local storage
    StorageCtrl.deleteItemStorage(itemToDeleteID);

    //set ititial states
    UICrtl.clearEditState();

    e.preventDefault();
  };

  const clearAllItem = function (e) {
    //remove all item in items list
    ItemCtrl.clearAllItems();

    //Remove items in UI
    UICrtl.removeAllItems();

    StorageCtrl.removeAllItems();

    //Get total calorie
    const totalCal = ItemCtrl.getTotCalories();

    //Update calorie.
    UICrtl.updateTotCalories(totalCal);

    //hide the list
    UICrtl.statusList("none");

    e.preventDefault();
  };

  //public method
  return {
    init: function () {
      //set ititial states
      UICrtl.clearEditState();

      //Fetch items from data structur
      const items = ItemCtrl.getItems();

      const totalCal = ItemCtrl.getTotCalories();
      //   update UI consequentlz to totCal
      UICrtl.updateTotCalories(totalCal);

      //Check if ther is any items
      if (items.length === 0) {
        UICrtl.statusList("none");
      } else {
        //Populate list with items
        UICrtl.populateItemList(items);
      }

      //load Event Listeneers
      loadEventListeners();
    },
  };
})(ItemCtrl, StorageCtrl, UICrtl);

//Initilizing App
App.init();

Simpan kode JavaScript di atas di folder xampplite → htdocs → pilih folder KalkulatorKalori → simpan kode di atas dengan nama script.js.

5. Reload alamat url : http://localhost/KalkulatorKalori. Tampilan awal dari kalkulator kalori.

Isi form nama makanan dan jumlah kalorinya. Klik tombol tambah.

Masukkan nama makanan lainnya, untuk menghitung jumlah semua kalori. Kurang lebih, berikut tampilan perhitungan jumlah kalori.

Diaplikasi ini kamu juga bisa mengubah menu atau jumlah kalori dengan klik tombol edit. Klik tombol hapus di pojok kiri atas untuk mengahapus semua menu makanan.

6. Selesai, menarik sekali bukan?.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/ KalkulatorKalori. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. KalkulatorKalori menunjuk pada folder  KalkulatorKalori saya di xampplite → htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Kalkulator Kalori dengan JavaScript’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top