Nothing Found
Gallery of holidays pictures
Images from my website
Revision:
The search() method, which is "case-sensitive", matches a string against a regular expression. If the search value is a string, it is converted to a regular expression. It returns the index (position) of the first match, but returns -1 if no match is found.
searchValue: required; the search value, i.e. a regular expression (or a string that will be converted to a regular expression).
<div class="spec">
<p id="initial"></p>
<p id="search"></p>
<p id="search1"></p>
<p id="search2"></p>
<p id="search3"></p>
<p id="search4"></p>
</div>
<script>
let text = "Mr. Blue has a blue house"
document.getElementById("initial").innerHTML = "text : " + text;
let position = text.search("Blue");
document.getElementById("search").innerHTML = " 'Blue' position: " + position;
let position2 = text.search("blue");
document.getElementById("search1").innerHTML = " 'blue' position: " + position2;
let position3 = text.search(/Blue/);
document.getElementById("search2").innerHTML = " /Blue/ position: " + position3;
let position4 = text.search(/blue/);
document.getElementById("search3").innerHTML = " /blue/ position: " +position4;
let position5 = text.search(/blue/i);
document.getElementById("search4").innerHTML = " /blue/i position: " + position5;
</script>
<div class="spec">
<!-- (A) SEARCH BOX -->
<input type="text" id="the-filter" placeholder="Search For..."/>
<!-- (B) LIST OF ITEMS -->
<ul id="the-list">
<li>Apple</li>
<li>Apricots</li>
<li>Avocado</li>
<li>Banana</li>
<li>Blackberries</li>
<li>Blueberries</li>
<li>Cherries</li>
<li>Coconut</li>
<li>Cranberries</li>
<li>Durian</li>
<li>Elderberries</li>
<li>Grapefruit</li>
<li>Grapes</li>
<li>Guava</li>
<li>Honeydew</li>
<li>Jackfruit</li>
<li>Longan</li>
<li>Loquat</li>
<li>Mango</li>
<li>Orange</li>
<li>Papaya</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Strawberries</li>
<li>Watermelon</li>
</ul>
</div>
<style>
/* (a) search box*/
#the-filter {box-sizing: border-box; width: 100%; margin-bottom: 1.5vw; padding: 1vw;}
/* (b) list */
#the-list {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10,1fr);}
#the-list li {padding: 1vw; border-bottom: 0.2vw solid #ffe9e9;}
#the-list li:hover { background: #fffed6; }
#the-list li.hide { display: none; }
</style>
<script>
window.addEventListener("load", () => {
// (a) get HTML elements
var filter = document.getElementById("the-filter"),
list = document.querySelectorAll("#the-list li");
// (b) attach keyup listener to search box
filter.onkeyup = () => {
// (b1)get current search term
let search = filter.value.toLowerCase();
// (b2) loop through the list items - only show those that match the search
for (let i of list) {
let item = i.innerHTML.toLowerCase();
if (item.indexOf(search) == -1) { i.classList.add("hide"); }
else { i.classList.remove("hide"); }
}
};
});
</script>
<div class="spec">
<h4>JavaScript - simple search bar</h4>
<div>
<input type="text" id="search5" placeholder="Search here..."
onkeyup="searchList()" class="form-control"/>
</div>
<ul class="list-group" id="list">
<li class='list-group-item'>1. Apple</li>
<li class='list-group-item'>2. Banana</li>
<li class='list-group-item'>3. Cat</li>
<li class='list-group-item'>4. Dog</li>
<li class='list-group-item'>5. Eggplant</li>
<li class='list-group-item'>6. Flame</li>
</ul>
</div>
<script>
function searchList(){
var search = document.getElementById('search5').value.toLowerCase();
var target = document.getElementById("list");
var list = target.getElementsByTagName('li');
for(var i=0; i < list.length; i++){
var text = list[i].innerHTML;
if(text.toLowerCase().indexOf(search) > -1){
list[i].style.display = "";
}else{
list[i].style.display = "none";
}
}
}
</script>
<div class="spec">
<form id="form" role="search">
<input type="search" id="query" name="q" placeholder="Search..."
aria-label="Search through site content">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471
928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-
171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706
312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529
79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455
-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364
0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
</div>
<style>
#form {background-color: #4654e1; width: 30vw; height: 4.4vw; border-radius: 0.5vw;
display: flex; flex-direction: row;
align-items: center;}
#query {all:unset; font: 1.6vw system-ui; color: #fff; height: 100%; width: 100%;
padding: 0.6vw 1vw;}
::placeholder { color: #fff; opacity: 0.7; }
button {all: unset; cursor: pointer; width: 4.4vw; height: 4.4vw;}
svg { color: #fff; fill: currentColor; width: 2.4vw; height: 2.4vw; padding: 1vw;}
</style>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'lwitters.com';
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
<div class="spec">
<p id="property16"></p>
<p id="property15"> </p>
</div>
<script>
var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
document.getElementById("property16").innerHTML = "original sentence:
Apples are round, and apples are juicy.";
if (str.search(re) == -1 ) {
document.getElementById("property15").innerHTML = " search result:
does not contain 'Apples'";
} else {
document.getElementById("property15").innerHTML = " search result:
contains 'Apples'";
}
</script>
The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups. This method can be used to capture groups with the /g flag giving it an advantage over the match() method, which ignores capturing groups with the /g flag.
parameters:
regexp: a regular expression object, or any object that has a "Symbol.matchAll" method. If regexp is not a RegExp object and does not have a "Symbol.matchAll" method, it is implicitly converted to a RegExp by using new RegExp(regexp, 'g'). If regexp is a RegExp object (via the IsRegExp check), then it must have the global (g) flag set, or a TypeError is thrown.
return value:
an iterable iterator (which is not restartable) of matches. Each match is an array with the same shape as the return value of RegExp.prototype.exec().
<div class="spec">
<p id="match1"></p>
<p id="match2"></p>
</div>
<script>
const regexp = /t(e)(st(\d?))/g;
const str2 = 'test1test2';
const array = [...str2.matchAll(regexp)];
console.log(array[0]); // expected output: Array ["test1", "e", "st1", "1"]
document.getElementById("match1").innerHTML = array[0];
console.log(array[1]); // expected output: Array ["test2", "e", "st2", "2"]
document.getElementById("match2").innerHTML = array[1];
</script>
<div class="spec">
<p id="match3"></p>
<p id="match4"></p>
</div>
<script>
const regexp1 = /foo[a-z]*/g;
const str3 = 'table football, foosball';
const matches = str3.matchAll(regexp1);
for (const match of matches) {
document.getElementById("match3").innerHTML += `Found ${match[0]}
start=${match.index} end=${match.index + match[0].length}. <br>` ;
console.log(`Found ${match[0]} start=${match.index} end=${match.index +
match[0].length}.`);
}
// expected output: "Found football start=6 end=14."
// expected output: "Found foosball start=16 end=24."
// matches iterator is exhausted after the for..of iteration
// Call matchAll again to create a new iterator
Array.from(str3.matchAll(regexp1), (m) => m[0]);
// Array [ "football", "foosball" ]
</script>
SuperHero FAQ
Frequently Asked Question about Superhero
It's Superman's weakness
Spider-man was bitten by a radioactive spider on a lab.
secretThomas Wayne and Martha Wayne.
The villain of 'Thor: The Dark World'
A magic lasso and bullet-proof bracelets
She can manipulate and resist the weather
She can manipulate and resist the weather
It's a place where the Time Stone is hidden in Doctor Strange
It's where Wonder Woman comes from.
The sidekick of Aquaman, is someone called Aqualad.
<div class="spec">
<div class="columns mx-1">
<div class="column is-half is-offset-one-quarter">
<section class="hero is-primary mb-4">
<div class="hero-body">
<p class="title">SuperHero FAQ</p>
<p class="subtitle">Frequently Asked Question about Superhero</p>
</div>
</section>
<section>
<div>
<label for="searchbox" class="is-size-5">Search</label>
<input class='input mb-5' type="search" id="searchbox"
oninput="liveSearch()" placeholder="Live search keyword..">
</div>
<div class="box is-hidden">
<strong>What is Kryptonite?</strong>
<p> It's Superman's weakness</p>
</div>
<div class="box is-hidden">
<strong> How did Spider-man get superpowers?</strong>
<p> Spider-man was bitten by a radioactive spider on a lab. </p>
<!-- Put any keywords here -->
<span class="is-hidden">secret</span>
</div>
<div class="box is-hidden" >
<strong>Who were Batman's parents?</strong>
<p> Thomas Wayne and Martha Wayne. </p>
</div>
<div class="box is-hidden">
<strong>Who is Malekith?</strong>
<p>The villain of 'Thor: The Dark World' </p>
</div>
<div class="box is-hidden">
<strong>What's Wonder Woman's weapon?</strong>
<p>A magic lasso and bullet-proof bracelets </p>
</div>
<div class="box is-hidden">
<strong>What's Strom super power?</strong>
<p>She can manipulate and resist the weather</p>
</div>
<div class="box is-hidden">
<strong>What's Strom super power?</strong>
<p>She can manipulate and resist the weather</p>
</div>
<div class="box is-hidden">
<strong>What is Eye of Agamotto?</strong>
<p>It's a place where the Time Stone is hidden in Doctor Strange </p>
</div>
<div class="box is-hidden">
<strong>What is Paradise Island?</strong>
<p>It's where Wonder Woman comes from. </p>
</div>
<div class="box is-hidden">
<strong>Who was the sidekick of Aquaman?</strong>
<p>The sidekick of Aquaman, is someone called Aqualad. </p>
</div>
</section>
</div>
</div>
</div>
<style>
.is-hidden{display:none;}
</style>
<script>
let cards = document.querySelectorAll('.box')
function liveSearch() {
let search_query = document.getElementById("searchbox").value;
//Use innerText if all contents are visible
//Use textContent for including hidden elements
for (var i = 0; i < cards.length; i++) {
if(cards[i].textContent.toLowerCase()
.includes(search_query.toLowerCase())) {
cards[i].classList.remove("is-hidden");
} else {
cards[i].classList.add("is-hidden");
}
}
}
//A little delay
let typingTimer;
let typeInterval = 500;
let searchInput = document.getElementById('searchbox');
searchInput.addEventListener('keyup', () => {
clearTimeout(typingTimer);
typingTimer = setTimeout(liveSearch, typeInterval);
});
</script>
Gallery of holidays pictures
Images from my website
<div class="spec">
<div class="columns mx-1">
<div class="column is-half is-offset-one-quarter">
<section class="hero is-primary mb-4">
<div class="hero-body">
<p class="title">Gallery of holidays pictures</p>
<p class="subtitle">Images from my website</p>
</div>
</section>
<section>
<div>
<label for="searchbox1" class="is-size-5">Search</label>
<input class='input mb-5' type="search" id="searchbox1" oninput="liveImage()"placeholder="Live search keyword..">
</div>
<div>
<img class='image is-hidden' src="../pics/1.jpg" width="50%" height="auto" alt="on the lake" />
<img class='image is-hidden' src="../pics/2.jpg" width="50%" height="auto" alt="beach view" />
<img class='image is-hidden' src="../pics/3.jpg" width="50%" height="auto" alt="ready for a shower" />
<img class='image is-hidden' src="../pics/4.jpg" width="50%" height="auto" alt="becoming a sailor" />
<img class='image is-hidden' src="../pics/5.jpg" width="50%" height="auto" alt="relaxing under the palm trees" />
</div>
</section>
</div>
</div>
</div>
<style>
.is-hidden{display: none;}
</style>
<script>
let boxes = document.querySelectorAll('.image')
function liveImage() {
let search_query = document.getElementById("searchbox1").value;
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].getAttribute('alt').toLowerCase().includes(search_query.toLowerCase())) {
boxes[i].classList.remove("is-hidden");
} else {
boxes[i].classList.add("is-hidden");
}
}
}
//A little delay
let typingTimer1;
let typeInterval1 = 500;
let searchInput1 = document.getElementById('searchbox');
searchInput1.addEventListener('keyup', () => {
clearTimeout(typingTimer1);
typingTimer1 = setTimeout(liveSearch, typeInterval1);
});
</script>
<div>
<section class="containerA">
<h4>Search for a fruit</h4>
<input type="search" id="searchA" onkeyup="mySearch()" placeholder="Search for fruit.." title="Type in a fruit" aria-label="search">
<ul class="card-containerA grid3">
<li><a href="#">Apples</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Grapes</a></li>
<li><a href="#">Mangos</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Pineapples</a></li>
<li><a href="#">Strawberries</a></li>
</ul>
</section>
</div>
<style>
.card-containerA {list-style-type: none; margin-top: 1rem;}
.card-containerA li a {margin-block: .5rem; background-color: #222; color: #f1f1f1; padding: 1rem;
text-decoration: none; text-align: center; display: block;}
.card-containerA li a:hover:not(.header) { transform: scale(1.05);}
</style>
<script>
function mySearch() {
var input, filter, ul, li, a, i, txtValue;
input = document.querySelector("#searchA");
filter = input.value.toUpperCase();
ul = document.querySelector(".card-containerA");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
Use the search bar to find what you are looking for!! - Type * in the search bar to display all entries.
You can use the + or - prefixes to oblige word(s) to be present or exlude them, respectively, from the search.
<div>
<ol>
<div class="theData">
<li>Title - <span class="author">Author's details</span> - <a target="_blank" href="link_to_paper">here</a> (date)</li>
<span class="BCdico">list of keywords in the paper separated with a space and all lowercase</span>
</div>
<ol>
<!-- The search bar -->
<form action="/">
<table border="0" cellpadding="0" cellspacing="5" bgcolor="#e9e9e9">
<tr>
<td align="right" valign="middle"><input id="theSearchString" type="text" placeholder="Search.." name="searchS"></td>
<td align="left" valign="middle">
<button id="buttonStr" type="button" onClick='doSearch("")'>
<svg width="24" height="24"><circle r="5" cx="6" cy="6" id="C1" style="stroke:#000000;stroke-width:4;fill:yellow;" /><line id="L1" x1="16" y1="16" x2="9" y2="9"
style="stroke:#000000;stroke-width:3;fill:none;" />
</svg>
</button>
</td>
<td align="center">
<input type="radio" id="ro" name="ao" value="ro" checked /><label for="ro">Or</label>
<input type="radio" id="ra" name="ao" value="ra" /><label for="ra">And</label><br />
<input type="checkbox" id="ww" name="ww" /><label for="ww">Whole words</label>
</td>
</tr>
</table>
</form>
<p style="padding-left:16px">Use the search bar to find what you are looking for!! - Type * in the search bar to display all entries.<br />
You can use the <strong>+</strong> or <strong>-</strong> prefixes to oblige word(s) to be present or exlude them, respectively, from the search.</p>
<!-- end search bar -->
</div>
<style>
.theData{display: none;}
ol li { border-left:1px solid blue; border-bottom:1px solid darkgrey; padding-bottom:3px; padding-left:5px; }
strong { color:black; font-weight:bolder; }
.BCdico {display: none;}
.author { color:#000066; font-weight:bold; }
table { width:60vw; padding-top:1vw; padding-bottom:1vw; padding-left:4vw; padding-right:2vw; background-color:lightblue; }
input[type=text] { padding:8px; margin-top:4px; font-size:15px; border:none; }
button { background:#ddd; font-size:18px; border:none; cursor:pointer; margin-top:4px; padding-top:8px; padding-bottom:8px; }
button:hover { background: #CCC; }
#theSearchString { margin-bottom:0px; width: 600px; }
</style>
<script>
// hide previous results
function hideResults() {
var theData = document.getElementsByClassName('theData');
for (var p=0; p<theData.length; print++) {
theData[p].style.display = "none";
}
}
function myReplace(t) {
// Replace words by others in the user's search string
var aro = ['ori1', 'ori2', '...'];
var arr = ['new1', 'new2', '...'];
for (var p=0; p<aro.length; p++) {
var rg = new RegExp(aro[p],'g');
t = t.replace(rg, arr[p]);
}
return t;
}
function toSpace(t) {
// Replace ,:\;tab by spaces
var rg = new RegExp(',|:|\\||;|\\t','g');
return t.replace(rg,' ');
}
function bgetOrder(text, d) {
// Check for + and - options
var lst = []; // define the array storing the tagged words
var ar = text.split(' '); // break the text variable into an array (ar), using space as separator
for (p = 0; p < ar.length; p++) { // Loop through each element of the ar array
var t = ar[p]; // store current array element into variable t
if ((t.trim() != '') && (t.slice(0,1) == d)) { // if +/- is at the beginning of the word
lst.push(t.slice(1)); // store the word into the lst array
}
}
while (text.indexOf(d) > -1) {
text = text.replace(d, '');
}
return [lst, text];
}
function doSearch() {
// Search for words. All matching words return an entry ('or'-type search)
// for 'and'-type:
// prefix = "(?=[\s\S]*" or "(?=[\s\S]*\b" to match exact words
// suffix = ")" or "\b)"
// then
// text = prefix + text.replace(" ", suffix+prefix) + suffix;
// finally
// var rg = new RegExp("(" + text + ")");
var text = (document.getElementById('theSearchString').value.toLowerCase());
var theDico = document.getElementsByClassName('BCdico');
var and = document.getElementById("ra").checked;
var allWord = document.getElementById("ww").checked;
// Following 2 variables are used to beautify the results...
var o = 0; // results are presented in rows
var cc = ['#e5ffe5', '#efffef']; // with alternating background colours
hideResults();
text = text.trim();
if (text == '') {
return 0;
} else if (text == '*') {
for (var p=0; p<theDico.length; p++) {
theDico[p].parentElement.style.display = "block";
theDico[p].parentElement.style.backgroundColor = cc[o];
o = (o+1) % 2;
}
} else {
text = myReplace(text);
text = toSpace(text);
var dicP = [];
var dicM = [];
if (text.indexOf(' +') > -1) {
[dicP, text] = bgetOrder(text,'+');
}
if (text.indexOf(' -') > -1) {
[dicM, text] = bgetOrder(text,'-');
}
if (and) {
var prefix = "(?=[\\s\\S]*";
var suffix = ")";
if (allWord) {
prefix += "\\b";
suffix = "\\b" + suffix;
}
text = prefix + text.replace(/ /g, suffix+prefix) + suffix;
var rg = new RegExp(text);
} else {
if (allWord) {
text = "\\b" + text.replace(/ /g,"\\b|\\b") + "\\b";
var rg = new RegExp("("+text+")");
} else {
var rg = new RegExp("("+text.replace(/ /g,"|")+")");
}
}
for (var i=0; i<theDico.length; i++) {
var txt = theDico[p].innerHTML;
if (txt.search(rg) > -1) {
var b = true;
if (dicM.length > 0) {
// do not show text containing unwanted word(s)
for (var j=0; j<dicM.length; j++) {
if (txt.indexOf(dicM[j]) > -1) {
b = false;
break;
}
}
}
if (dicP.length > 0) {
// do not show text that do not contain wanted word(s)
for (var j=0; j<dicP.length; j++) {
if (txt.indexOf(dicP[j]) == -1) {
b = false;
break;
}
}
}
if (b) {
theDico[p].parentElement.style.display = "block";
theDico[p].parentElement.style.backgroundColor = cc[o];
o = (o+1) % 2;
}
}
}
}
}
</script>
<div>
<div class="search-containerB main-containerB">
<i class="fa fa-search"></i>
<input type="text" id="search-inputB" placeholder="Search..." autocomplete="off"/>
</div>
<div class="main-containerB">
<div id="nothing-alert">Nothing Found</div>
<div class="cards"><h4 class="icon-name">Audi</h4></div>
<div class="cards"><h4 class="icon-name">BMW</h4></div>
<div class="cards"><h4 class="icon-name">Chevrolet</h4></div>
<div class="cards"><h4 class="icon-name">Dacia</h4></div>
<div class="cards"><h4 class="icon-name">Dodge</h4></div>
<div class="cards"><h4 class="icon-name">Ferrari</h4></div>
<div class="cards"><h4 class="icon-name">Jaguar</h4></div>
<div class="cards"><h4 class="icon-name">Kia</h4></div>
<div class="cards"><h4 class="icon-name">Lamborghini</h4></div>
<div class="cards"><h4 class="icon-name">Lotus</h4></div>
<div class="cards"><h4 class="icon-name">Mercedes</h4></div>
<div class="cards"><h4 class="icon-name">Mini</h4></div>
</div>
</div>
<style>
.main-containerB {display: flex; justify-content: flex-start; align-items: center; margin: 15px 40px; flex-wrap: wrap;}
#nothing-alert{ display: none; width: 100%; margin: 50px auto; text-align: center;}
.cards {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80px; height: 80px; margin: 0.5em; background-color: #fff; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.25s ease; animation: populate 0.5s ease-out normal backwards;}
.cards:hover { transform: scale(1.05); z-index: 1; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);}
@keyframes populate {
0% {transform: scale(0);}
}
.icon-name {font-size: 0.7em;text-align: center; margin: 0;}
.search-containerB{position: relative; height: 4vw; max-width: 40vw; width: 70%; background: #fff; border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.search-containerB i {position: absolute; left: 20px; font-size: 16px; color: #707070;}
#search-inputB{height: 100%; width: 100%; outline: none; font-size: 16px; font-weight: 400; border: none; padding-left: 50px;
background-color: transparent;}
@media screen and (max-width: 786px) {
.search-containerB{ width: 50%;}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.getElementById('search-inputB');
const cards = document.querySelectorAll('.cards');
function filterIcons(searchQuery) {
const nothingfound = document.getElementById("nothing-alert");
let number = 0;
cards.forEach(function (card) {
const name = card.querySelector("h4").textContent.toLowerCase();
if (name.includes(searchQuery.toLowerCase())) {
nothingfound.style.display = "none";
card.style.display = "flex";
number++;
} else {
card.style.display = "none";
}
});
if(number == 0){
nothingfound.style.display = "block";
}
}
searchInput.addEventListener("input", function () {
const searchQuery = searchInput.value.trim();
filterIcons(searchQuery);
});
});
</script>
<div>
<h4>Image search app</h4>
<form class="first">
<input type="text" id="search-input-C" placeholder="Search for images..." />
<button id="search-button-C">Search</button>
</form>
<div class="search-results-C"></div>
<button id="show-more-button">Show more</button>
</div>
<style>
h4 {font-size: 3vw; font-weight: bold; text-align: center; margin-top: 1vw; margin-bottom: 3vw;}
.first{display: flex; justify-content: center; align-items: center; margin-bottom: 3vw;}
#search-input-C {width: 60%; max-width: 30vw; padding: 1vw 2vw; border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0.3vw; font-size: 1vw; color: #333;}
#search-button-C{padding: 1vw 2vw; background-color: #4caf50; color: white; border: none; font-size: 1vw; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); cursor: pointer; border-radius: 0.3vw; transition: background-color 0.3s ease-in-out; }
#search-button-C:hover { background-color: #3e8e41;}
.search-results-C {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 90vw; margin: 0 auto; padding: 1vw;}
.search-result-C{ margin-bottom: 3vw; width: 30%; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); overflow: hidden;
}
.search-result-C:hover img {transform: scale(1.05);}
.search-result-C img {width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease-in-out;}
.search-result-C a {padding: 10px; display: block; color: #333; text-decoration: none; transition: background-color 0.3s ease-in-out;}
.search-result-C:hover a {background-color: rgba(0, 0, 0, 0.1);}
#show-more-button {background-color: #008cba; border: none; color: white; padding: 10px 20px; display: none; margin: 20px auto; text-align: center; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease-in-out; }
#show-more-button:hover {background-color: #0077b5;}
@media screen and (max-width: 768px) {
.search-result-C { width: 45%; }
}
@media screen and (max-width: 480px) {
.search-result {width: 100%;}
form {flex-direction: column;}
#search-input { margin-bottom: 20px; width: 85%;}
}
</style>
<script>
const accessKey = "YOUR UNSPLASH API";
const formEl = document.querySelector(".first");
const searchInputEl = document.getElementById("search-input-C");
const searchResultsEl = document.querySelector(".search-results-C");
const showMoreButtonEl = document.getElementById("show-more-button");
let inputData = "";
let page = 1;
async function searchImages() {
inputData = searchInputEl.value;
if(inputData.trim()){
const url = `../pics/?page=${page}&query=${inputData}&client_id=${accessKey}`;
const response = await fetch(url);
const data = await response.json();
if (page === 1) {
searchResultsEl.innerHTML = "";
}
const results = data.results;
results.map((result) => {
const imageWrapper = document.createElement("div");
imageWrapper.classList.add("search-result-C");
const image = document.createElement("img");
image.src = result.urls.small;
image.alt = result.alt_description;
const imageLink = document.createElement("a");
imageLink.href = result.links.html;
imageLink.target = "_blank";
imageLink.textContent = result.alt_description;
imageWrapper.appendChild(image);
imageWrapper.appendChild(imageLink);
searchResultsEl.appendChild(imageWrapper);
});
page++;
if (page > 1) {
showMoreButtonEl.style.display = "block";
}
}
}
formEl.addEventListener("submit", (event) => {
event.preventDefault();
page = 1;
searchImages();
});
showMoreButtonEl.addEventListener("click", () => {
searchImages();
});
</script>