Summary: Create a FDA-style nutrition label with any nutrition data source (even the Nutritionix API!)
Note: This will probably work with the latest jQuery and Bootstrap version without any issue but it's not yet tested using those versions.
getting the files from github and including the required files using cdn
git clone [email protected]: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 bootstrap css file from maxcdn -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css">
<!-- 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<!-- include the needed font from google api -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Archivo+Black" />
<!-- include the bootstrap css file -->
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- 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>Check out this demo. for some sample usage You can find more on the /demo folder
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent