search function added in, styled, and working
This commit is contained in:
parent
c74278ddc1
commit
137b6c59bf
SSH Key Fingerprint:
SHA256:cyNGncrLxKXAgYC96dYNROnQKikLInzrpiMraZdqyhY
@ -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;
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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, '');
|
|
||||||
}
|
|
||||||
@ -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";
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user