Sharing Top Content from the Angular-sphere.

Code Challenge #8: Build An Animated Image Search ― Scotch

  • In this week’s challenge, we shall be building an animated image search application.
  • This challenge was inspired by this awesome pen by David Khourshid Challenge – For this challenge, we are required to create a simple image search application with a special feature.
  • Notice how the search bar animates to the top of the screen to allow for the display of the images?
  • However, there are few requirements for the challenge to be completed, they are: – – – Utilize the provided API to fetch images from Pixabay.
  • Move the search bar to the top of the page once the images are loaded.

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 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:

Utilize the…

Code Challenge #8: Build An Animated Image Search ― Scotch