feature-sort-by-newest-oldest

static/style.css

@@ -161,6 +161,22 @@ header {
   background-color: transparent;
   margin: 10px;
 }
+.sort-button {
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  color: #999999;
+  border: 1px solid #333333;
+  background-color: transparent;
+  margin: 10px;
+  transition: border 0.3s ease, background-color 0.3s ease;
+}
+.sort-button:hover {
+  border: 1px solid #FFD3E0;
+  background-color: #f0f0f007;
+}
 
 .wrapper {
   position: relative;

templates/index.html

@@ -43,13 +43,16 @@
       </form>
       <h1>Latest Jobs:</h1>
       <p>This list is updated daily. Last update: {{ run_time }}</p>
+      <div class="sort-buttons">
+        <button id="sort-newest-button" class="sort-button" onclick="sortItems('newest')">Sort Newest</button>
+        <button id="sort-oldest-button" class="sort-button" onclick="sortItems('oldest')">Sort Oldest</button>
+      </div>
       <ul id="item-list">
         {% for item in items %}
-        <li class="listed-items" {% if loop.index>
-          5 %}style="display: none;"{% endif %}>
+        <li class="listed-items" {% if loop.index > 5 %}style="display: none;"{% endif %}>
           <h2>{{ item.title }}</h2>
           <p>Source: {{ item.source }}</p>
-          <p>Post Date: {{ item.pub_date }}</p>
+          <p class="post-date">Post Date: {{ item.pub_date }}</p>
           <div class="list-container">
             <a href="{{ item.link }}" target="_blank" class="wrapper">
               <span class="button-text">Apply Now</span>
@@ -96,6 +99,30 @@
 
     <script>
 
+  // Function to sort the items based on post date
+  function sortItems(order) {
+    var items = Array.from(document.querySelectorAll(".listed-items"));
+    items.sort(function (a, b) {
+      var dateA = new Date(a.querySelector(".post-date").textContent);
+      var dateB = new Date(b.querySelector(".post-date").textContent);
+
+      if (order === "newest") {
+        return dateB - dateA;
+      } else if (order === "oldest") {
+        return dateA - dateB;
+      }
+    });
+
+    var itemList = document.getElementById("item-list");
+    itemList.innerHTML = ""; // Clear the current list
+
+    // Reappend the sorted items
+    items.forEach(function (item) {
+      itemList.appendChild(item);
+    });
+  }
+
+
   // Define an array of placeholder texts
   var placeholderTexts = [
     "Search for jobs",
@@ -230,6 +257,8 @@ var scrollToTopButton = document.getElementById("scroll-to-top-button");
 
       scrollToTopButton.addEventListener("click", scrollToTop);
       window.addEventListener("scroll", toggleScrollToTopButton);
+
+      sortItems("newest");
     </script>
   </body>
 </html>