├── index.html ├── logic.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Img-Engine 8 | 9 | 10 | 11 |
12 |

Image Search Engine

13 |
14 | 15 | 16 |
17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /logic.js: -------------------------------------------------------------------------------- 1 | const input = document.getElementById('search-box'); 2 | const searchbtn = document.getElementById('Search-btn'); 3 | const display = document.getElementById('display'); 4 | const show = document.getElementById('more'); 5 | const accesskey = "Ye231JmnrvKeWozHoXo8RToWM51zD2MevZHfTT0qRfI"; 6 | let page = 1; 7 | let keyword = ""; 8 | 9 | async function getimages(){ 10 | 11 | 12 | let url = `https://api.unsplash.com/search/photos?page=${page}&query=${keyword}&per_page=12&client_id=${accesskey}`; 13 | let response = await fetch(url); 14 | let data = await response.json(); 15 | const results = data.results; 16 | results.map((results)=>{ 17 | 18 | const img = document.createElement('img'); 19 | img.src = results.urls.small; 20 | console.log(results.urls.small); 21 | const imglink = document.createElement('a'); 22 | imglink.href = results.links.html; 23 | imglink.appendChild(img); 24 | imglink.target = "_blank"; 25 | display.appendChild(imglink); 26 | 27 | }) 28 | } 29 | 30 | 31 | searchbtn.addEventListener('click' ,(e)=>{ 32 | 33 | display.innerHTML = ''; 34 | page=1; 35 | keyword = input.value; 36 | getimages(); 37 | show.style.display="block"; 38 | 39 | }) 40 | 41 | input.addEventListener('keypress' ,(e)=>{ 42 | 43 | 44 | if (e.key === 'Enter') { 45 | 46 | display.innerHTML = ''; 47 | page=1; 48 | keyword = input.value; 49 | getimages(); 50 | show.style.display="block"; 51 | } 52 | }) 53 | 54 | show.addEventListener('click' , ()=>{ 55 | 56 | page++; 57 | getimages(); 58 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | 9 | body{ 10 | 11 | min-height: 100vh; 12 | width: 100%; 13 | display: flex; 14 | flex-direction: column; 15 | background: linear-gradient(135deg ,purple , black); 16 | } 17 | 18 | .container{ 19 | 20 | 21 | width: 100%; 22 | height: 50vh; 23 | display: flex; 24 | justify-content: center; 25 | flex-direction: column; 26 | align-items: center; 27 | color: white; 28 | font-size: 25px; 29 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 30 | } 31 | 32 | .container #search-div{ 33 | 34 | margin-top: 70px; 35 | width: 40%; 36 | height: 70px; 37 | border-radius: 10px; 38 | background-color: antiquewhite; 39 | border: none; 40 | outline: none; 41 | display: flex; 42 | } 43 | 44 | #search-div input{ 45 | 46 | width: 80%; 47 | height: 100%; 48 | border-top-left-radius: 10px; 49 | border-bottom-left-radius: 10px; 50 | padding-left: 40px; 51 | padding-right: 10px; 52 | font-size: 18px; 53 | border: none; 54 | outline: none; 55 | } 56 | 57 | ::placeholder{ 58 | 59 | color: rgba(0, 0, 0, 0.671); 60 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 61 | font-size: 16px; 62 | } 63 | 64 | #search-div button{ 65 | 66 | width: 20%; 67 | background-color: orangered; 68 | border-top-right-radius: 10px; 69 | border-bottom-right-radius: 10px; 70 | border: none; 71 | outline: none; 72 | font-size: 18px; 73 | font-weight: 600; 74 | color: rgb(255, 255, 255); 75 | } 76 | 77 | 78 | #search-div button:hover{ 79 | 80 | background-color: purple; 81 | } 82 | 83 | 84 | #more{ 85 | 86 | 87 | width: 120px; 88 | margin: 20px auto; 89 | height: 60px; 90 | text-align: center; 91 | background-color: orangered; 92 | color: white; 93 | font-size: 16px; 94 | border-radius: 10px; 95 | border: none; 96 | outline: none; 97 | display: none; 98 | } 99 | 100 | #more:hover{ 101 | 102 | background-color:purple ; 103 | 104 | } 105 | 106 | #display{ 107 | 108 | margin-top: 10px; 109 | margin-left: 20px; 110 | margin-right: 20px; 111 | gap: 20px; 112 | display: grid; 113 | grid-template-columns: 1fr 1fr 1fr; 114 | } 115 | 116 | #display img{ 117 | 118 | width: 100%; 119 | height: 350px; 120 | object-fit: cover; 121 | border-radius: 10px; 122 | box-shadow: 10px 11px 16px -4px rgba(255, 255, 255, 0.384); 123 | -webkit-box-shadow: 10px 11px 16px -4px rgba(0, 0, 0, 0.401); 124 | -moz-box-shadow: 10px 11px 16px -4px rgba(255, 255, 255, 0.384); 125 | 126 | } 127 | 128 | #display img:hover{ 129 | 130 | transform: scale(1.05); 131 | border-radius: 10px; 132 | 133 | } 134 | 135 | --------------------------------------------------------------------------------