Made for Web App From Scratch @ cmda-minor-web 2020 - 2021
Always wanted to quickly search for a specific GIF? Gifinder is here! By simply typing a word of choice, you will get 24 GIFs that meet your requirements!
By clicking on one of the GIFs, you will see that GIF's title, posted time, original source and a link to view the GIF at Giphy.com
Gifinder can be viewed right here
I have also made a Wiki, where I kept a weekly log, explained some things about map, filter & reduce and made some JavaScript related annotations.
- Fetch & show the trending GIFs on load
- Fetch & show the user GIFs based on the value they haved typed into the input field
- Fetch & show the user the details of a GIF they clicked on
- Provide the user with feedback while the content is loading
- Provide the user with feedback when hovering over a GIF
This Web App has been designed and developed with the the Giphy API.
Giphy has the largest GIF library in the world and their API makes it possible to seamlessly integrate these GIFs into any application.
All information can also be found on the Giphy website
- Return a random GIF
- Show trending GIFs to users
- Let the user search for GIFs, using a word or phrase
- Convert what the user typed into the input field into the perfect GIF using their β¨special sauceβ¨ algorithm
- Autocomplete user input with a list of valid terms that completes what the user has typed into the input field
- Generate a unique ID to assign to each new user in an application
- Generate one or multiple GIFs by ID endpoint
- Provide users with a list of GIF categories
- Provide users with a list of the trending search terms
- Suggest searches to users
- Upload content programmatically on Giphy.com
I have implemented the following points into Gifinder:
Home page
- Show trending GIFs to users on load of the page
- Let the user search for GIFs, using a word or phrase
- Show the user the gifs they searched for using a word or phrase
Detail page
- Generate a GIF by ID endpoint
During the development of Gifinder, I worked with modules for the first time. In my previous 'projects', as far as we can even call it that, my whopping 3 to 100 lines of JavaScript would just live in the same document. I used such little JavaScript, that it wasn't necessary to split it up at all. Because I'm obviously using MUCH more JavaScript for Gifinder, modules are great to keep everything organized. My folder & files structure for Gifinder looks like this:
- Basically all code, except for my
index.html
, can be found inside this folder
- In here all my JavaScript code can be found
- In this folder, my folder with separate elements can be found, as well as my larger components, amde with those separate elements. In this folder my
index.js
file can also be found.
- Although this is a file and not a folder, it's definitely worth talking about. In this file I import all the separate elements made inside the
elements
folder. This way I can import these elements with way less code in my other files. An example can be found below.
// Messy, unnecessarily much code
import { elementOne } from "./file1.js";
import { elementTwo } from "./file2.js";
import { elementThree } from "./file3.js";
import { elementFour } from "./file4.js";
import { elementFive } from "./file5.js";
// Clean, easily understandable code
import {
elementOne
elementTwo
elementThree
elementFour
elementFive
} from './index.js'
- In this folder, my
config.js
files can be found. In this file I export variables, such as the url and key I need for my API.
- The
getData.js
file inside this folder does just what its name says: get the data. It fetches either the trending gifs on load, or fetches the gifs that the user has searched for using their input in to the input field. - The
reloadHome.js
file inside this folder reloads the content on the home page after a request has been made. It makes sure to delete the previously loaded content before shaowing the new content.
- The routes folder contains my
router.js
file, where all possible routes are handled by the router. Because I use routie as my router, there's also aroutie.min.js
file. This file is provided for by Routie, and does not contain self-written code.
- The views folder contains all the pages that are rendered after a request has been made. These two pages use the imports from the
index.js
file in order to build all the HTML from scratch.
- The states folder contains the loading state, which is shown during the loading of the gifs.
- This file is used to trigger the router and get Gifinder started.
Before we can get started, we'll need to clone this repo.
This can be done by typing the following line of code into your terminal:
git clone https://github.com/lisaoude/Gifinder
Next, we will have to install an http server.
Type the following line of code into your terminal:
npm install http-server
This can be done by typing the following line of code into your terminal:
http-server PATH-TO-DIRECTORY/Gifinder
Almost done! We just need to navigate to the localhost in the browser.
http://127.0.0.1:5500/
This repository is licensed as MIT by Β© Lisa Oude Elferink, 2021
We all know creative developing projects are never truly done.. These are some next steps that I would love to make:
- Make it possible for the user to save gifs, in the following ways:
- Save the gifs to a favorites list
- Save the gifs to a special collection, which the user can name themselves (e.g. funny gifs, cat gifs, etc.)
- Save the gifs to their device (download)
- Give Gifinder a random mode
- Returns a random GIF to the user after a button press
-
Autocomplete user input with a list of valid terms that completes what the user has typed into the input field
-
Provide users with a list of GIF categories
-
Provide users with a list of the trending search terms
-
Suggest searches to users
I have used the following resources while creating my Web App:
- Schepenaar, W. (2018, June 12). Server-side vs Client-side Routing - Wilbert Schepenaar, from Medium
- Blog, W. T. (2020). Understanding client side routing by implementing a router in Vanilla JS, from Will Taylor
- Routie | Javascript hash router. (2016), from Routie
- MDN. (2021, February 19). Using Fetch - Web APIs, from MDN
- MDN. (2021, February 19). Async await - Web APIs, from MDN
- Can I insert elements to the beginning of an element using .appendChild()? (2009, March 6), from Stack Overflow
- MDN. (2021, February 19). Node.appendChild() - Web APIs, from MDN
- MDN. (2021, February 19). Node.removeChild() Web APIs, from MDN
- Pure CSS Loader - Optimized Spinners for Web Β· Loading.io. (2020), from Loading.io
- Complete list of github markdown emoji's. (2016), from rxaviers
- MDN. (2021, February 19). setTimeout() - Web APIs, from MDN
- MDN. (2020, October 16). Array.prototype.map() - JavaScript, from MDN
- MDN. (2019, Match 23). Array.prototype.filter() - JavaScript, from MDN
- MDN. (2021, February 19). Array.prototype.reduce() - JavaScript, from MDN