Add split by something

public/global/movies/script.js

@@ -6,22 +6,30 @@ async function loadmovie() {
     await $.get("/api/movies", rendermovie);
 }
 
-function rendermovie(movies) {
+function splitByTitle(movies) {
+    result = movies.reduce(function (r, a) {
+        var letter = a.title[0].toUpperCase();
+        r[letter] = r[letter] || [];
+        r[letter].push(a);
+        return r;
+    }, Object.create(null));
 
-    movies.sort(function(a, b) {
+    return result;
-        return a.title.localeCompare(b.title);
+}
-    });
 
-    // movies.sort(function(a, b) {
+function splitByDate(movies) {
-    //     aJ = Date.parse(a.released);
+    result = movies.reduce(function (r, a) {
-    //     bJ = Date.parse(b.released);
+        var year = new Date(a.released).getFullYear();
-    //     return bJ - aJ;
+        r[year] = r[year] || [];
-    // });
+        r[year].push(a);
+        return r;
+    }, Object.create(null));
 
+    return result;
+}
 
-    movies.forEach(function(movie) {
+function createMElement(movie) {
-        
+    var row = document.createElement("div");
-        var row = document.createElement("div");
         row.className = "col";
 
         row.innerHTML = "<div class='card shadow-sm'>"+
@@ -33,7 +41,52 @@ function rendermovie(movies) {
                             "</div>" +
                         "</div>";
 
+    return row;
+}
 
-        $("#movie_tbody").append(row);
+function createHeader(title) {
+    var row = document.createElement("div");
+        row.className = "row";
+
+        row.innerHTML = "<div class='col'>" +
+                            "<h2 class='text-center'>" + title + "</h2>" +
+                        "</div>";
+
+    return row;
+}
+   
+
+function sortMoviesAlphabetically(movies) {
+    movies.sort(function(a, b) {
+        return a.title.localeCompare(b.title);
     });
 }
+
+function sortMoviesByDate(movies) {
+    movies.sort(function(a, b) {
+        aJ = Date.parse(a.released);
+        bJ = Date.parse(b.released);
+        return bJ - aJ;
+    });
+}
+
+function rendermovie(movies) {
+    split = splitByTitle(movies);
+
+    for (var key in split) {
+
+        var header = createHeader(key);
+        $("#movie_tbody").append(header);
+
+        movies = document.createElement("div");
+        movies.className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3";
+
+        split[key].forEach(function(movie) {
+            var row = createMElement(movie);
+            movies.append(row);
+        });
+
+        $("#movie_tbody").append(movies);
+    }
+
+}

views/movies/show.hbs

@@ -3,9 +3,8 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 
 <div class="album py-5 bg-body-tertiary">
-<div class="container">
+<div class="container" id="movie_tbody">
-  <div id="movie_tbody" class="row row-cols-3 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 g-3">
+  
-  <!-- JS puts images here -->
+  
-  </div>
 </div>
 </div>