Clean little code

static/js/sell.js

@@ -0,0 +1,54 @@
+function updateTotal(amount) {
+    total_el = document.getElementById('total')
+    total = parseFloat(total_el.innerText)
+    total += amount
+    total_el.innerText = total.toFixed(2)
+}
+
+function renderBasketItem(uid, name) {
+    return '<button id="basketitem_' + uid + '"' +
+                   'onclick="delProduct(' + uid + ')">' +
+                       '1 x ' + name +
+           '</button>'
+}
+
+function addProduct(uid) {
+    // This is the hidden input element inside the form. We'll use this DOM
+    // element to keep informations about the product, such as the name,
+    // the price and the value inside the 'data-' tag.
+    form_el = document.getElementById('prod_' + uid)
+    basket = document.getElementById('basket')
+    basket_el = document.getElementById('basketitem_' + uid)
+
+    form_el.value = parseInt(form_el.value) + 1
+
+    // If there is not a button for the given product inside the basket
+    // div we'll create it.
+    if (basket_el === null) {
+        basket.innerHTML += renderBasketItem(uid, form_el.dataset.name)
+    } else {
+        // Otherwise we'll just update it.
+        console.log(form_el.value)
+        new_text = form_el.value + ' x ' + form_el.dataset.name
+        basket_el.innerText = new_text
+    }
+
+    updateTotal(parseFloat(form_el.dataset.price))
+}
+
+function delProduct(uid) {
+    form_el = document.getElementById('prod_' + uid)
+    basket = document.getElementById('basket')
+    basket_el = document.getElementById('basketitem_' + uid)
+
+    form_el.value = parseInt(form_el.value) - 1
+
+    if (form_el.value == 0) {
+        basket.removeChild(basket_el)
+    } else {
+        new_text = form_el.value + ' x ' + form_el.dataset.name
+        basket_el.innerText = new_text
+    }
+
+    updateTotal(parseFloat(-form_el.dataset.price))
+}

templates/sell.html

@@ -27,66 +27,10 @@
 </form>
 
 </div>
+<script type="text/javascript" src="{{ url_for('static', filename='js/sell.js') }}">
 <script type="text/javascript">
-function reset() {
 {%- for product in products %}
 document.getElementById('prod_{{ product.uid }}').value = 0
 {%- endfor %}
-}
-
-function updateTotal(amount) {
-    total_el = document.getElementById('total')
-    total = parseFloat(total_el.innerText)
-    total += amount
-    total_el.innerText = total.toFixed(2)
-}
-
-function addProduct(uid) {
-    // This is the hidden input element inside the form. We'll use this DOM
-    // element to keep informations about the product, such as the name,
-    // the price and the value inside the 'data-' tag.
-    form_el = document.getElementById('prod_' + uid)
-    basket = document.getElementById('basket')
-    basket_el = document.getElementById('basketitem_' + uid)
-
-    form_el.value = parseInt(form_el.value) + 1
-
-    // If there is not a button for the given product inside the basket
-    // div we'll create it.
-    if (basket_el === null) {
-        new_basket_el =
-            '<button id="basketitem_' + uid + '"' +
-                    'onclick="delProduct(' + uid + ')">' +
-                        '1 x ' + form_el.dataset.name +
-            '</button>'
-        basket.innerHTML += new_basket_el
-    } else {
-        // Otherwise we'll just update it.
-        console.log(form_el.value)
-        new_text = form_el.value + ' x ' + form_el.dataset.name
-        basket_el.innerText = new_text
-    }
-
-    updateTotal(parseFloat(form_el.dataset.price))
-}
-
-function delProduct(uid) {
-    form_el = document.getElementById('prod_' + uid)
-    basket = document.getElementById('basket')
-    basket_el = document.getElementById('basketitem_' + uid)
-
-    form_el.value = parseInt(form_el.value) - 1
-
-    if (form_el.value == 0) {
-        basket.removeChild(basket_el)
-    } else {
-        new_text = form_el.value + ' x ' + form_el.dataset.name
-        basket_el.innerText = new_text
-    }
-
-    updateTotal(parseFloat(-form_el.dataset.price))
-}
-
-reset()
 </script>
 {% endblock %}