GabiZar/Images-Scrapper-JS
1
0
Fork 0
mirror of https://github.com/Gabi-Zar/Images-Scrapper-JS.git synced 2026-04-17 05:36:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve images scrapping from bing and show images on the client

Browse Source
This commit is contained in:
GabiZar
2026-03-05 21:58:07 +01:00
parent 7dddb7e0e4
commit ff702d74aa
4 changed files with 73 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>Ma Web App</title>
<title>Images Scrapper JS</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
@@ -11,7 +11,7 @@
<div class="app">
<main class="content">
<h1>Images Scrapper JS</h1>
<div class="view">
<div class="view" id="view">
<div class="horizontal-div">
<form class="horizontal-div input-form" id="search-form">
<input id="search-input" type="text" placeholder="Search For Images..." />
@@ -19,10 +19,17 @@
</form>
<button onclick="download()">Download Images</button>
</div>
<div id="images-div" class="images-div"></div>
</div>
</main>
</div>
<template id="image-template">
<div class="image-box">
<img id="image" />
</div>
</template>
<script src="script.js"></script>
</body>
</html>

15
public/script.js
View File

@@ -1,7 +1,8 @@
const starsNumber = 1000;
const searchInput = document.getElementById("search-input");
const searchForm = document.getElementById("search-form");
const imagesDiv = document.getElementById("images-div");
const imageTemplate = document.getElementById("image-template");
let imagesUrls = [];
starsCanvas(starsNumber);
@@ -81,16 +82,20 @@ function starsCanvas(number) {
animate();
}
async function getImagesURL(query, offset = 0, count = 100) {
const url = `/api/getImagesURL?q=${encodeURIComponent(query)}&offset=${offset}&count=${count}`;
async function getImagesURL(query, offset, count, smart) {
const url = `/api/getImagesURL?q=${encodeURIComponent(query)}&offset=${offset}&count=${count}&smart=${smart}`;
const response = await fetch(url);
const data = await response.json();
for (const url of data) {
imagesUrls.push(url);
const imageTemplateCopy = imageTemplate.content.cloneNode(true);
imageTemplateCopy.getElementById("image").src = url;
imagesDiv.append(imageTemplateCopy);
}
console.log(imagesUrls);
}
async function search() {
await getImagesURL(searchInput.value);
imagesDiv.replaceChildren();
await getImagesURL(searchInput.value, 1, 1000, true);
}

27
public/style.css
View File

@@ -98,3 +98,30 @@ body {
position: fixed;
z-index: -1;
}
.images-div {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 20px;
justify-content: center;
margin-top: 50px;
}
.image-box {
width: 150px;
height: 150px;
border-radius: 16px;
overflow: hidden;
transition: transform 0.2s;
}
.image-box:hover {
transform: scale(3);
border-radius: 8px;
}
.image-box img {
width: 100%;
height: 100%;
object-fit: cover;
}