Initial commit - existing project files

static/js/order.js

@@ -0,0 +1,75 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    // elements
+
+    let order_number_of_drinks_input = document.getElementById("numberOfDrinks");
+    let order_number_of_drinks_btn_a = document.getElementById("numberOfDrinksBtnA");
+    let order_number_of_drinks_btn_b = document.getElementById("numberOfDrinksBtnB");
+    let order_sum_element = document.getElementById("orderCalculatedSum");
+
+    let order_form = document.getElementById("orderForm");
+    let status_info = document.getElementById("statusInfo");
+    let order_submit_button = document.getElementById("orderSubmitBtn");
+
+
+    // calculate & display sum
+
+    let order_price_per_drink = parseFloat(document.getElementById("pricePerDrink").dataset.drinkPrice);
+
+    function calculate_and_display_sum() {
+
+        setTimeout(() => {
+
+            let number_of_drinks = parseFloat(order_number_of_drinks_input.value);
+            let calculated_sum = order_price_per_drink * number_of_drinks;
+            order_sum_element.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
+
+        }, 25);
+
+    }
+
+    order_number_of_drinks_input.addEventListener("input", calculate_and_display_sum);
+    order_number_of_drinks_btn_a.addEventListener("click", calculate_and_display_sum);
+    order_number_of_drinks_btn_b.addEventListener("click", calculate_and_display_sum);
+
+
+    // custom submit method
+
+    order_form.addEventListener("submit", (event) => {
+
+        order_submit_button.disabled = true;
+
+        event.preventDefault(); // Don't do the default submit action!
+
+        let xhr = new XMLHttpRequest();
+        let formData = new FormData(order_form);
+
+        xhr.addEventListener("load", (event) => {
+
+            status_ = event.target.status;
+            response_ = event.target.responseText;
+
+            if (status_ == 200 && response_ == "success") {
+                status_info.innerText = "Success.";
+                window.location.replace("/");
+            }
+            else {
+                status_info.classList.add("errorText");
+                status_info.innerText = "An error occured.";
+                window.setTimeout(() => { window.location.reload() }, 5000);
+            }
+
+        })
+
+        xhr.addEventListener("error", (event) => {
+            status_info.classList.add("errorText");
+            status_info.innerText = "An error occured.";
+            window.setTimeout(() => { window.location.reload() }, 5000);
+        })
+
+        xhr.open("POST", "/api/order-drink");
+        xhr.send(formData);
+
+    });
+
+})