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;
|
||||
padding: 0;
|
||||
@ -11,8 +17,8 @@
|
||||
body {
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: 16px;
|
||||
background-color: light_dark(#e6daa6, #0c024d);
|
||||
color: light_dark(#0c024d, #e6daa6);
|
||||
background-color: light_dark(var(--light), var(--dark));
|
||||
color: light_dark(var(--dark), var(--light));
|
||||
margin: 2rem auto;
|
||||
}
|
||||
.header {
|
||||
@ -27,7 +33,7 @@ body {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
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 {
|
||||
font-size: 2rem;
|
||||
@ -37,10 +43,38 @@ body {
|
||||
width: 90%;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
.quotes {
|
||||
border: 1px solid lightgrey;
|
||||
.search {
|
||||
margin: auto;
|
||||
padding: 8px;
|
||||
background-color: light_dark(var(--lightgrey), var(--darkgrey));
|
||||
border: 1px solid var(--lightgrey);
|
||||
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;
|
||||
columns: 300px;
|
||||
column-gap: auto;
|
||||
@ -51,9 +85,9 @@ body {
|
||||
background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
|
||||
background-attachment: fixed;
|
||||
color: beige;
|
||||
border: 1px solid lightgrey;
|
||||
border: 1px solid var(--lightgrey);
|
||||
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;
|
||||
padding: 1rem;
|
||||
max-width: 340px;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<title>fyrfli's favourite quotes</title>
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<!-- <script defer src="js/app.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -18,8 +19,17 @@
|
||||
</header>
|
||||
|
||||
<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="debug"></article>
|
||||
</main>
|
||||
|
||||
<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++;
|
||||
}
|
||||
});
|
||||
|
||||
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