Welcome to my Giphy homework assignment!
This was created in HTML with CSS
styling with the addition of Bootstrap as well as Javascript, Jquery and Ajax.
This was our first time working with Ajax. It was great to see what we could do with Api.
Overview
PLEASE NOTE: There is no installation or update required to view this file.
In this project you will be be checking out some great anime movie giphys. You will have the ability to add new movies as well as click on each image to start and stop the Giphy from playing. You are not limited to Anime; you can also add any movie you might be interested in checking out.Instructions
Before you can make any part of our site work, you need to create an array of strings, each one related to a topic that interests you. Save it to a variable called topics.
We chose animals for our theme, but you can make a list to your own liking.
Your app should take the topics in this array and create buttons in your HTML.
Try using a loop that appends a button for each string in the array.
When the user clicks on a button, the page should grab 10 static, non-animated gif images from the GIPHY API and place them on the page.
When the user clicks one of the still GIPHY images, the gif should animate. If the user clicks the gif again, it should stop playing.
Under every gif, display its rating (PG, G, so on).
This data is provided by the GIPHY API.
Only once you get images displaying with button presses should you move on to the next step.
Add a form to your page takes the value from a user input box and adds it into your topics array. Then make a function call that takes each topic in the array remakes the buttons on the page.
Deploy your assignment to Github Pages.
Rejoice! You just made something really cool.
--------------------END----------------------------- HTML 5
- CSS
- Bootstrap
- Javascript
- Jquery
- AjaxI am excited to expand my knowledge of this tool and how Api functions so I can build out some of the ideas in my head.
Link to Project
https://github.com/OCGedeon/giphyWesite.git