added deafult images; added search functionality; added json card library;
This commit is contained in:
Michael
parent
49b4753f16
commit
0292af3069
Binary file not shown.
Binary file not shown.
138
html/home.html
138
html/home.html
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="../css/home.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--Header Bar -->
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
id="search_holder"
|
||||
class="search_holder"
|
||||
>
|
||||
<label for"search_field">Search://</label>
|
||||
<label for="search_field">Search://</label>
|
||||
<input
|
||||
id="search_field"
|
||||
type="search"
|
||||
class="search_field"
|
||||
placeholder=""
|
||||
placeholder="Enter Card Name, Tag or Search Here..."
|
||||
>
|
||||
</form>
|
||||
<div
|
||||
|
|
@ -60,25 +60,123 @@
|
|||
|
||||
</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>
|
||||
<!-- PlaceHolder Card -->
|
||||
<div class="card">
|
||||
<div class="thumbnail"></div>
|
||||
<h1>NixOS</h1>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
BIN
img/default/Carousel.jpg
Normal file
BIN
img/default/Carousel.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
img/default/Thumbnail.jpg
Normal file
BIN
img/default/Thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
60
scripts/cards.json
Normal file
60
scripts/cards.json
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"cards": [
|
||||
{
|
||||
"title": "Education",
|
||||
"thumbnail": "../img/t1_thumb",
|
||||
"text": "I am a graduate of Slippery Rock Univeristy of Pennslyvania where I obtained my Bachelors in Computing: Computer Science. I expected to enjoy my AI and Machine Learning Classes, which I did, but my classes on multithreading and parallelization gave me some of my favorite tools. I've always had a relatively 'fast' computer but with multithreading I could finally use that speed.",
|
||||
"tags": ["about","education","butler","SRU", "BC3","ls"],
|
||||
"gallery": ["../img/t1_img1.png", "../img/t1_img2.png", "../img/t1_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "Self Hosting",
|
||||
"thumbnail": "../img/t2_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["tag1", "tag2", "tag3", "about", "deployment","ls"],
|
||||
"gallery": ["../img/t2_img1.png", "../img/t2_img2.png", "../img/t2_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "Work History",
|
||||
"thumbnail": "../img/t3_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["tag1", "tag2", "tag3","about", "work","ls"],
|
||||
"gallery": ["../img/t3_img1.png", "../img/t3_img2.png", "../img/t3_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "FOSS",
|
||||
"thumbnail": "../img/t4_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["tag1", "tag2", "tag3", "about","ls"],
|
||||
"gallery": ["../img/t4_img1.png", "../img/t4_img2.png", "../img/t4_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "Where Am I",
|
||||
"thumbnail": "../img/t1_thumb",
|
||||
"text": "NixOS is a linux distribution focused around the Nix Package manager",
|
||||
"tags": ["tag1", "tag2", "tag3", "about","ls"],
|
||||
"gallery": ["../img/t1_img1.png", "../img/t1_img2.png", "../img/t1_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "Vehicle Routing",
|
||||
"thumbnail": "../img/t2_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["Google", "API", "html","css","js","java","javascript","springboot","git","OOP","github", "deveolopement","ls"],
|
||||
"gallery": ["../img/t2_img1.png", "../img/t2_img2.png", "../img/t2_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "Automating A-Birch",
|
||||
"thumbnail": "../img/t3_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["tag1", "tag2", "tag3"],
|
||||
"gallery": ["../img/t3_img1.png", "../img/t3_img2.png", "../img/t3_img3.png"]
|
||||
},
|
||||
{
|
||||
"title": "t4",
|
||||
"thumbnail": "../img/t4_thumb",
|
||||
"text": "Lorem Ipsum dolar",
|
||||
"tags": ["tag1", "tag2", "tag3", "about"],
|
||||
"gallery": ["../img/t4_img1.png", "../img/t4_img2.png", "../img/t4_img3.png"]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue