updated scroll behaviour

static/script.js

@@ -34,6 +34,26 @@ document.addEventListener('DOMContentLoaded', () => {
   loadDataFromLocalStorage();
   // window.animePropertyList = Object.keys(window.animeList[0]);
   renderAllSections();
+
+  // Add a scroll event listener to the animeSection div to scroll horizontally
+  const scrollContainer = document.querySelector('.animeSection');
+  scrollContainer.addEventListener('wheel', (event) => {
+      if (event.deltaY !== 0) {
+          const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+          console.log(scrollContainer.scrollLeft, maxScrollLeft);
+          if (scrollContainer.scrollLeft >= maxScrollLeft-30 && event.deltaY > 0) {
+              // Scroll down if at the right edge and scrolling down
+              window.scrollBy(0, event.deltaY);
+          } else if (scrollContainer.scrollLeft === 0 && event.deltaY < 0) {
+              // Scroll up if at the left edge and scrolling up
+              window.scrollBy(0, event.deltaY);
+          } else {
+              // Scroll horizontally
+              scrollContainer.scrollLeft += event.deltaY;
+          }
+          event.preventDefault();
+      }
+  });
 });
 // Click event listener for add anime button
 document.getElementById('addAnimeBtn').addEventListener('click', addNewAnime);
@@ -195,6 +215,8 @@ function renderAnimeList(status) {
   const listElement = document.getElementById(`${status}List`);
   listElement.innerHTML = '';
 
+  tobeAppended = [];
+
   // check sortBy property and sort the list accordingly
   console.log("sortBy rating", window.sortBy, window.sortBy === 'rating')
   if (window.sortBy === 'rating') {
@@ -358,14 +380,19 @@ function renderAnimeList(status) {
 
     // if the checkbox of id hideRecent is checked then do not show the anime in the list
     if (watchedCheckbox.checked && hideRecent.checked) {
-      ;
+      tobeAppended.push(listItem);
     }
     else {
       listElement.appendChild(listItem);
     }
 
   });
 
+  // append the list items to listElement
+  for (let i = 0; i < tobeAppended.length; i++) {
+    listElement.appendChild(tobeAppended[i]);
+  }
+
   // style change
   if (window.options.horviewstyle) {
     const listElementParent = listElement.parentElement;

static/styles.css

@@ -411,6 +411,7 @@ span {
   z-index: 1;
   /* white border */
   /* border: 1px solid #ebebeb; */
+  left: 0;
 }
 
 .hoverDivBG{

templates/index.html

@@ -34,7 +34,7 @@ <h1>Anime Database</h1>
       <div class="dropdown-content">
         <!-- Add more checkboxes as needed -->
         <input type="checkbox" id="hideRecent" name="hideRecent" value="hideRecent">
-        <label for="hideRecent">Hide Recently Watched</label>
+        <label for="hideRecent">Shift Recently Watched</label>
         </br>
         <input type="checkbox" id="horviewstyle" name="horviewstyle" value="horviewstyle">
         <label for="horviewstyle">Horizontal View</label>