100JSProjects
LearnProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./Learning guides./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS//Projects/Image Search App

Image Search AppHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
View Source CodeLive Demo
Image Search App project previewTry Live Demo
What you'll build

Image Search App

We will create an image search app that lets you search for any desired image. You can enter your search query and receive results accompanied by a description. The app is responsive and displays images in a single column on smaller ones. Using the Unsplash API, the app fetches up to 1000 unique and non-repetitive images. The modern CSS design ensures a fast and responsive user experience, making it enjoyable to search for cats, dogs, or any image.

HTML
— Structure
CSS
— Design
JavaScript
— Logic
Complete project files

Build It from the Source Code

Create these three files, copy the code into each one, then open index.html with Live Server.

Project structure
image-search-app/
├── index.html
├── style.css
└── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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</h1>
    <form>
      <input type="text" id="search-input" placeholder="Search for images..." />
      <button id="search-button">Search</button>
    </form>
    <div class="search-results">
      <!-- <div class="search-result">
        <img
          src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
          alt="image"
        />
        <a
          href="https://unsplash.com/photos/g-7X6T7vAI4"
          target="_blank"
          rel="noopener noreferrer"
          >an image of a beach</a
        >
      </div>
      <div class="search-result">
        <img
          src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
          alt="image"
        />
        <a
          href="https://unsplash.com/photos/g-7X6T7vAI4"
          target="_blank"
          rel="noopener noreferrer"
          >an image of a beach</a
        >
      </div>
      <div class="search-result">
        <img
          src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
          alt="image"
        />
        <a
          href="https://unsplash.com/photos/g-7X6T7vAI4"
          target="_blank"
          rel="noopener noreferrer"
          >an image of a beach</a
        >
      </div> -->
    </div>
    <button id="show-more-button">Show more</button>
    <script src="index.js"></script>
  </body>
</html>

JS// Related Projects

Keep Building with Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Weight Converter project preview
HTMLCSSJavaScript

Weight Converter

Let's create a weight converter project that converts pounds to kilograms. The webpage features an input field where users can enter a weight in pounds, and the webpage automatically displays the equivalent weight in kilograms. After 10 seconds, the result is removed, and the input field is emptied using the 'set time out' method. We've also incorporated an error handling feature to handle negative input numbers. If the user enters a negative number, the webpage displays an error message, "Please enter a valid number." We'll learn how to handle error situations and remove the error message after two seconds using an event listener for the input field. The event listener will call a function that performs the desired actions.

View project
Testimonial Slider project preview
HTMLCSSJavaScript

Testimonial Slider

In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.

View project
Rock Paper Scissors Game project preview
HTMLCSSJavaScript

Rock Paper Scissors Game

In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.

View project
{ }View All Projects