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.
120
html/home.html
120
html/home.html
|
|
@ -7,7 +7,7 @@
|
||||||
<link rel="stylesheet" href="../css/home.css">
|
<link rel="stylesheet" href="../css/home.css">
|
||||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||||
|
|
||||||
<head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!--Header Bar -->
|
<!--Header Bar -->
|
||||||
|
|
@ -28,12 +28,12 @@
|
||||||
id="search_holder"
|
id="search_holder"
|
||||||
class="search_holder"
|
class="search_holder"
|
||||||
>
|
>
|
||||||
<label for"search_field">Search://</label>
|
<label for="search_field">Search://</label>
|
||||||
<input
|
<input
|
||||||
id="search_field"
|
id="search_field"
|
||||||
type="search"
|
type="search"
|
||||||
class="search_field"
|
class="search_field"
|
||||||
placeholder=""
|
placeholder="Enter Card Name, Tag or Search Here..."
|
||||||
>
|
>
|
||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
|
|
@ -60,15 +60,7 @@
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!--Body Area -->
|
|
||||||
<section id=#card_container>
|
|
||||||
<!-- PlaceHolder Card -->
|
<!-- PlaceHolder Card -->
|
||||||
<div class="card">
|
|
||||||
<div class="thumbnail"></div>
|
|
||||||
<h1>NixOS</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card_image"></div>
|
<div class="card_image"></div>
|
||||||
|
|
@ -77,8 +69,114 @@
|
||||||
<div class="card_long"></div>
|
<div class="card_long"></div>
|
||||||
<div class="card_tag">
|
<div class="card_tag">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="carousel_holder"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<!--Body Area -->
|
||||||
|
<section id="card_container">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</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