Code Explained: front.end24 Edition

Hi Everone, welcome to my blog in this blog post i will share the code of JavaScript practice project (click it to to watch the video) "Image Search App" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. so let's get started with index.html file:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Search App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Image Search App <br /><span>@front.end24</span></h1>
    <form>
      <input type="text" id="search-input" placeholder="Search for images..." />
      <button id="search-button">Search</button>
    </form>
    <div class="search-results">
      
      
    </div>
    <button id="show-more-button">Show more</button>
    <script src="index.js"></script>
  </body>
</html>

Here is the explaination:

The body section contains the visible content of the web page. It includes the following elements:
h1: Represents the main heading of the page. It contains the text "Image Search App" and a span element with the text "@front.end24".
form: Defines a form for user input. It contains an input element of type "text" with the id "search-input" and a placeholder text "Search for images...". It also has a button element with the id "search-button" for submitting the form.
div class="search-results": Represents a container for the search results. This is where the search results will be displayed.
button id="show-more-button"Show more button: Represents a button with the id "show-more-button" that can be used to load more search results.
script src="index.js"script: Includes an external JavaScript file (index.js) for adding interactivity to the page.
The commented-out div elements with the class "search-result" represent individual search results. Each result consists of an img element displaying an image and an a element containing a link to the image source. These are examples which is used to style the display of images on research and have been commented out in the html file because we will get images dynamically using JavaScript.

style.css:

body {
  background-color: #e69ad9;
  font-family: cursive;
  line-height: 1.6;
  margin: 0;
  color: white;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 60px;
}

h1 span {
  font-size: 25px;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}

#search-input {
  width: 60%;
  max-width: 400px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-size: 18px;
  color: #333;
}

#search-button {
  padding: 10px 20px;
  background-color: #911088;
  color: white;
  border: none;
  font-size: 18px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

#search-button:hover {
  background-color: lightgrey;
  color: black;
}

.search-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-result {
  margin-bottom: 60px;
  width: 30%;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.search-result:hover img {
  transform: scale(1.05);
}

.search-result img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.search-result a {
  padding: 10px;
  display: block;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.search-result:hover a {
  background-color: rgba(0, 0, 0, 0.1);
}

#show-more-button {
  background-color: #008cba;
  border: none;
  color: white;
  padding: 10px 20px;
  display: block;
  margin: 20px auto;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  display: none;
}

#show-more-button:hover {
  background-color: #0077b5;
}

@media screen and (max-width: 768px) {
  .search-result {
    width: 45%;
  }
}
@media screen and (max-width: 480px) {
  .search-result {
    width: 100%;
  }

form {
    flex-direction: column;
  }

#search-input {
    margin-bottom: 20px;
    width: 85%;
  }
}

Here is the explaination:

The body selector sets the styles for the entire body of the page. It sets the background color to a pinkish shade (#e69ad9), sets the font family to cursive, and specifies a line height of 1.6. It also removes any margin and sets the text color to white.
The h1 selector styles the main heading of the page. It sets the font size to 36 pixels, makes it bold, centers the text, and adds top and bottom margins. The margin-top is set to 40 pixels and margin-bottom to 60 pixels.
The h1 span selector styles the span element within the heading. It sets the font size to 25 pixels.
The form selector styles the form element. It uses flexbox to center the form both horizontally and vertically within its container. It also adds a bottom margin of 60 pixels.
The #search-input selector styles the search input field. It sets the width to 60% with a maximum width of 400 pixels, adds padding, removes the border, and adds a box shadow effect. The font size is set to 18 pixels, and the text color is set to #333 (a dark gray).
The #search-button selector styles the search button. It sets the padding, background color, text color, border, font size, box shadow, and cursor. It also adds a border radius and a transition effect for the background color on hover.
The .search-results selector styles the container for the search results. It uses flexbox with the flex-wrap property set to wrap to create a responsive layout that wraps the search result items. The maximum width is set to 1200 pixels, and left and right margins are set to auto for centering. It also adds padding.
The .search-result selector styles each individual search result item. It sets the bottom margin, width to 30%, border radius, and box shadow. It also applies an overflow property to handle any content that exceeds the container's dimensions.
The .search-result:hover img selector styles the image inside a search result item on hover. It applies a scale transformation to make the image slightly larger, creating a zoom effect.
The .search-result img selector styles the images within the search result items. It sets the width to 100%, a fixed height of 200 pixels, and uses object-fit: cover to ensure the image fills the available space while preserving its aspect ratio. It also adds a transition effect for smooth scaling.
The .search-result a selector styles the links within the search result items. It adds padding, sets the display to block, and sets the color and text decoration. It also applies a transition effect for the background color on hover.
The .search-result:hover a selector styles the links within a search result item on hover. It adds a background color with slight transparency.
The #show-more-button selector styles the "Show more" button. It sets the background color, border, text color, padding, display, margin, text alignment, border radius, and cursor. It also applies a transition effect for the background color on hover. The button is initially set to display: none to hide it.
The #show-more-button:hover selector styles the "Show more" button on hover. It changes the background color to a darker shade of the original color.
The @media queries introduce responsive styles based on different

index.js:

const accessKey = "RZEIOVfPhS7vMLkFdd2TSKGFBS4o9_FmcV1Nje3FSjw";

const form = document.querySelector("form");
const searchInput = document.getElementById("search-input");
const searchResults = document.querySelector(".search-results");
const showMoreButton = document.getElementById("show-more-button");

let inputData = "";
let page = 1;

async function searchImages() {
  inputData = searchInput.value;
  const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}`;

const response = await fetch(url);
  const data = await response.json();
  if (page === 1) {
    searchResults.innerHTML = "";
  }

const results = data.results;
  results.map((result) => {
    const imageWrapper = document.createElement("div");
    imageWrapper.classList.add("search-result");
    const image = document.createElement("img");
    image.src = result.urls.small;
    image.alt = result.alt_description;
    const imageLink = document.createElement("a");
    imageLink.href = result.links.html;
    imageLink.target = "_blank";
    imageLink.textContent = result.alt_description;

imageWrapper.appendChild(image);
    imageWrapper.appendChild(imageLink);
    searchResults.appendChild(imageWrapper);
  });

page++;

if (page > 1) {
    showMoreButton.style.display = "block";
  }
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  page = 1;
  searchImages();
});

showMoreButton.addEventListener("click", () => {
  searchImages();
});

Here is the explaination:

The code starts by defining a constant variable accessKey that stores an API access key. This key is used to authenticate requests to the Unsplash API.
The code then selects various elements from the HTML document using document.querySelector and document.getElementById. These elements include the form, the search input field, the search results container, and the "Show more" button.
Two variables, inputData and page, are declared and initialized. inputData will store the user's search input, and page will keep track of the current page of search results.
The searchImages function is defined as an asynchronous function. It is responsible for performing the image search and displaying the results.
Inside the searchImages function, the user's input is obtained from the search input field (searchInput.value). Then, a URL is constructed using the Unsplash API endpoint, the current page, the user's input, and the API access key.
The fetch function is used to send a GET request to the constructed URL and retrieve the response. The response is then parsed as JSON using the response.json() method.
If page is equal to 1, indicating a fresh search, the searchResults container's content is cleared using searchResults.innerHTML = "".
The search results are extracted from the JSON response (data.results), and a map function is used to iterate over each result.
For each search result, a new div element with the class "search-result" is created (document.createElement("div")). Inside this wrapper, an img element and an a element are created using document.createElement.
The src attribute of the img element is set to the result.urls.small value from the API response, which represents the URL of the image. The alt attribute is set to the result.alt_description, which provides an alternative text for the image.
The href attribute of the a element is set to result.links.html, which is the URL to the Unsplash page of the image. The target attribute is set to "_blank" to open the link in a new tab. The textContent of the a element is set to result.alt_description, which will display a description of the image.
The img and a elements are appended as children to the imageWrapper element, and the imageWrapper is appended as a child to the searchResults container.
The page variable is incremented to prepare for the next page of search results.
If page is greater than 1, indicating there are more pages to load, the "Show more" button's display style is set to "block" to make it visible.
An event listener is added to the form element, listening for the "submit" event. When the form is submitted, the default form submission is prevented (event.preventDefault()), and the page variable is reset to 1. Then, the searchImages function is called to perform the search.
Another event listener is added to the "Show more" button. When the button is clicked, the searchImages function is called to load more search results.

FINAL WORDS:
To sum up, this code provides a basic implementation of an image search app using HTML, CSS, and JavaScript. It demonstrates how to fetch data from an API, handle user input, and dynamically update the UI based on the search results.

Thank you
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas

Code Explained: front.end24 Edition

Search This Blog

Comments

Post a Comment

Popular posts from this blog

Project name: Profile statistics

Anmie Pics Generator

snack zilla : a responsive design with a slider