UNPKG

nutrition-label-jquery-plugin

Version:

To be able to create a FDA-style nutrition label with any nutrition data source

github.com/nutritionix/nutrition-label

nutritionix/nutrition-label

59 lines (45 loc) • 2.29 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Nutrition Label jQuery Plugin by Nutritionix ============================================ [![NPM](https://nodei.co/npm/nutrition-label-jquery-plugin.png)](https://www.npmjs.com/package/nutrition-label-jquery-plugin) [Check out the Demo!](http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo.html) Summary: Create a FDA-style nutrition label with any nutrition data source (even the [Nutritionix API](http://www.nutritionix.com/api)!) Installation ------------ **getting the files from github and including the required files using cdn** ```sh git clone git@github.com:nutritionix/nutrition-label.git ``` ```html <!-- 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** ```sh bower install --save nutrition-label-jquery-plugin ``` *** **using npm** ```sh npm install nutrition-label-jquery-plugin ``` *** ```html <!-- 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](http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo.html).