mathdatech/Compose-Examples
1
0
Fork 0
mirror of https://github.com/Haxxnet/Compose-Examples synced 2025-04-26 14:43: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/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>