We are going to use what we've learned so far to create a basic slideshow using images taken from reddit via fetch.
Reddit sometimes contains some offensive images be careful with your search terms. If you want to ensure that you do not get NSFW (Not Safe For Work) items. You can filter it by adding "nsfw:no" to the end of the search query.
Example: http://www.reddit.com/search.json?q=cats+nsfw:no
- Fork and clone this repository
- Run
npm install
to install dependenciesnpm start
- start the BrowserSync servernpm run lint:css
- lint CSSnpm run lint:js
- lint JS
- Some sort of title
- A short description telling the user what to do
- A blank text field
- A Button ("start" or "go" or "search")
- The form / title / description should hide
- Show a loading message (optional)
- Fetch related posts from reddit
- Display animation / slideshow of images (jQuery)
- Show a button to stop / reset the animation
- Repeat animation until user clicks "stop"
- Animation stops / images are removed
- Form / title / description are shown again
- User can enter a new search term
It is important to break down any development project in to smaller pieces and tackle them one at a time. Here is a list of how you might want to attack this project.
- Create your form (HTML/CSS)
- Prevent default form submission and verify that you can type something into the form
- Use fetch to make a request. Show data in console
- Create an array of image URLs (tip: use filter to filter out results that don't have images).
- Make the form / title / description hide
- Cycle through images (tip: use setInterval)
- Create button to stop animation (tip: use clearInterval).
- Add some styling!
Use jQuery animation plugins jQuery Animation plugins like jCarousel, for example.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.