NOTICE: PLEASE USE YOUR OWN API KEYS AND NOT MINE. THANKS.

Nutrition Tracker

A single page app that tracks your calorie intake and nutrition information for foods you eat.

Features

• Responsive design
• Food suggestions "as you type" via search autocomplete
• Uses food searched as an ingredient to provide recipe suggestions
• Visually see fat, carbohyrdates, and protein amounts with pie chart
• Full nutrition information is displayed using the FDA-style "Nutrition Facts" label
• Tracked foods are saved to your browser's localStorage
• Option to display all tracked foods or by date
• Navigate days with interactive date picker

How to run

Local

1. Navigate to the public folder
2. Open the index.html in either the src or dist folders

Online

1. http://m-coding.github.io/fe-05-2-nutrition-tracker/

How to re-build

1. Requires Node.js and Gulp
2. Navigate to the root of the project directory (where the gulpfile.js is located)
3. In your terminal enter the command: npm install, this will install all modules listed as dependencies in package.json
4. Enter the command gulp clean to delete everything in the dist folder.

• If you want to preview what files will be deleted, enter the command gulp cleanDryRun instead.

5. Next enter the command gulp and the project will be built in the dist folder.

• You can review differences by comparing the src and dist folder.

Documentation

• Generated by JSDoc in public/docs/jsdoc – open index.html and navigate using right menu
• Generated by Docco in public/docs/docco – open any html file and navigate using upper right jump menu

Notes

API

• Nutritionix – used for nutrition search and autocomplete
• Edamam – used for recipe search
• Google Chart – used to create pie charts

JavaScript

• Backbone.js – the JavaScript library used to structure the app
• Underscore.js – hard dependency for Backbone.js
• Backbone.localStorage – a localStorage adapter for Backbone.js
• Backbone.Typeahead – a Bootstrap inspired Typeahead for Backbone.js
  • forked – my forked version customized to work with the Nutritionix autocomplete API
• Handlebars.js – template processor used
• eqHeights.js – a jQuery plugin used to make Bootstrap columns equal heights
• nutritionLabel.js – Nutritionix's jQuery plugin to create a nutrition label
• Bootstrap 3 Datepicker – date picker widget used
• Moment.js – dependency for date picker

CSS

• Bootstrap – the HTML/CSS framework used for responsive design
• Bootswatch Spacelab – theme used
• CSS Loading Spinner – css animation used for preloading views in the app

Fonts

• Open Sans – font used by Bootstrap
• Archivo – font used for nutrition labels
• google-webfonts-helper – site used to download google fonts locally

Change Log

• All commits
• All releases