Health Tracker Project

This is an optional project in the Front-End Nanodegree Program and consists of a single page app, developed using the JavaScript library Backbone.js, that tracks the user's calorie intake. Typing food names into the search field will display a list of matching foods as provided by the health API. Users will be able to select an item from the list and the item will be added to the list of foods the user is tracking. The total calorie count will also update to reflect the new daily total.

Getting Started

To load the app, download a copy of the project to your local machine and open the file index.html with your browser. You should replace the API key with your own key, after getting it from Nutritionix. Alternatively, you can load the app online from this GitHub Pages project repository.

Built With

• UnderscoreJS - A JavaScript library that provides a set of useful functional programming helpers
• BackboneJS - A framework to supply structure to JavaScript-heavy applications
• jQuery - A JavaScript library for simpler HTML manipulation and event handling
• Nutritionix API - The third party API used to provide information to the user about calories

Author

• Daniele Erbì - daniel-234

Notes

A single page app that loads a food item taken from health API Nutritionix and displays the result on the page.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• I took some code from these two answers on Stackoverflow to make the AJAX request:
• Stackoverflow - jQuery async and JSON data
• Stackoverflow - Append AJAX result to div
• To refactor the app, I started from a simple Hello, world! page writing piece by piece the code taken from this post:
• Adrian Mejia - Backbone.JS for Absolute Beginners - Getting Started (Part1: Intro)
• And then revisited the Backbone JS modules in this second article:
• Adrian Mejia - Backbone JS for Absolute Beginners - Getting Started (Patt 2: Models, Collections and Views)
• A very helpful resource on AJAX requests:
• Stackoverflow - How do I return the response from an asynchronous call?
• Learn how to render something in a Backbone JS View after getting its value from an asynchronous AJAX request:
• Stackoverflow - AJAX request in Backbone View render function
• Some articles helped me solve the problem of moving the AJAX call from the View to the Model and separate concerns according to the MV* pattern:
• Stackoverflow - Backbone set Model inside AJAX request
• Stackoverflow - Reload Backbone View after AJAX request, how?
• BarDev - Re-Learning BackboneJS - Binding Models to Views
• Improving UnderscoreJS templates in Backbone JS:
• Coderbeerstartups - How to improve templates in BackboneJS - Learning BackboneJS
• Stackoverflow - How to use Underscore.JS as a template engine?
• Populate Collection from external JSON:
• Stackoverflow - Backbone populate Collection from external JSON
• Michielvaneerd - Backbone and JSONP
• Stackoverflow - BackboneJS fetch a Collection of models and populate them
• These articles explain well the new syntax rules introduced when the code was refactored and separated into different files, following the code organization of the todoMVC app developed by Addy Osmani:
• Stackoverflow - IIFE construct in JavaScript
• Stackoverflow - What does use strict do in JavaScript and what is the reasoning behind it?
• Stackoverflow - What does (function $ jQuery mean)?
• The meaning of an alias to this in JavaScript:
• Stackoverflow - What does var that = this mean in JavaScript?
• Adding new Models to a Backbone Collection:
• Stackoverflow - Adding new Models to a Backbone Collection
• To proceed in the app development I needed to move from a fixed URL to a string that could be made up taking as input a query inserted by the user. I relied on some answers on Stackoverflow to adapt my code:
• Stackoverflow - How can I pass properties into a Backbone Model which I do not wish to be treated as attributes?
• Stackoverflow - Backbone passing parameters to a Backbone URL
• Stackoverflow - What is options in BackboneJS?
• How to add an array of models to a collection:
• Stackoverflow - Backbone event: add array of models to collection
• How to make a POST request in JSON:
• Stackoverflow - Backbone Post JSON instead of Get
• Stackoverflow - jQuery AJAX How to send JSON instead of QueryString
• Error in BackboneJS: a URL property or function must be specified in BackboneJS
• Stackoverflow - A URL property or function must be specified - Error in Backbone
• The most useful resources I used to learn about fetching from a server and parsing a response into a collection of models in Backbone:
• Stackoverflow - BackboneJS fetch a collection of models and render them
• Stackoverflow - Backbone collection length always set to one with nested views
• Stackoverflow - Why is this Backbone model's attribute undefined when I try to get it?
• Stackoverflow - Handling response from BackboneJS collection using fetch
• Stackoverflow - BackboneJS fecth not actually setting attributes
• Stackoverflow - Backbone model fetch returns data but does not update model
• Stackoverflow - How to parse a Backbone collection in a template view
• Miguel Mota - Getting started with BackboneJS
• Bootstrap Responsive Tables:
• Stakoverflow - How to set the size of a column in a Bootstrap responsive table
• Stackoverflow - Centering text in a table in Twitter Bootstrap
• Stackoverflow - Bootstrap - Text-align class for inside table
• How to use UnderscoreJS as a template engine:
• Stackoverflow - Render HTML table with underscore template engine using a Backbone complex model
• Stackoverflow - How to use UnderscoreJS as a template engine
• Stackoverflow - Backbone table view consuming row - how to structure
• Stackoverflow - Loops in UnderscoreJS template
• It took some time to master the proper way to render a table using BackboneJS and an UnderscoreJS template. Here are two responses on Stackoverflow that helped me fix the issue:
• Stackoverflow - Rendering a table with Backbone
• Stackoverflow - BackboneJS and rendering table
• The resources I used to find a solution to format the table on smaller screens:
• CSS-TRICKS - FooTable: a jQuery plugin for responsive data tables
• CSS-TRICKS - Responsive Data Table Roundup
• CSS-TRICKS - Responsive Data Tables
• Cloud4 - Picking a Responsive Tables Solution
• Stackoverflow - Optional JavaScript execution based on Media queries
• CSS-TRICKS - enquire.js - Media Query callbacks in JavaScript
• Here is an answer on Stackoverflow that gave me the hint to put a div inside a table cell to give it a fixed height:
• Stackoverflow - CSS How to make td a fixed height
• Thanks to this response on the Udacity Discussion Forum I could align vertically the div content, regardless of the text size:
• Udacity Discussions Forum - Unable to vertically align text in div inside table cell
• Something that helped me on removing an unused view:
• Stackoverflow - Backbone remove view deletes the el
• Stackoverflow - Backbone not rendering the $el but can reference element directly
• The el property of the view:
• Stackoverflow - What does the el do in view.render().el?
• Some useful resources on Stackoverflow which I relied upon to get a click event:
• Stackoverflow - How to get attributes from the clicked element in Backbone event
• Stackoverflow- jQuery get content between tags
• Stackoverflow - Get second child using jQuery
• Create Backbone Views dynamically and pass them some paramenters:
• Stackoverflow - How do you dynamically crerate Backbone View elements?
• Stackoverflow - How to pass parameters to a View
• Stackoverflow - Getting a TypeError: this.options is undefined
• Accessing a Model from a click event:
• LosTechies - Backbone.js: Getting the Model for a clicked element
• Some code I used for responsive data tables:
• CSS Tricks - Responsive data tables
• Stackoverflow - How to center div vertically inside of absolutely positioned parent div