Code Challenge #8: Build An Animated Image Search

Code Challenge #8: Build An Animated Image Search

  • 2018-04-16 08:46 AM
  • 106

Code Challenge #8: Build An Animated Image Search

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

Table of Contents

Table of Contents

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.

Table of Contents

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:

Table of Contents

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

Table of Contents

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!

Table of Contents

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.Related Course: Getting Started with JavaScript for Web Development

Table of Contents

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

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

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

Table of Contents

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

Learn to Code Online

Complete Java Masterclass

Complete Python Bootcamp: Go from zero to hero in Python 3

Angular 5 (formerly Angular 2) - The Complete Guide

The Complete JavaScript Course 2018: Build Real Projects!

Become a JavaScript developer - Learn (React, Node,Angular)

The Complete Node.js Developer Course (2nd Edition)

The Complete React Web Developer Course (2nd Edition)

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Build Responsive Real World Websites with HTML5 and CSS3

PHP for Beginners - Become a PHP Master - CMS Project

Suggest