Add favourites capability

js/app.js

@@ -12,6 +12,22 @@ import { SKELETON } from './loaders/skeleton.js';
 
 const LOADERS = [...CIRCLE, ...BUBBLE, ...RECT, ...LINE, ...PROGRESS, ...TEXT, ...OBJECTS, ...GRAPH , ...SKELETON ];
 
+const STORAGE_KEY = 'css-loader-favourites';
+
+function getFavourites() {
+    try {
+        return new Set(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []);
+    } catch {
+        return new Set();
+    }
+}
+
+function saveFavourites(favs) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify([...favs]));
+}
+
+let favourites = getFavourites();
+let showFavsOnly = false;
 
 const main = document.getElementById('main');
 
@@ -45,21 +61,43 @@ function createLoader(i){
     loaderStyles.innerHTML = loader.css;
     shadowRoot.appendChild(loaderStyles);
 
+    // Slot lets light DOM children (fav button) render through the shadow root
+    shadowRoot.appendChild(document.createElement('slot'));
+
     return sectionEl
 }
 
 
-
-
+// Add favourite buttons and click handlers to each section
 document.querySelectorAll('#main .section').forEach(elm => {
+    const id = elm.dataset.id;
+
+    // Favourite button
+    const favBtn = document.createElement('button');
+    favBtn.className = 'fav-btn' + (favourites.has(id) ? ' active' : '');
+    favBtn.innerHTML = '♥';
+    favBtn.title = 'Add to favourites';
+    favBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (favourites.has(id)) {
+            favourites.delete(id);
+            favBtn.classList.remove('active');
+        } else {
+            favourites.add(id);
+            favBtn.classList.add('active');
+        }
+        saveFavourites(favourites);
+        if (showFavsOnly) applyFilter();
+    });
+    elm.appendChild(favBtn);
+
+    // Open popup on section click
     elm.addEventListener('click', (e) => {
-        let index = parseInt(e.target.dataset.index);
+        let index = parseInt(elm.dataset.index);
         let showCase = document.querySelector('.showcase');
 
         showCase.replaceChildren(createLoader((index - 1)));
 
-
-        // console.log(e);
         showCase.dataset.index = index;
 
         // load code
@@ -73,6 +111,33 @@ document.querySelectorAll('#main .section').forEach(elm => {
 })
 
 
+// Favourites filter toggle button in header
+const filterBtn = document.createElement('button');
+filterBtn.className = 'fav-filter-btn';
+filterBtn.innerHTML = '♥ Favourites';
+filterBtn.addEventListener('click', () => {
+    showFavsOnly = !showFavsOnly;
+    filterBtn.classList.toggle('active', showFavsOnly);
+    applyFilter();
+});
+document.querySelector('header nav').prepend(filterBtn);
+
+function applyFilter() {
+    main.classList.toggle('favs-active', showFavsOnly);
+    const sections = document.querySelectorAll('#main .section');
+    let visibleIndex = 0;
+    sections.forEach(section => {
+        const isHidden = showFavsOnly && !favourites.has(section.dataset.id);
+        section.classList.toggle('hidden', isHidden);
+        section.classList.remove('alt-bg');
+        if (!isHidden) {
+            section.classList.toggle('alt-bg', visibleIndex % 2 === 0);
+            visibleIndex++;
+        }
+    });
+}
+
+
 // close popup
 document.querySelector('.btn-close').addEventListener('click', (e) => {
     document.querySelector('body').classList.remove('pop')

scss/styles.scss

@@ -299,3 +299,72 @@ div[data-id="prog-crak-erh"]{
   justify-content: flex-start !important;
 }
 
+.fav-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  color: rgba(#fff, 0.25);
+  z-index: 2;
+  padding: 4px;
+  transition: color 0.15s, transform 0.15s;
+  pointer-events: auto;
+  &:hover {
+    color: $brand;
+    transform: scale(1.2);
+  }
+  &.active {
+    color: $brand;
+  }
+}
+
+#main.favs-active {
+  align-items: start;
+  justify-content: start;
+  .section:nth-child(2n+1) {
+    background: transparent;
+    &:hover {
+      background: rgba(#000, 0.3);
+    }
+  }
+  .section.alt-bg {
+    background: rgba(#000, 0.1);
+    &:hover {
+      background: rgba(#000, 0.3);
+    }
+  }
+}
+
+#main .section.hidden {
+  display: none;
+}
+
+.fav-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  background: transparent;
+  border: 1px solid rgba(#fff, 0.3);
+  border-radius: 20px;
+  color: rgba(#fff, 0.6);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: Arial, Helvetica, sans-serif;
+  transition: all 0.2s;
+  margin-right: 10px;
+  &:hover {
+    border-color: $brand;
+    color: $brand;
+  }
+  &.active {
+    background: $brand;
+    border-color: $brand;
+    color: #fff;
+  }
+}
+