Traffic Lights Nutrition Label (v0.8)
By Haroon Ghazni (Front End Developer)- www.hghazni.com
__ [____] .----' '----. .===| .==. |===. \ | /####\ | / / | \####/ | \ '===| `""` |===' .===| .==. |===. \ | /::::\ | / / | \::::/ | \ '===| `""` |===' .===| .==. |===. \ | /&&&&\ | / / | \&&&&/ | \ '===| `""` |===' '--.______.--'
*Note : Be aware this module is currently not finished and is subject to constant change and iterations until it reaches 1.0.
The 'Nutrition Label' module displays a Traffic Light Nutrition Label based on the portion of each product and the daily Intake Reference percentage. Each element changes colour based on the Reference Intake percentage to low, medium or high.
Initialisation code (variables):
Make sure to include this for the Nutrition label before < /body >:
It has to be added to the element with the ID of #nutritionLabel
The stylesheet included has all the default styling for all the default classes and ID's set by the module.
Insert the JS and CSS files into your directories. Link them to the designated HTML page.
Then insert the initialisation with all the variables. Change the variables to your product and that should correspond on the label directly.
You can style it further in the stylesheet if you wish. If you have any issues feel free to contact me email@example.com