Make a website which allows the user to navigate a set of images (first manually, then with an auto-playing slideshow).
Make forward and back buttons to move manually in that direction through a list of at least 4 images.
(e.g. When the user presses forward once, the display should move ONCE to the next image.)
You can use any images.
You can store the images within your app or you can use links to images hosted elsewhere ("hotlinking").
Unsplash is a good source of images for this challenge.
Level 1 challenge screenshot example.
Make auto-forward and auto-back buttons to automatically move in that direction through the list of images.
Here's a screenshot example from a completed level 2 challenge.
If you want a harder challenge, don't read the rest of this document but instead try to build the app by yourself.
If you want hints, then you will find some below.
Here's one approach you might take to building this app.
Design your layout on paper. Keep it very simple - this is a JavaScript challenge, not a CSS challenge.
Use a layout that will be ok on a phone (but don't spend time on responsive design).
Keep this drawing around for reference later.
Convert the drawing to HTML (on codepen or elsewhere) and check the buttons appear correctly.
DON'T add any CSS or extra markup to make it look good just now. That will only make it more difficult for you to think about your app during development.
Make your buttons work to navigate forwards and backwards, manually.
Add the following buttons:
- auto-forward
- stop
- auto-backwards
These should allow automatic navigation through the images, say every 5 seconds.
Congratulations, you've finished the basics!
- Make sure you can access it and play with it on a smartphone!
- Celebrate!
Add UI so that the user can specify how long to wait between images.
Now is a good time to make it look good with CSS, colour, typography, images, and creativity. Maybe you could ask someone to collaborate with you on those aspects.