diff options
| -rw-r--r-- | static/script.js | 70 |
1 files changed, 39 insertions, 31 deletions
diff --git a/static/script.js b/static/script.js index ced777c..28353cd 100644 --- a/static/script.js +++ b/static/script.js @@ -1,27 +1,47 @@ "use strict"; -var html = `` -for (var table in data) { - var s = `` - for (var idx in data[table]) { - let tag = table + '|' + idx - s += `<input type="checkbox" id="ingredient${tag}" x-ingredient="${tag}"> - <label for="ingredient${tag}">${data[table][idx].name}</label>` +let form = null; +let nutrition = null; +console.log('bye') + +window.onload = function(evt) { + console.log('hi') + var html = `` + for (var table in data) { + var s = `` + for (var idx in data[table]) { + let tag = table + '|' + idx + s += `<input type="checkbox" id="ingredient${tag}" x-ingredient="${tag}"> + <label for="ingredient${tag}">${data[table][idx].name}</label>` + } + html += `<fieldset><legend>${table}</legend>${s}</fieldset>` } - html += `<fieldset><legend>${table}</legend>${s}</fieldset>` + html += `<fieldset><legend>Dressing amount</legend> + <input type="radio" name="dressing-amount" id="light" value="light"> + <label for="light">Light</label><br> + <input type="radio" name="dressing-amount" id="medium" value="medium"> + <label for="medium">Medium</label><br> + <input type="radio" name="dressing-amount" id="heavy" value="heavy"> + <label for="heavy">Heavy</label><br> + </fieldset>` + + nutrition = document.getElementById('nutrition') + form = document.getElementById('form') + form.innerHTML = html + + form.addEventListener('change', function() { + let total = calculateNutrition() + var s = ` + Calories: ${total.calories}<br> + Carbohydrates (g): ${total.total_carbs}<br> + Dietary fiber (g): ${total.dietary_fiber}<br> + Fat (g): ${total.total_fat}<br> + Protein (g): ${total.protein}<br> + ` + nutrition.innerHTML = s + }) } -html += `<fieldset><legend>Dressing amount</legend> - <input type="radio" name="dressing-amount" id="light" value="light"> - <label for="light">Light</label><br> - <input type="radio" name="dressing-amount" id="medium" value="medium"> - <label for="medium">Medium</label><br> - <input type="radio" name="dressing-amount" id="heavy" value="heavy"> - <label for="heavy">Heavy</label><br> - </fieldset>` -nutrition = document.getElementById('nutrition') -form = document.getElementById('form') -form.innerHTML = html let multipliers = {'none': 0, 'light': 1, 'medium': 2, 'heavy': 3} @@ -54,15 +74,3 @@ function calculateNutrition() { } return total } - -form.addEventListener('change', function() { - let total = calculateNutrition() - var s = ` - Calories: ${total.calories}<br> - Carbohydrates (g): ${total.total_carbs}<br> - Dietary fiber (g): ${total.dietary_fiber}<br> - Fat (g): ${total.total_fat}<br> - Protein (g): ${total.protein}<br> - ` - nutrition.innerHTML = s -}) |