sort by date

0xelsherif · Apr 3, 2024 · f45bab7 · f45bab7
1 parent 04b68fc
commit f45bab7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 25 deletions.
diff --git a/app.js b/app.js
@@ -43,30 +43,7 @@ window.addEventListener("focus", () => {
   }, 5000);
 });
 
-
-// document.addEventListener('DOMContentLoaded', function () {
-//   const toggleSwitch = document.querySelector('#themeToggle');
-
-//   // Check the current theme on load
-//   if (localStorage.getItem('theme') === 'dark') {
-//     document.body.classList.add('dark-mode');
-//     toggleSwitch.checked = true;
-//   } else {
-//     document.body.classList.remove('dark-mode');
-//     toggleSwitch.checked = false;
-//   }
-
-//   // Switch theme dynamically
-//   toggleSwitch.addEventListener('change', function () {
-//     if (this.checked) {
-//       document.body.classList.add('dark-mode');
-//       localStorage.setItem('theme', 'dark');
-//     } else {
-//       document.body.classList.remove('dark-mode');
-//       localStorage.setItem('theme', 'light');
-//     }
-//   });
-// });
+// Dark mode
 document.addEventListener('DOMContentLoaded', function () {
   const toggleSwitch = document.querySelector('#themeToggle');
 
@@ -98,4 +75,25 @@ document.addEventListener('DOMContentLoaded', function () {
     toggleDarkMode(isDarkMode);
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   });
+});
+
+// Sort by Date 
+// Get all card elements
+const cards = document.querySelectorAll('.leftcolumn .card');
+
+// Convert NodeList to Array
+const cardsArray = Array.from(cards);
+
+// Sort cards based on the creation date
+cardsArray.sort((a, b) => {
+    const dateA = new Date(a.querySelector('h5').textContent.replace('Created on, ', ''));
+    const dateB = new Date(b.querySelector('h5').textContent.replace('Created on, ', ''));
+    return dateB - dateA;
+});
+
+// Re-append sorted cards to the leftcolumn
+const leftColumn = document.querySelector('.leftcolumn');
+leftColumn.innerHTML = ''; // Clear previous content
+cardsArray.forEach(card => {
+    leftColumn.appendChild(card);
 });
diff --git a/index.html b/index.html
@@ -104,7 +104,7 @@ <h5>Created on, MARCH 27, 2024</h5>
     </div>
     <div class="card">
       <h2>URL QR Code Generator</h2>
-      <h5>Created on, MARCH 27, 2024</h5>
+      <h5>Created on, MARCH 30, 2024</h5>
       <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poBrEPJ" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
         <span>See the Pen <a href="https://codepen.io/0xelsherif/pen/poBrEPJ">
         Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)

diff --git a/test.html b/test.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Clarity API Data</title>
+</head>
+<body>
+
+<h1>Clarity API Data</h1>
+
+<div id="userData">
+  <p>Loading...</p>
+</div>
+
+<script>
+const authorizationToken = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IjAzNWI5N2UxMjIyMDRkNTM5ZmQ2ZGQ5OGJhYzQyMmYxIiwidHlwIjoiSldUIn0.eyJqdGkiOiI0NmU5MWM1YS03YzM5LTRlYmItYjgyZS1hZTgyNTg3ZDI5YWUiLCJzdWIiOiIyMjA3MDMzNTk3NzExNjI4Iiwic2NvcGUiOiJEYXRhLkV4cG9ydCIsIm5iZiI6MTcxMjA2NzA1NCwiZXhwIjo0ODY1NjY3MDU0LCJpYXQiOjE3MTIwNjcwNTQsImlzcyI6ImNsYXJpdHkiLCJhdWQiOiJjbGFyaXR5LmRhdGEtZXhwb3J0ZXIifQ.Xjwwf7ugLdVDTatmn9123_Chihkt04VkhYvOjvLAJDvhu9K-LwBG9BmyTo9jJbohNCsy5gSrcZOAp9T-G1fN5p1jrOQNf3UeNWXh1tfDPZ1ZFL12-3Xt98z-VvMlq76_JMl8NJqItUwd5PuC84TQlQmOjIdNKwsEZf_GReesUC_5-Rn3Hr5ngwUUntX6UiTdZwy3F1tUyvv-U83NHtGQq4fWJ5zChpHJ2GHPJ-RYECGyd_l6Jf4KSSNWuj-xmb3moQoJB9544r6TqAyZ06bhgRxXWm9O8FueiUv5aCM6EVHYSg4ZgmygagdoRxtYASjLa72bQ9nczmKoJGHlUOc3nQ';
+const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
+
+fetch(proxyUrl + 'https://www.clarity.ms/export-data/api/v1/project-live-insights', {
+  method: 'GET',
+  headers: {
+    'Authorization': `Bearer ${authorizationToken}`
+  }
+})
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Failed to fetch data');
+    }
+    return response.json();
+  })
+  .then(data => {
+    console.log('Data:', data);
+    // Process the data as needed
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+</script>
+
+</body>
+</html>