Build Ask-A-Gif: An app that can answer your questions using VueJS and Giphy

Published in

Hackmamba

5 min readApr 23, 2018

In this tutorial we are going to build a fun project that answers any yes or no question with a gif. Here’s what the finished product looks like!

Getting started

With this tutorial we will be using webpack to build and run single file components. To get started make sure that you have vue-cli installed.

npm i -g vue-cli

Once vue-cli is installed we create a new project using the webpack build template shipped with the Vue CLI. In the command line, run:

vue init webpack ask-a-gif

Answer all the prompted questions. We wont need vue-router for this project.

Setting up our component

To keep it simple we will be building everything in one component. Navigate to /src/App.vue file. Currently the boilerplate code is contained here.

The file is broken down into three different parts. The template, the script and the style section. This way we have everything we need all in one file.

Let’s first update the template section. We just need a simple form for our question and then a section for our gif to appear. You can replace the template code with the code below:

<template>
  <div>
    <form>
      <input placeholder="What is your question?" />
    </form>
    <div class="gif-container">
    </div>
  </div>
</template>

Next we can update our style section. This will include all the css we need for this tutorial.

<style>
body {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:#18181E;
  color:white;
  padding:60px;
}

input{
  font-size:60px;
  font-family: inherit;
  background:none;
  border:none;
  outline:none;
  color:white;
  width:100%;
}

.gif-container img{
  margin-top:30px;
  min-width:600px;
}
</style>

Here’s what our app looks like so far.

Adding our data

The last part of our setup is to add our gif data. When a user submits a question we want to choose a random gif and display it to the user. The gifs will answer a yes or no question so we will need:

5 “yes” gifs like this one:

5 “no” gifs like this one:

To store the gifs we will create an array and store it in the components state. To do this lets create an array in the script tag.

<script>
let gifs = [
  "https://media1.giphy.com/media/GCvktC0KFy9l6/giphy.gif",
  "https://media2.giphy.com/media/3ohhwAaoGzLRGM6jqo/giphy.gif",
  "https://media0.giphy.com/media/xT9IgrStO9Vdk3odgY/giphy.gif",
  "https://media3.giphy.com/media/HFHovXXltzS7u/giphy.gif",
  "https://media2.giphy.com/media/r1fDuPIcs18d2/giphy.gif",
  "https://media3.giphy.com/media/12XMGIWtrHBl5e/giphy.gif",
  "https://media0.giphy.com/media/1zSz5MVw4zKg0/giphy.gif",
  "https://media2.giphy.com/media/5xtDarC0XyqmUhD5eDK/giphy.gif",
  "https://media0.giphy.com/media/T5QOxf0IRjzYQ/giphy.gif",
  "https://media3.giphy.com/media/tCYMesnacJ6cE/giphy.gif"
]
export default {
  name: 'App',
}
</script>

We need to bind our gif array to the components state to do that we will use the data() function in our component.

export default {
  name: 'App',
  data(){
    return {
      gifs,
      activeGif: null
    }
  }
}

Now that we have our gifs we can start submitting questions!

Hooking up the question form

Let’s hook up our question form. The question really wont matter. We just want to show a random gif when the form is submitted. To do that we can add a @submit tag to the form.

<form @submit="sendQuestion">
  <input placeholder="What is your question?" />
</form>

Next we can create our function sendQuestion in our script tag to grab our random gif. We will get a random number between 0 and 9 to act as our index. Once we have the index we will set our activeGif variable to the gif at that location.

methods: {
    sendQuestion(e){
      e.preventDefault();
      let index = Math.floor(Math.random() * 10) + 0;
      this.activeGif = this.gifs[index];
    }
}

Displaying our Gif

Let’s display our activeGif variable. To do that we can create an image tag inside of our div named gif-container. We will use the :src property to bind the image tag to our state variable.

<div class="gif-container">
   <img :src="activeGif" />
</div>

Now let’s refresh the page and ask a yes or no question!

Resetting our app

Awesome now you can ask a question and your app answers you! But the gif stays on the screen as you type your next question we want to reset our active gif when the question changes. To do that we can use the @input property. Let’s add it to our input tag.

<input @input="resetActiveGif" placeholder="What is your question?" />

And then let’s add our method below. This will just set activeGif to null.

resetActiveGif(){
  this.activeGif = null
}

Let’s refresh the page and take a look at what we just did!

Thanks for reading!

If you got this far, thanks for reading this article! Feel free to mess around with the code and make it your own. Add your own gifs, change the styling and add more functionality.

If you have any questions or a tutorial you would like to see feel free to reach out to me here on Medium or my Instagram and Twitter accounts!