syafiqfaiz · January 30, 2025 14:41
diff --git a/image_query.html b/image_query.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery with Search</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .search-box {
            margin-bottom: 20px;
        }
        input[type="text"] {
            padding: 10px;
            width: 60%;
            font-size: 16px;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .gallery img {
            width: auto;
            height: auto;
            max-width: 300px;
            max-height: 200px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        .gallery img:hover {
            transform: scale(1.05);
        }
    </style>
 </head>
 <body>
    <h1>Image Gallery</h1>
    <div class="search-box">
        <input type="text" id="search" placeholder="Search for images..." >
        <button onClick="searchImages()">Cari</button>
    </div>
    <div class="gallery" id="gallery"></div>
    
    <script>
        function searchImages() {
            const imageContainer = document.getElementById('gallery')
            let input = document.getElementById('search').value.toLowerCase();

            if (input.length > 3) {
                fetch(`https://api.pexels.com/v1/search?query=${input}`, {
                    headers: {
                        'Authorization': 'JQ93iEAdhDkPkIE8cySRtctyvK2hqLeGe9QleXS1BQRGfgfGnU1EKd2t'
                    }
                })
                .then((res) => {
                    imageContainer.innerHTML = ''
                    return res.json()
                })
                .then((body)=> {
                    body.photos.forEach(img => {
                        const image = document.createElement('img')
                        image.setAttribute('src', img.src.portrait ) 
                        imageContainer.append(image)
                    });
                })
                .catch((err) => {
                    debugger
                })
            }
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Gallery with Search</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin: 0;
	padding: 20px;
	background-color: #f4f4f4;
	}
	.search-box {
	margin-bottom: 20px;
	}
	input[type="text"] {
	padding: 10px;
	width: 60%;
	font-size: 16px;
	}
	.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	}
	.gallery img {
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 200px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
	}
	.gallery img:hover {
	transform: scale(1.05);
	}
	</style>
	</head>
	<body>
	<h1>Image Gallery</h1>
	<div class="search-box">
	<input type="text" id="search" placeholder="Search for images..." >
	<button onClick="searchImages()">Cari</button>
	</div>
	<div class="gallery" id="gallery"></div>

	<script>
	function searchImages() {
	const imageContainer = document.getElementById('gallery')
	let input = document.getElementById('search').value.toLowerCase();

	if (input.length > 3) {
	fetch(`https://api.pexels.com/v1/search?query=${input}`, {
	headers: {
	'Authorization': 'JQ93iEAdhDkPkIE8cySRtctyvK2hqLeGe9QleXS1BQRGfgfGnU1EKd2t'
	}
	})
	.then((res) => {
	imageContainer.innerHTML = ''
	return res.json()
	})
	.then((body)=> {
	body.photos.forEach(img => {
	const image = document.createElement('img')
	image.setAttribute('src', img.src.portrait )
	imageContainer.append(image)
	});
	})
	.catch((err) => {
	debugger
	})
	}
	}
	</script>
	</body>
	</html>