Chaper 12 (adding JavaScript to website).

There is little built into Caveman when it comes to JavaScript so the code here is just a walk-through on adding JQuery to app.html (the base template the others extend/inherit from). Note the use of the '/js' directory in '/static/js'. I originally use /scripts, instead of /js but Caveman did not recognise it. It looks like you need to stick with /js for the JavaScript files.
2 years ago · 38760c74ee
5 changed files with 10904 additions and 0 deletions
--- a/static/js/articles.js
+++ b/static/js/articles.js
@ -0,0 +1,15 @@
+$(document).ready(function(){
+    var cb = $("#no-expiration");
+    var field = $("#article-expired-at");
+
+    var changeExpiredAt = function(){
+        if (cb.prop("checked"))
+            field.hide();
+        else
+            field.show();
+    };
+
+    cb.bind("click", changeExpiredAt);
+
+    changeExpiredAt();
+});
--- a/static/js/jquery-3.6.0-min.js
+++ b/static/js/jquery-3.6.0-min.js
--- a/static/js/jquery-3.6.0.js
+++ b/static/js/jquery-3.6.0.js
--- a/templates/articles/new.html
+++ b/templates/articles/new.html
@ -2,6 +2,7 @@
 {% block title %} {% lisp (title! "Making new article") %} {% endblock %}

 {% block content %}
+<script src="/js/articles.js"></script>
 <h1>{% lisp (title!) %}</h1>

 <form class="new-article" id="new-article" action="/articles" method="post">
--- a/templates/layouts/app.html
+++ b/templates/layouts/app.html
@ -4,6 +4,11 @@
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/main.css">
+    <!-- JavaScript files must reside in the /static/js/ directory. If
+    you use something other than '/js', Cavemane will not find it and
+    the browser will indicate errors around not being able to load the
+    .js file. -->
+    <script src="/js/jquery-3.6.0-min.js"></script>
  </head>
  <body>
    <div id="container">