Search Image
<!DOCTYPE html>
<html>
<head>
<title>Search Image</title>
<style>
/* Some basic styling for the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.search-container {
max-width: 500px;
margin: 0 auto;
}
.search-container input[type=text] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.search-container input[type=submit] {
width: 100%;
padding: 12px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.image-container img {
width: 200px;
height: 200px;
object-fit: cover;
margin: 10px;
}
</style>
</head>
<body>
<h1>Search Image</h1>
<div class="search-container">
<form id="search-form">
<input type="text" id="search-input" placeholder="Enter your search term...">
<input type="submit" value="Search">
</form>
</div>
<div class="image-container" id="image-results"></div>
<script>
// Function to handle form submission
function handleFormSubmit(event) {
event.preventDefault(); // Prevent the default form submission
// Get the search term from the input field
var searchTerm = document.getElementById("search-input").value.trim();
// Clear the image results container
document.getElementById("image-results").innerHTML = "";
// If the search term is empty, display an alert message
if (searchTerm === "") {
alert("Please enter a search term.");
return;
}
// Call the searchImages function with the search term
searchImages(searchTerm);
}
// Function to search for images based on the provided search term
function searchImages(searchTerm) {
// Here, you can integrate with an image search API or use your own database
// For demonstration purposes, we'll just show some pre-defined cow images
var cowImages = [
"cow1.jpg",
"cow2.jpg",
"cow3.jpg",
"cow4.jpg",
"cow5.jpg"
];
var imageContainer = document.getElementById("image-results");
// Loop through the cow images and create an <img> element for each one
for (var i = 0; i < cowImages.length; i++) {
var img = document.createElement("img");
img.src = cowImages[i];
img.alt = "Cow Image";
imageContainer.appendChild(img);
}
}
// Add event listener to the form's submit event
document.getElementById("search-form").addEventListener("submit", handleFormSubmit);
</script>
</body>
</html>
Let's go through the code step by step and explain each part:
1. HTML Structure:
- The code starts with the HTML structure, including the necessary `<head>` and `<body>` tags.
- Inside the `<head>` section, we have a `<title>` tag that sets the title of the page.
- There is also a `<style>` section where we define some basic styling for the page.
2. Page Content:
- `<h1>` tag is used to display the heading "Search Image" in the center of the page.
- `<div>` with the class "search-container" contains a form element (`<form>`) that allows users to enter their search term.
- Inside the form, there is an input field (`<input>`) of type "text" with the id "search-input" and a placeholder text.
- Below the input field, there is another input field of type "submit" that acts as the search button.
- `<div>` with the class "image-container" is used to display the search results.
3. JavaScript:
- The JavaScript code is enclosed within `<script>` tags.
- The `handleFormSubmit` function is responsible for handling the form submission. It prevents the default form submission behavior, retrieves the search term from the input field, and calls the `searchImages` function.
- The `searchImages` function is responsible for displaying the search results. In this example, instead of using an image search API, we simulate the search results by using a pre-defined array of cow image URLs.
- The `searchImages` function retrieves the image results container element (`<div>` with the id "image-results").
- It then loops through the cow image URLs and creates an `<img>` element for each image.
- The created `<img>` elements are appended to the image results container.
4. Event Listener:
- The `handleFormSubmit` function is attached as an event listener to the form's submit event using `addEventListener`.
- This ensures that when the user submits the form, the `handleFormSubmit` function will be called.
So, when the user enters a search term and clicks the "Search" button, the `handleFormSubmit` function is triggered. It retrieves the search term, clears any previous search results, and calls the `searchImages` function. The `searchImages` function then displays the pre-defined cow images as the search results by creating and appending `<img>` elements to the image results container.
Comments
Post a Comment
Share with your friends :)
Thank you for your valuable comment