proper slash handling in button.js

config/urls.py

@@ -20,5 +20,5 @@ from django.http import JsonResponse
 urlpatterns = [
     # path('api/', include('api.urls')),
     path('', include('ui.urls')),
-    path('admin/', admin.site.urls),
+    # path('admin/', admin.site.urls),
 ]

ui/static/ui/button.css

@@ -1,6 +1,7 @@
 html, body { 
     height: 100%;
     width: 100%;
+    touch-action: manipulation;
 }
 
 .section, .container {
@@ -13,8 +14,4 @@ html, body {
     flex-direction: column;
     align-items: center;
     text-align: center;
-}
-
-.disable-dbl-tap-zoom {
-    touch-action: manipulation;
 }

ui/static/ui/button.js

@@ -1,27 +1,12 @@
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        var cookies = document.cookie.split(';');
-        for (var i = 0; i < cookies.length; i++) {
-            var cookie = cookies[i].trim();
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-
-var csrftoken = getCookie('csrftoken');
-var button = document.getElementById("BUTTON");
-var count = document.getElementById("COUNT");
+const csrftoken = getCookie('csrftoken');
+const button = document.getElementById("BUTTON");
+const count = document.getElementById("COUNT");
 
+// when button is clicked submit an empty post request
 button.addEventListener("click", event => {
     button.disabled = true;
     button.classList.add("is-loading");
-    fetch('/button', {
+    fetch('/button/', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -39,4 +24,5 @@ button.addEventListener("click", event => {
         });
 });
 
+// when the page is loaded automatically select the button
 button.focus();

ui/static/ui/helper.js

@@ -0,0 +1,16 @@
+// get cookies when fetching with django
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}

ui/templates/ui/button.html

@@ -7,10 +7,10 @@
 {% endblock %}
 
 {% block js %}
+<script src="{% static 'ui/helper.js' %}"></script>
 <script src="{% static 'ui/button.js' %}"></script>
 {% endblock %}
 
-
 {% block body %}
 <section class="section">
     <div class="container">
@@ -18,7 +18,7 @@
             <h1 class="title">
                 The Button
             </h1>
-            <button class="button is-primary disable-dbl-tap-zoom" id="BUTTON">Press</button>
+            <button class="button is-primary" id="BUTTON">Press</button>
         </div>
         <div><br></div>
         <div>

ui/urls.py

@@ -2,5 +2,5 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('button', views.button, name = 'button'),
+    path('button/', views.button, name = 'button'),
 ]