remove jquery

index.html

@@ -26,8 +26,6 @@
     />
     <link rel="icon" type="image/png" href="/img/favicon.png" />
     <link rel="apple-touch-icon" href="/img/social.jpg" />
-    <script type="text/javascript" src="/js/jquery.3.6.0.js"></script>
-    <script type="text/javascript" src="/js/jquery.scrollTo.2.1.3.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
     <link
@@ -42,7 +40,7 @@
       media="screen"
       rel="stylesheet"
       type="text/css"
-      href="/css/site.css?1678229090807?1678229616129?1678229646573?1678229670306?1678229728212?1678229754175?1678229784956"
+      href="/css/site.css?1678229090807?1678229616129?1678229646573?1678229670306?1678229728212?1678229754175?1678229784956?1678233805437"
     />
     <meta
       property="title"
@@ -81,7 +79,11 @@
       <h1>NYC Bookstores</h1>
       <div>
         <ul class="nav">
-          <li><h2>The Many Independent Bookstores of New York City</h2></li>
+          <li>
+            <h2 id="subhed">
+              The Many Independent Bookstores of New York City
+            </h2>
+          </li>
           <li><a id="viewInfo">intro</a></li>
           <li>
             <a
@@ -699,21 +701,50 @@
           ${description ? `<p class="description">${description}</p>` : ""}`;
       }
 
+      function hideElementById(id) {
+        const element = document.getElementById(id);
+        if (element !== undefined) {
+          element.classList.add("hidden");
+        }
+      }
+
+      function showElementById(id) {
+        const element = document.getElementById(id);
+        if (element !== undefined) {
+          element.classList.remove("hidden");
+        }
+      }
+
+      function setContent(id, html) {
+        const element = document.getElementById(id);
+        if (element !== undefined) {
+          element.innerHTML = html;
+        }
+      }
+
       document.addEventListener("DOMContentLoaded", function () {
-        $.getJSON("./stores.json", function (data) {
-          data.sort(function (a, b) {
-            var aname = a.name.toLowerCase();
-            var bname = b.name.toLowerCase();
-            return aname === bname ? 0 : +(aname > bname) || -1;
+        fetch("./stores.json")
+          .then((resp) => {
+            return resp.json();
+          })
+          .then((data) => {
+            data.sort(function (a, b) {
+              var aname = a.name.toLowerCase();
+              var bname = b.name.toLowerCase();
+              return aname === bname ? 0 : +(aname > bname) || -1;
+            });
+            data.forEach((value, key) => {
+              value.rowNumber = key;
+              value.slug = slugify(value.name);
+            });
+            setContent("storeCount", data.length);
+            window.data = data;
+            loadMap(data);
+          })
+          .catch((err) => {
+            // we'll live with the static cache!
+            console.log(err);
           });
-          $.each(data, function (key, value) {
-            value.rowNumber = key;
-            value.slug = slugify(value.name);
-          });
-          $("#storeCount").html(data.length);
-          window.data = data;
-          loadMap(data);
-        });
       });
 
       window.addEventListener(
@@ -750,7 +781,7 @@
 
       function getStoreBySlug(slug) {
         var ret = false;
-        $.each(window.data, function (key, value) {
+        window.data.forEach((value, key) => {
           if (value.slug === slug) {
             ret = value;
             return false;
@@ -783,18 +814,18 @@
 
         popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map);
 
-        $("#info").hide();
-        $("#selected").html(SelectedStoreTemplate(store));
-        $("#selected").show();
+        hideElementById("info");
+        setContent("selected", SelectedStoreTemplate(store));
+        showElementById("selected");
         if (pushState) {
           updateHash(store.slug);
         }
       }
 
       function showInfo(pushState = true) {
-        $("#selected").hide();
+        hideElementById("selected");
         popup.remove();
-        $("#info").show();
+        showElementById("info");
         if (pushState) {
           updateHash("info");
         }
@@ -804,7 +835,7 @@
         var geolocate = new mapboxgl.GeolocateControl();
 
         var points = [];
-        $.each(data, function (key, value) {
+        data.forEach((value, key) => {
           points.push({
             type: "Feature",
             geometry: {
@@ -874,13 +905,17 @@
             .addTo(map);
         });
 
-        $("#Stores").html(TableViewTemplate(data));
-        $("#Stores tbody tr").on("click", function () {
-          updateSelectedStore(data[$(this)[0].id], true);
-          $(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
+        setContent("Stores", TableViewTemplate(data));
+        document.querySelectorAll("#Stores tbody tr").forEach((element) => {
+          element.addEventListener("click", () => {
+            updateSelectedStore(data[element.id], true);
+            document
+              .getElementById("subhed")
+              .scrollIntoView({ behavior: "smooth" });
+          });
         });
 
-        $("#viewInfo").on("click", showInfo);
+        document.getElementById("viewInfo").addEventListener("click", showInfo);
       }
     </script>
     <script>