Skip to content

nutritionix/nutrition-label

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.

Nutrition Label jQuery Plugin by Nutritionix

NPM

Check out the Demo!

Summary: Create a FDA-style nutrition label with any nutrition data source (even the Nutritionix API!)

Installation

getting the files from github and including the required files using cdn

git clone git@github.com:nutritionix/nutrition-label.git
<!-- include the needed font from google api -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Archivo+Black" />
<!-- include the nutrition label plugin css file -->
<link rel="stylesheet" type="text/css" href="/bower_components/nutrition-label-jquery-plugin/dist/css/nutritionLabel-min.css">
<!-- include the jquery library from the google cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!-- include the nutrition label plugin js file -->
<script type="text/javascript" src="/bower_components/nutrition-label-jquery-plugin/dist/js/nutritionLabel-min.js"></script>

using bower

bower install --save nutrition-label-jquery-plugin

using npm

npm install nutrition-label-jquery-plugin

<!-- include the needed font from google api -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Archivo+Black" />
<!-- include the nutrition label plugin css file -->
<link rel="stylesheet" type="text/css" href="/bower_components/nutrition-label-jquery-plugin/dist/css/nutritionLabel-min.css">
<!-- include the jquery library -->
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- include the nutrition label plugin js file -->
<script type="text/javascript" src="/bower_components/nutrition-label-jquery-plugin/dist/js/nutritionLabel-min.js"></script>

Usage

For some sample usage, you can check out the demo page.