mathdatech/Compose-Examples
1
0
Fork 0
mirror of https://github.com/Haxxnet/Compose-Examples synced 2025-04-26 22:53:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
LRVT 2024-03-10 00:23:49 +01:00 committed by GitHub
parent 6dff501a26
commit c3037326d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/index.html
View File

@ -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/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/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> <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>
<div id="searchBar" class="text-center"> <div id="searchBar" class="text-center">
<input type="text" id="searchInput" class="form-control" placeholder="Search by project name..."> <input type="text" id="searchInput" class="form-control" placeholder="Search by project name...">
</div> </div>
<div id="repoContent" class="row justify-content-center"></div> <div id="repoContent" class="row justify-content-center"></div>
</div> </div>
<!-- jQuery and Bootstrap JS --> <!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous"></script> <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 --> <!-- Custom JavaScript -->
<script> <script>
var apiUrl = 'https://api.github.com/repos/Haxxnet/Compose-Examples/contents/examples'; 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() { function loadProjects() {
$.get(apiUrl, function (data) { $.get(apiUrl, function (response) {
data = response; // Assign the response to the global data variable
data.forEach(function (project) { data.forEach(function (project) {
if (project.type === 'dir') { if (project.type === 'dir') {
var projectTile = $('<div class="col-md-2 project-tile">' + var projectTile = $('<div class="col-md-2 project-tile">' +
@ -115,7 +128,6 @@
// Clear existing content // Clear existing content
$('#repoContent').empty(); $('#repoContent').empty();
// Reload projects based on the search term // Reload projects based on the search term
$.get(apiUrl, function (data) {
data.forEach(function (project) { data.forEach(function (project) {
if (project.type === 'dir' && project.name.toLowerCase().includes(searchTerm)) { if (project.type === 'dir' && project.name.toLowerCase().includes(searchTerm)) {
var projectTile = $('<div class="col-md-2 project-tile">' + 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> </script>
</body> </body>
</html> </html>