Code Challenge #8: Build An Animated Image Search

Celý článek

Last time on the Code Challenge, we built out an Off Canvas sidebar using plain Vanilla JavaScript. Have a look at the solution here.

In this week's challenge, we shall be building an animated image search application. This simple application will have the ability to search for images and return a specified amount of images. We shall be making use of the Pixabay API to complete this challenge.

This challenge was inspired by this awesome pen by David Khourshid https://codepen.io/davidkpiano/pen/xPVJwm

The Challenge

For this challenge, we are required to create a simple image search application with a special feature. This feature requires the search bar to be at the center of the page and once a search query is submitted, the search bar moves to the top of the screen, with splendor, of course I mean it should be animated, lol. The final product should look like this.

Notice how the search bar animates to the top of the screen to allow for the display of the images? That's a key requirement of this challenge.

Requirement

This challenge can be completed using any tool or technology, either to develop the front-end interaction or to make the API call. However, there are few requirements for the challenge to be completed, they are:

1. Utilize the provided API to fetch images from Pixabay.
2. Move the search bar to the top of the page once the images are loaded.
3. Animate the movement of the search bar to the top of the screen.

Goals for this Challenge

• Understand and make API calls.
• Utilize simple animation properties in CSS.
• Understand DOM traversing and manipulation

Bonus

These images once fetched are displayed in a collage, however, as a bonus, try to display a single image once clicked, either as a modal, popup or new page, however you like it!

Resources

A base codepen has been provided as a starting point for completing this challenge.The base code consists of HTML and CSS with the Sass variant. Also, Bulma classes were employed to style the app.

Fork this base codepen as your starting point.

Community

To receive a review of your challenges please put them out through the following methods:

• Post your submission on Twitter using the hashtag #scotchchallenge
• Interact with others completing the challenge via the Slack Group in the #codechallenge channel.
• Post your solutions in the comment section of this post.

Also, feel free to leave your feedback, reviews and comments in the comment section of this post.

Solution

The solution to this challenge will be released on Tuesday. Happy coding!