lisaoude / gifinder

Gifinder: a web app which makes searching for gifs easy, using the Giphy API.

Gifinder

Made for Web App From Scratch @ cmda-minor-web 2020 - 2021

✏️ App description

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.

📌 Table of Contents

• What does this Web App do?
• API
• Diagrams
• Folders & Files
• Install
• License
• Next Steps
• Resources

💎 What does this Web App do?

• 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

🔗 API

❓ Which API did I use?

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.

👀 What can you do with this API?

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

🙋 What did I do with this API?

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

📈 Diagrams

Actor Diagram

Interaction Diagram

📂 Folders & files

Folder structure

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:

Explanation folder structure

Assets

• Basically all code, except for my index.html, can be found inside this folder

Scripts

• In here all my JavaScript code can be found

Components

• 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.

Index.js

• 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.

Example

// 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'

Config

• 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.

Modules

• 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.

Routes

• 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 a routie.min.js file. This file is provided for by Routie, and does not contain self-written code.

Views

• 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.

States

• The states folder contains the loading state, which is shown during the loading of the gifs.

Main.js

• This file is used to trigger the router and get Gifinder started.

📥 Install

1. 👯 Cone this repo

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

2. 💻 Install an http server

Next, we will have to install an http server.
Type the following line of code into your terminal:

npm install http-server

3. 🏃 Run the app with our http server

This can be done by typing the following line of code into your terminal:

http-server PATH-TO-DIRECTORY/Gifinder

4. 🌐 Open browser and navigate to localhost

Almost done! We just need to navigate to the localhost in the browser.

http://127.0.0.1:5500/

🔐 License

This repository is licensed as MIT by © Lisa Oude Elferink, 2021

🔭 Next Steps

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

📚 Resources

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

gifinder's Issues

General Tip🤓🤓🤓🤓

🤓

If you're new to js, some function variables and parameters may be unfamiliar to you.

For example

function (e)

means:

function (event)

fetch(url).then(res)

means:

fetch(url).then(response)

No need to convert nodelist to array

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/js/modules/components/gifs.js#L14

the nodelist has its own forEach() method

peer review week 1

Algemeen

Nog geen app beschrijving in de readme, overall structuur is netjes en de github pages link werkt. 👍🏻
Je zou nog even kunnen kijken naar het geven van een beschrijving van een commit. Op die manier kan je makkelijk zien wat er in die commit allemaal veranderd is, als je alleen werkt niet super relevant maar heel handig in een team

HTML

HTML is semantisch correct, je zou eventueel je gifContainer in een section veranderen.

CSS

Er is nog geen duidelijk ontwerp maar de CSS die er is ziet er netjes uit

JS

Opbouw is logisch, er staan geen comments in wat kan helpen met het begrijpen van de code voor jou en andere. Verder erg netjes

Peer Review - Sanne 12 feb

Algemeen/repo

• Read me goede manier om alles bij te houden! handig dat je een to do list voor jezelf hebt gemaakt.
• Api/concept is beschreven en de link naar de live demo staat er ook! :)
• Je mist alleen nog een description bij de repo waar ook je link staat zeg maar.
• Voor volgende keer: include actor en interaction diagram :)
• Live demo werkt, ik verwachtte precies wat ik dacht.

Code

• const init (in main.js) ik snap zelf de benaming init niet 😬, misschien dat je dat search noemt? dan wordt het iets duidelijker.
• Verder ziet je code er netjes uit, ik snap wat er gebeurt! 😊
• De actors zijn helder, main.js (zoeken naar specifieke gif), fetchData (haalt de data uit Api), printGifs (rendert data in html), die nu worden geïmporteerd naar main.
• Als tip misschien bovenin elke script bestand in module nog een comment aangeven wat er binnen dat script gebeurd. Handig voor jezelf voor later 😄
• Code is consistent overal zelfde methode!

General tip

If you're new to js, some function variables and parameters may be unfamiliar to you.

For example

function (e)

means:

function (event)

fetch(url).then(res)

means:

fetch(url).then(response)

Sometimes its easier to write things out in the beginning so that you become familiar with these names and afterwards use the shorthand

Why render giphy in iframe?

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/js/modules/components/gifs.js#L3

Feedback 12 feb Lotte

Goede read me, alles staat er in. Als je in elements.js een functie maakt om je const's heen, dan hoef je alleen die functie te exporteren en niet al die variabelen. Zo heb ik t gedaan iig. Je fetchDtata.js ziet er goed uit. Goed dat je je link zo hebt opgesplitst in key, limit etc. Op je live demo werkt je zoek button maar een keer en je kan niet terug, dus miss een terug knop of een manier vinden om die zoek knop dan ook weer te laten werken. En als je nu naar je website gaat staat er geen content totdat je zoekt. Miss een meest populaire gifs lijst als 'home page'.

Keep variable writing style consistent🤓🤓🤓

In your code you have:

const gifContainer = document.querySelector('.gifContainer')
const input = document.querySelector('.gifType')
const form = document.querySelector('.gifForm')

and

    const
        endpoint = 'https://api.giphy.com/v1/gifs/search?q=',
        key = 'JzbS3qH49ykiVKnHZx0z5M0gjNPVMbh3',
        limit = 20,
        url = `${endpoint}${inputValue}&api_key=${key}&limit=${limit}`

Try to keep your code consistent by using one of the two styles, so with writing all the consts/lets/vars or one var and then ,

Use a form element instead of a section

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/index.html#L23-L26

You gets submit functionality out of the box (which also works with the keaboard)

Replace camel-case classes with right code convention🤓🤓🤓🤓

Every code has their own conventions, that of classes and id's in html is that you write you them like this:

<section class="gif-type">

Peer review - Live Demo

It works!
The concept is pretty simple. You could definitely spice up your styling with some css!

Peer review - Code

Feedback

• No idea if your code is structured according to your diagrams as they are not yet in your readme. 😞
• It is better to put your script tag in your body at the bottom. Because you give the reason that you have to wait for the html elements. But you load your html elements with JavaScript. 😄
• In your main.js you have a comment: 'this function shows the trending gifs'. But I think the 'start' function does not specifically show the trending gifs but rather invokes your router. 😉
• You now have an index.js file within your modules views folder that you don't use. I think you can remove these. 😄
• Do you only have 1 component called gifs.js?
• Are your views, config and components just modules?
• I wonder if you understand all your code correctly yourself... 🤯

To Solve This Issue:

• Add script tag to bottom of body tag in HTML.
• Add comments that make sense for your code.
• Remove your index.js file within your modules views folder.
• Try to take a look at what modules are, what components are and how your code actually works.

Peer review - repo

• Link to demo
• The description is a bit short on the concept
• The used api is not described in the readme
• Place an image of the actor and interaction diagrams in the readme

So usually what shouldn't be in a repo is your weekly log and the process of making your app. The readme must contain the following:

• Description of Concept
• If there is an API, description of API
• Actor and interaction diagram (this assignment)
• If you need to install this project, an installation guide i.e. npm install etc.
• Acknowledgments (shoutouts to the people who helped you make this)

The rest of your documentation should be placed inside a wiki

Implement a router and routes to detail pages

Linking to external detailpages is cheating ;-)

Modules are deferred by default, no need to load the script before the closing body tag

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/index.html#L30

Load script from head instead

Peer review - Live Demo

Feedback

• There is no Actor Diagram and Interaction Diagram available yet so I have no idea if it matches your code. 😞
• Based on your explanation in your README, it is clear what I could expect with your live demo. ✅
• I myself would have made the application a bit more exciting. But maybe you can still do this (even if it's small things) and maybe still focus on the styling? I know that you are good with styling and CSS ! 👍 👍

To Solve This Issue:

• Make your site a bit more exciting (styling / general concept).

Don't push console.log to origin

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/js/modules/data/fetch.js#L5

It might be better to use the more versatile devtools debugger anyway?
https://javascript.info/debugging-chrome

The good stuff

🤓🤓🤓🤓🤓🤓
Code is pretty clean, there are some small inconsistencies but overall really nice
🤓🤓🤓🤓🤓🤓

🤓🤓🤓🤓🤓🤓
HTML is semantic!
🤓🤓🤓🤓🤓🤓

🤓🤓🤓🤓🤓🤓
You rewrote your readme!
🤓🤓🤓🤓🤓🤓

Why use a let here?

https://github.com/lisaoude/web-app-from-scratch-2021/blob/221021ee2f54d108538b6d42a765bc8d44aa909a/js/main.js#L11

Try to be consitent in chosing for const or let

Peer review - Code

• Complete actor diagram is missing
• Interaction diagram is missing

Code quality

• For someone who is new to coding, your code looks very clean, I'm impressed🤓👍
• Code is written the same way in different places
• Code follows naming conventions

Peer review - Repository

Feedback

• There is a link at the top right to the live demo. ✅
• You have described your concept (being able to search for gifs). ✅ Maybe if you have the time and desire you can expand this concept a bit so that it becomes a bit more exciting (a button to save gifs for example). 😄
• The API is described in the README file, but maybe you can tell a bit more about it. Consider, for example: How did you use the API to load the GIFs, how did you use the API so that the user can search for the GIFs, etc.
• The actor & interaction diagram is not yet available. 😞

General tips:

• Try to say in your README file how people can download / use your repo. Maybe you have used a package that makes downloading your repo only not work on someone else's computer. 😄
• Maybe you can show in your README file which sources you have used. 😃
• When making commits, try to describe briefly and clearly what you have changed for yourself. I also see commits with 'IT WORKS' 'Changed many many many things'. This makes it difficult for you to review your work later. 😸

To Solve This Issue:

• Describe a little more how you use your API.
• Add the Actor Diagram to your README file.
• Add the Interaction Diagram to your README file.
• Add resources to your README.
• Describe how someone else can download your repo.