js

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
-})