Last active
August 17, 2020 05:20
-
-
Save aharonamir/dda8bb17e5c65ff9ad3d2fb2998fa5b1 to your computer and use it in GitHub Desktop.
search-exercise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Search</title> | |
| <style> | |
| /* Your CSS */ | |
| #container { | |
| min-height: 100vh; | |
| font-size: larger; | |
| } | |
| .top { | |
| height: 12vh; | |
| background-color: lightsteelblue; | |
| } | |
| #search-bar { | |
| width: 300px; | |
| box-shadow: none; | |
| background-color: rgb(235,235,235); | |
| font-size: 20px; | |
| height: 5vh; | |
| margin: 5px 0; | |
| padding-right: 26px; | |
| padding-left: 10px; | |
| -webkit-border-radius: 10px; | |
| /* For Safari, etc. */ | |
| -moz-border-radius: 10px; | |
| /*For Mozilla, etc.*/ | |
| border-radius: 10px; | |
| border-style: solid; | |
| } | |
| .card { | |
| background: #fff; | |
| border-radius: 2px; | |
| display: inline-block; | |
| left: 2vw; | |
| height: auto; | |
| position: relative; | |
| width: 50%; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
| align-self: center; | |
| } | |
| #search-bar:hover { | |
| border-color: steelblue; | |
| } | |
| #search-bar:active { | |
| border-color: steelblue !important; | |
| border-style: solid; | |
| } | |
| .icon-search { | |
| position: relative; | |
| left: -40px; | |
| transform: translateY(5px); | |
| height: 25px; | |
| width: 25px; | |
| } | |
| .search-box { | |
| position: relative; | |
| left: 2vw; | |
| top: 2vh; | |
| } | |
| .row { display: flex; } | |
| /* img { width: 50px; height: 50px;} */ | |
| .item { | |
| width: 100%; | |
| padding-bottom: 10px; | |
| padding-top: 10px; | |
| } | |
| .item:hover { | |
| cursor: pointer; | |
| background-color: lightsteelblue; | |
| } | |
| .items-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| font-weight: lighter; | |
| } | |
| .item>img { | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .items-container>div { | |
| flex: 0 50%; | |
| } | |
| .count { | |
| font-weight: bolder; | |
| padding: 5px; | |
| } | |
| </style> | |
| <script> | |
| const items = [ | |
| { id: 1, image: "https://images.folloze.com/image/upload/v1450949154/folloze-image-gallery/campaign/heroimage01.png", title: "Space Mobile The Final Frontier" }, | |
| { id: 2, image: "https://images.folloze.com/image/upload/v1450949153/folloze-image-gallery/campaign/heroimage13.png", title: "What if They Let You Run The Hubble Mobile" }, | |
| { id: 3, image: "https://images.folloze.com/image/upload/v1450949153/folloze-image-gallery/campaign/heroimage04.png", title: "Shooting Stars Mobile" }, | |
| { id: 4, image: "https://images.folloze.com/image/upload/v1450949149/folloze-image-gallery/campaign/heroimage11.png", title: "Make Money Online Through Advertising" }, | |
| { id: 5, image: "https://images.folloze.com/image/upload/v1450949143/folloze-image-gallery/campaign/heroimage08.png", title: "What Makes Flyers Unrivaled" }, | |
| { id: 6, image: "https://images.folloze.com/image/upload/v1450948643/folloze-image-gallery/campaign/heroimage05.png", title: "Adwords Keywork Research For Beginners" } | |
| ] | |
| const boards = [ | |
| { id: 1, image: "https://images.folloze.com/image/upload/v1458832608/folloze-image-gallery/customer/customer_03.png", title: "The Baiscs Of Buying A Telescope Mobile" }, | |
| { id: 2, image: "https://images.folloze.com/image/upload/v1450949395/folloze-image-gallery/customer/customer_02.png", title: "The Universe Through A Child Eyes Mobile" }, | |
| { id: 3, image: "https://images.folloze.com/image/upload/v1450949032/folloze-image-gallery/customer/customer_04.png", title: "Home Business Advertising Ideas Mobile" }, | |
| { id: 4, image: "https://images.folloze.com/image/upload/v1450949131/folloze-image-gallery/group/group_01.png", title: "Finally A Top Mobile Way You Can Google Adwords Pay Per Clicks" }, | |
| { id: 5, image: "https://images.folloze.com/image/upload/v1450949052/folloze-image-gallery/group/group_02.png", title: "Study 800 Numbers Still Popula With Advertisers Mobile" }, | |
| { id: 6, image: "https://images.folloze.com/image/upload/v1450948179/folloze-image-gallery/generic/generic_06.png", title: "Using Banner Stands To Increase Trade Show Traffic" } | |
| ] | |
| /* Your JavaScript */ | |
| function toggleResultList(show){ | |
| const resultsList = document.getElementById("suggestion-popup"); | |
| show ? resultsList.style.display = "block" : resultsList.style.display = "none"; | |
| } | |
| async function getItems(itemPrefix){ | |
| const filteredItems = items.filter(item => item.title.toLocaleLowerCase().search(itemPrefix.toLocaleLowerCase()) != -1); | |
| return filteredItems; | |
| } | |
| async function getBoards(boardPrefix){ | |
| const filteredBoards = boards.filter(board => board.title.toLocaleLowerCase().search(boardPrefix.toLocaleLowerCase()) != -1); | |
| return filteredBoards; | |
| } | |
| function searchBarOnkey(input){ | |
| if (input.value.length > 0){ | |
| toggleResultList(true); | |
| const { value }= input; | |
| getItems(value).then(filteredItems => listItems(filteredItems)); | |
| getBoards(value).then(filteredBoards => listBoards(filteredBoards)); | |
| } else { | |
| toggleResultList(false); | |
| } | |
| } | |
| function listItems(items){ | |
| document.getElementById("items-count").textContent = `Items: (${items.length})`; | |
| document.getElementById("item-list").innerHTML = createResultList(items,"Item"); | |
| } | |
| function listBoards(boards){ | |
| document.getElementById("boards-count").textContent = `Boards: (${boards.length})`; | |
| document.getElementById("board-list").innerHTML = createResultList(boards,"Board"); | |
| } | |
| // Assuming both results have the same json structure | |
| function createResultList(results,source){ | |
| let listHtml = ''; | |
| results.forEach(result => { | |
| listHtml += `<div class="item row" onclick="resultItemClicked('${source}',${result.id})"><img src="${result.image}"><span>${result.title}</span></div>`; | |
| }); | |
| return listHtml; | |
| } | |
| function resultItemClicked(source,id){ | |
| console.log(`${source} #${id} was clicked!`); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Your HTML elements --> | |
| <div id="container"> | |
| <div class="top"> | |
| <div> | |
| <span class="search-box"> | |
| <input type="text" id="search-bar" name="search-bar" placeholder="Search..." | |
| autocomplete="on" | |
| onkeyup="searchBarOnkey(this)"> | |
| <img class="icon-search" src="https://img.icons8.com/search"> | |
| </span> | |
| </div> | |
| <div id="suggestion-popup" class="card" style="display: none;"> | |
| <div id="items"> | |
| <p> | |
| <span id="items-count" class="count"></span> | |
| </p> | |
| <div class="items-container" id="item-list"></div> | |
| </div> | |
| <div id="boards"> | |
| <p> | |
| <span id="boards-count" class="count"></span> | |
| </p> | |
| <div class="items-container" id="board-list"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment