summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/script.js70
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
-})