Giphy Searcher in Elm


Project Brief

Inspired by 5 Projects To Complete When Starting to Learn Front-End Web Development

Once you have the hang of DOM manipulation and working with vanilla JavaScript or jQuery, I recommend you start learning to template data and show it on the DOM. My horribly designed Giphy web app. You can do better, or use a CSS framework. An excellent beginning application to build is a basic re-creation of the the giphy website, using the giphy api itself. I recommend their API for beginners because there is no need to request any kind of API key, and you won’t have to worry about much configuration when trying to request data.

Using their API you are able to build a small web app which does the following; displays trending gifs on app load shown in a column/grid has an input which allows you to search for specific gifs at the bottom of the results, there is a ‘load more’ button, which gets more gifs using that search term.

You’ll hit a lot of new challenges in this project, one of which will be working with asynchronous requests. You can choose to use vanilla JavaScript for this challenge, or if you’re more comfortable with jQuery use the it’s ajax method. The goal is to begin working with asynchronous code.


  • Responsive Design using CSS Grid
  • Calling a different API endpoint for trending and search
  • Adding validation to prevent a blank search
  • Hooking up the Load More button to only display when needed


  • Learnt about Json decoders to get the correct API shape
  • Used withOptions on a form to preventDefault and stopPropagation when submitting