fyrfli/jsquotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

search function added in, styled, and working
All checks were successful
deploy updated site / rsync the directories (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Camille Frantz 2024-11-08 12:01:26 -06:00
parent c74278ddc1
commit 536e9c2428
Signed by: fyrfli
SSH Key Fingerprint: SHA256:cyNGncrLxKXAgYC96dYNROnQKikLInzrpiMraZdqyhY
4 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/css/styles.css
View File

@ -1,3 +1,9 @@
:root {
--light: #e6daa6;
--dark: #0c024d;
--lightgrey: #d3d3d3;
--darkgrey: #a9a9a9;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -11,8 +17,8 @@
body { body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 16px; font-size: 16px;
background-color: light_dark(#e6daa6, #0c024d); background-color: light_dark(var(--light), var(--dark));
color: light_dark(#0c024d, #e6daa6); color: light_dark(var(--dark), var(--light));
margin: 2rem auto; margin: 2rem auto;
} }
.header { .header {
@ -27,7 +33,7 @@ body {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
box-shadow: 1px 3px 5px light_dark(lightgrey, darkgrey); box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
} }
.hdr-h1 { .hdr-h1 {
font-size: 2rem; font-size: 2rem;
@ -37,10 +43,38 @@ body {
width: 90%; width: 90%;
margin: 2rem auto; margin: 2rem auto;
} }
.quotes { .search {
border: 1px solid lightgrey; margin: auto;
padding: 8px;
background-color: light_dark(var(--lightgrey), var(--darkgrey));
border: 1px solid var(--lightgrey);
border-radius: 14px; border-radius: 14px;
box-shadow: 1px 3px 5px light_dark(#d6d6a3, darkgrey); margin-bottom: 0.6rem;
}
.search h2 {
text-align: center;
padding: 0 8px;
}
.search fieldset {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.text-input {
padding: 0.4rem 1.2rem;
background-color: light_dark(var(--darkgrey), var(--lightgrey));
border-radius: 14px;
color: light_dark(var(--light), var(--dark));
border: 1px solid light_dark(var(--dark), var(--light));
}
#filter-count {
padding: 0.2rem;
}
.quotes {
border: 1px solid var(--lightgrey);
border-radius: 14px;
box-shadow: 1px 3px 5px light_dark(#d6d6a3, var(--darkgrey));
padding: 1rem; padding: 1rem;
columns: 300px; columns: 300px;
column-gap: auto; column-gap: auto;
@ -51,9 +85,9 @@ body {
background: linear-gradient(to bottom right, #0c024d, #0dbcc5); background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
background-attachment: fixed; background-attachment: fixed;
color: beige; color: beige;
border: 1px solid lightgrey; border: 1px solid var(--lightgrey);
border-radius: 14px; border-radius: 14px;
box-shadow: 1px 3px 5px light_dark(lightgrey, darkgrey); box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
margin: 12px; margin: 12px;
padding: 1rem; padding: 1rem;
max-width: 340px; max-width: 340px;

12
public/index.html
View File

@ -8,6 +8,7 @@
<title>fyrfli's favourite quotes</title> <title>fyrfli's favourite quotes</title>
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<!-- <script defer src="js/app.js"></script> -->
</head> </head>
<body> <body>
@ -18,8 +19,17 @@
</header> </header>
<main class="container"> <main class="container">
<article class="debug"></article> <article class="search">
<form action="javascript:void(0);" method="post" id="live-search" class="styled">
<fieldset>
<h2>search for a quote</h2>
<input type="text" name="search" id="filter" class="text-input" placeholder="start typing..." onkeyup="liveSearch()">
<span id="filter-count"></span>
</fieldset>
</form>
</article>
<article class="quotes"></article> <article class="quotes"></article>
<article class="debug"></article>
</main> </main>
<footer class="footer"> <footer class="footer">

33
public/js/app.js
View File

@ -1,33 +0,0 @@
'use strict';
// Full year for footer
const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear();
const quoteDisplay = document.querySelector(".quote");
let numQuotes;
let randomNum;
let intervalID;
let iteratorID = 0;
let currQuote;
fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
.then((response) => {
return response.json();
})
.then((data) => {
currQuote = getQuote(data);
for (let i = 0; i < 50; i++) {
quoteDisplay.innerText = currQuote;
intervalID = setInterval(() => {
currQuote = getQuote(data);
quoteDisplay.innerText = currQuote;
}, 12000);
}
});
function getQuote(data) {
let noQuotes = Object.entries(data).length;
let randNo = Math.floor(Math.random() * noQuotes);
return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
}

33
public/js/layout.js
View File

@ -21,3 +21,36 @@ fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
i++; i++;
} }
}); });
function liveSearch() {
let j;
let input = document.getElementById('filter').value.toLowerCase();
let item = document.getElementsByClassName('quote');
for (j = 0; j < item.length; j++) {
if (!item[j].innerText.toLowerCase().includes(input)) {
item[j].style.display = "none";
}
else {
item[j].style.display = "inline-block"
}
}
}
// The working funtion for live search from https://jupiter.fyrfli.net/js-play/jsplay.html
// - this is for reference only
// function search_items() {
// let input = document.getElementById('filter').value.toLowerCase();
// let x = document.getElementsByClassName('item');
// for (i = 0; i < x.length; i++) {
// if (!x[i].innerHTML.toLowerCase().includes(input)) {
// x[i].style.display = "none";
// }
// else {
// x[i].style.display = "list-item";
// }
// }
// }