A Pen by Jonathan Wilding on CodePen.
Created
February 8, 2018 19:42
-
-
Save J-Wilding/bb9e914aaa85412c94c88bf3a81762ed to your computer and use it in GitHub Desktop.
Checker Mach3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Guardrails Checker</title> | |
| <script type="text/javascript" src="C:\Users\jonathanwilding\Desktop\GUARDRAILS\GuardrailsFunction.js"></script> | |
| <link rel="stylesheet" type="text/css" href="C:\Users\jonathanwilding\Desktop\GUARDRAILS\guardrailsStyle.css" </head> | |
| <h2>Market 32 </h2> | |
| <h4>by Price Chopper</h4> | |
| <body> | |
| <header> | |
| <h1>Guardrails Check</h1> | |
| <h3>Welcome People Like Evan</h3> | |
| </header> | |
| <p> This page is dedicated to helping you quickly check the supplier's form against the clean specs<br> so yeah:</p> | |
| <p> Just copy and paste the ingredients list into the text box below</p> | |
| <p id="demo">put your list into the box</p> | |
| <textarea id="input" | |
| rows="20" | |
| cols="50" | |
| placeholder="Paste ingredients list" | |
| autofocus></textarea> | |
| <button class="button" style="vertical-align:middle" onclick="checkIngredients()"><span>Check </span></button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function checkIngredients() { | |
| let k = 0; | |
| document.getElementById("input").value.toUpperCase(); | |
| let ingredList = document | |
| .getElementById("input") | |
| .value.split(/,|;|[(]|[)]|[\[]|[\]]| and|\.|:| &/); | |
| let listBad = []; | |
| let productBad = false; | |
| let prhbt = [ | |
| "PARTIALLY HYDROGENATED OIL", //Dyes have been accounted for on line 78 | |
| "ACETOIN", | |
| "BENZALDEHYDE", | |
| "BUTYRIC ACID", | |
| "CINNAMALDEHYDE", | |
| "DIACETYL", | |
| "DISODIUM GUANYLATE", | |
| "DISODIUM INOSINATE", | |
| "HYDROLYZED SOY PROTEIN", | |
| "LIMONENE", | |
| "MONOSODIUM GLUTAMATE", | |
| "MSG", | |
| "PIPERONAL", | |
| "VANILLIN", | |
| "ASCORBIC ACID", | |
| "BENZOIC ACID", | |
| "BUTYLATED HYDROXYANISOLE", | |
| "BHA", | |
| "BUTYLATED HYDROXYTOLUENE", | |
| "BHT", | |
| "CITRIC ACID", | |
| "DISODIUM EDTA", | |
| "EDTA", | |
| "HYDROXYBENZOATE", | |
| "LACTIC ACID", | |
| "NITRATE", | |
| "NITRITE", | |
| "POLYPHOSPHATES", | |
| "PROPIONIC ACID", | |
| "PROPYLGALLATE", | |
| "SODIUM ASCORBATE", | |
| "SODIUM BENZOATE", | |
| "SODIUM PROPIONATE", | |
| "SODIUM SORBATE", | |
| "SORBIC ACID", | |
| "SULFITES", | |
| "SULFUR DIOXIDE", | |
| "TOCOPHEROLS", | |
| "ACESULFAME POTASSIUM", | |
| "ACESULFAME K", | |
| "ASPARTAME", | |
| "SUCRALOSE", | |
| "SACCHARIN", | |
| "AZODICARBONAMIDE", | |
| "ADA", | |
| "CELLULOSE FIBER", | |
| "DIACETYL TARTARIC ACID ESTERS OF MONOGLYCERIDES", | |
| "DATEM", | |
| "HIGH FRUCTOSE CORN SYRUP" | |
| ]; | |
| //Make sure items in ingredList match our format with no extra whitespace and is all caps | |
| for (l = 0; l < ingredList.length; l++) { | |
| ingredList[l] = ingredList[l].trim(); | |
| ingredList[l] = ingredList[l].toUpperCase(); | |
| } | |
| //loop through the input ingredient list and for each ingredient check it against all prohibited ingredients, if present set productBad to true and add said ingredient to listBad. | |
| for (j = 0; j < ingredList.length; j++) { | |
| for (i = 0; i < prhbt.length; i++) { | |
| if (ingredList[j] == prhbt[i]) { | |
| productBad = true; | |
| listBad[k] = ingredList[j]; | |
| console.log(listBad[k]); | |
| k++; | |
| } | |
| } | |
| //A catch for food dyes, if it contains a number and a color it must be a food dye. --> add it to the bad list and set productBad to true | |
| if ( | |
| ingredList[j].match(/RED|ORANGE|YELLOW|GREEN|BLUE|VIOLET/g) && | |
| ingredList[j].match(/\d/) | |
| ) { | |
| productBad = true; | |
| listBad[k] = ingredList[j]; | |
| k++; | |
| } | |
| } | |
| if (productBad !== true) { | |
| document.getElementById("paste").value = "Your product passed the test! "; | |
| } else { | |
| document.getElementById("paste").value = | |
| "Consider reformulation, product contains: \n"; | |
| for (i = 0; i < listBad.length; i++) { | |
| document.getElementById("paste").value += listBad[i] + "\n"; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Price chopper colors, Blue #0059ae, Red #df2438... | |
| Market 32 colors, Green #61ba49, Brown #342010, Tan #aa9c6b*/ | |
| body{ | |
| font-family: 'Roboto', sans-serif; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .header{ | |
| } | |
| /*h2 { | |
| color: #aa9c6b; | |
| } | |
| h4 { | |
| color: #0059ae; | |
| } | |
| html { | |
| background-color: #342010; | |
| padding: 20px; | |
| border: 6px solid #aa9c6b; | |
| } | |
| #ingrLst { | |
| resize: none; | |
| } | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| text-align: center; | |
| width: 100%; | |
| font-family: system-ui; | |
| color: #61ba49; | |
| } | |
| .boxes { | |
| margin: 6px; | |
| font-family: system-ui; | |
| } | |
| .button { | |
| display: inline-block; | |
| border-radius: 2px; | |
| background-color: #61ba49; | |
| border: none; | |
| color: #ffffff; | |
| text-align: center; | |
| font-size: 14px; | |
| padding: 10px; | |
| width: 100px; | |
| transition: all 0.5s; | |
| cursor: pointer; | |
| margin: 2.5px; | |
| } | |
| .button span { | |
| cursor: pointer; | |
| display: inline-block; | |
| position: relative; | |
| transition: 0.5s; | |
| } | |
| .button span:after { | |
| content: "\00bb"; | |
| position: absolute; | |
| opacity: 0; | |
| top: 0; | |
| right: -10px; | |
| transition: 0.5s; | |
| } | |
| .button:hover span { | |
| padding-right: 12.5px; | |
| } | |
| .button:hover span:after { | |
| opacity: 1; | |
| right: 0; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment