Update index.html

docs/index.html

@@ -74,13 +74,16 @@
             <img src="https://img.shields.io/github/watchers/Haxxnet/Compose-Examples.svg?style=social&label=Watch" /><p>
             <img src="https://img.shields.io/github/directory-file-count/Haxxnet/Compose-Examples/examples?label=Compose%20Examples&style=for-the-badge.svg&color=blue" />
             <img src="https://img.shields.io/badge/maintainer-LRVT-red" /><p>
-            <!--<a target="_blank" href="#"><img src="https://ForTheBadge.com/images/badges/makes-people-smile.svg" /></a><br>-->
+        </div>
-
+        <div class="text-center mt-3">
+            <button class="btn btn-primary" onclick="randomProject()">Random Project</button>
+            <button class="btn btn-danger" onclick="clearAndReload()">Clear Search</button>
         </div>
         <div id="searchBar" class="text-center">
             <input type="text" id="searchInput" class="form-control" placeholder="Search by project name...">
         </div>
         <div id="repoContent" class="row justify-content-center"></div>
+
     </div>
     <!-- jQuery and Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous"></script>
@@ -88,9 +91,19 @@
     <!-- Custom JavaScript -->
     <script>
         var apiUrl = 'https://api.github.com/repos/Haxxnet/Compose-Examples/contents/examples';
+        var data; // Define the data variable globally
+
+        function clearAndReload() {
+            // Clear the search input field
+            document.getElementById('searchInput').value = '';
+
+            // Reload all tiles (assuming loadProjects() is your initial load function)
+            loadProjects();
+        }
 
         function loadProjects() {
-            $.get(apiUrl, function (data) {
+            $.get(apiUrl, function (response) {
+                data = response; // Assign the response to the global data variable
                 data.forEach(function (project) {
                     if (project.type === 'dir') {
                         var projectTile = $('<div class="col-md-2 project-tile">' +
@@ -115,7 +128,6 @@
             // Clear existing content
             $('#repoContent').empty();
             // Reload projects based on the search term
-            $.get(apiUrl, function (data) {
             data.forEach(function (project) {
                 if (project.type === 'dir' && project.name.toLowerCase().includes(searchTerm)) {
                     var projectTile = $('<div class="col-md-2 project-tile">' +
@@ -129,7 +141,19 @@
                 }
             });
         });
-        });
+
+    // Function to select a random project name and fill the search input
+    function randomProject() {
+        // Get a random project index
+        var randomIndex = Math.floor(Math.random() * data.length);
+        var randomProject = data[randomIndex];
+        
+        // Fill the search input with the random project name
+        $('#searchInput').val(randomProject.name);
+    
+        // Trigger the input event to initiate the search
+        $('#searchInput').trigger('input');
+    }
     </script>
 </body>
 </html>