169 lines
4.6 KiB
HTML
169 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!--<link rel="stylesheet" media="screen and (max-width: 480px)" href="../css/mobile.css"> -->
|
|
<link rel="stylesheet" href="../css/home.css">
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!--Header Bar -->
|
|
<section id="nav_bar" class="nav_bar">
|
|
<div id="nav_left_holder" class="nav_left_holder">
|
|
<button id="button1"class="nav_left_item">About_Me</button>
|
|
<button id="button2"class="nav_left_item">Developement</button>
|
|
<button id="button3"class="nav_left_item">Deployments</button>
|
|
|
|
</div>
|
|
<form id="search_holder" class="search_holder">
|
|
<label for="search_field">Search://</label>
|
|
<input
|
|
id="search_field"
|
|
type="search"
|
|
class="search_field"
|
|
placeholder="Enter Card Name, Tag or Search Here..."
|
|
>
|
|
</form>
|
|
<div id="nav_right_holder" class="nav_right_holder">
|
|
<a href="https://git.booser.tech" id="button1" class="nav_right_item">
|
|
<img src="../img/gitlab.svg" alt="Checkout my Gitlab!">
|
|
</a>
|
|
|
|
<button id="button2"class="nav_right_item">
|
|
<img src="../img/linkedin.svg" alt="Find me on Linkedin">
|
|
</button>
|
|
|
|
<button id="button3"class="nav_right_item">
|
|
<img src="../img/resume.svg" alt="Download my Resume!">
|
|
</button>
|
|
|
|
<button id="button4"class="nav_right_item">
|
|
<img src="../img/contact.svg" alt="Let's talk!">
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PlaceHolder Card -->
|
|
<template>
|
|
<div class="card">
|
|
<div class="card_image"></div>
|
|
<div class="card_title"></div>
|
|
<div class="card_info_holder">
|
|
<div class="card_long"></div>
|
|
<div class="card_tag">
|
|
</div>
|
|
<div class="carousel_holder"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<!--Body Area -->
|
|
<section id="card_container">
|
|
</section>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
// Grabs data from json
|
|
async function fetchData() {
|
|
try {
|
|
const response = await fetch("../scripts/cards.json");
|
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Fetching data failed:", error);
|
|
alert("Error fetching data. Please try again later.");
|
|
}
|
|
}
|
|
|
|
class Looper {
|
|
constructor() {
|
|
this.sentinal = false;
|
|
this.data = null;
|
|
console.log("Looper Online");
|
|
this.initialize();
|
|
}
|
|
|
|
async initialize() {
|
|
this.data = await fetchData();
|
|
console.log("Data loaded:", this.data);
|
|
}
|
|
|
|
async loop(inString) {
|
|
if (!this.data) {
|
|
console.log("Data is not loaded yet!");
|
|
return;
|
|
}
|
|
|
|
let debugDelay = 0;
|
|
while (this.sentinal) {
|
|
debugDelay++;
|
|
console.log("Waiting on previous search: " + debugDelay + "ms");
|
|
}
|
|
this.sentinal = true;
|
|
|
|
// Clear previous results
|
|
const resultsDiv = document.getElementById("card_container");
|
|
resultsDiv.innerHTML = "";
|
|
|
|
// Loop through the data and show matching items
|
|
let matchesFound = false;
|
|
for (let card of this.data.cards) {
|
|
let matches = false;
|
|
|
|
// Check if title contains inString
|
|
if (card.title.toLowerCase().includes(inString.toLowerCase())) {
|
|
matches = true;
|
|
}
|
|
|
|
// Check if any tag contains inString
|
|
if (card.tags && card.tags.some(tag => tag.toLowerCase().includes(inString.toLowerCase()))) {
|
|
matches = true;
|
|
}
|
|
|
|
// Check if text contains inString
|
|
if (card.text.toLowerCase().includes(inString.toLowerCase())) {
|
|
matches = true;
|
|
}
|
|
|
|
// If there's a match, display the card
|
|
if (matches) {
|
|
matchesFound = true;
|
|
const article = document.createElement("article");
|
|
article.innerHTML = `
|
|
<div><h1>${card.title}</h1></div>
|
|
<div><p>${card.text}</p></div>
|
|
<div><ul>${card.tags.map(tag => `<li>${tag}</li>`).join('')}</ul></div>
|
|
`;
|
|
resultsDiv.appendChild(article);
|
|
}
|
|
}
|
|
|
|
if (!matchesFound) {
|
|
resultsDiv.innerHTML = "<p>No results found.</p>";
|
|
}
|
|
|
|
this.sentinal = false;
|
|
}
|
|
}
|
|
|
|
// Create a new Looper instance
|
|
const loo = new Looper();
|
|
|
|
|
|
// Event listener for the Enter key press in the input field
|
|
document.getElementById("search_field").addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
const input = event.target.value;
|
|
console.log("Enter key pressed, input value: ", input);
|
|
loo.loop(input); // Call the loop function
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|