|
|
|
|
# FlipImage
|
|
|
|
|
|
|
|
|
|
**Tier:** 1-Beginner
|
|
|
|
|
|
|
|
|
|
It's important for Web Developers to understand the basics of manipulating
|
|
|
|
|
images since rich web applications rely on images to add value to the user
|
|
|
|
|
interface and user experience (UI/UX).
|
|
|
|
|
|
|
|
|
|
FlipImage explores one aspect of image manipulation - image rotation. This
|
|
|
|
|
app displays a square pane containing a single image presented in a 2x2
|
|
|
|
|
matrix. Using a set of up, down, left, and right arrows adjacent to each
|
|
|
|
|
of the images the user may flip them vertically or horizontally.
|
|
|
|
|
|
|
|
|
|
You must only use native HTML, CSS, and Javascript to implement this app.
|
|
|
|
|
Image packages and libraries are not allowed.
|
|
|
|
|
|
|
|
|
|
## User Stories
|
|
|
|
|
|
|
|
|
|
- [ ] User can see a pane containing a single image repeated in a 2x2 matrix
|
|
|
|
|
- [ ] User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image
|
|
|
|
|
|
|
|
|
|
## Bonus features
|
|
|
|
|
|
|
|
|
|
- [ ] User can change the default image by entering the URL of a different image in an input field
|
|
|
|
|
- [ ] User can display the new image by clicking a 'Display' button next to the input field
|
|
|
|
|
- [ ] User can see an error message if the new images URL is not found
|
|
|
|
|
|
|
|
|
|
## Useful links and resources
|
|
|
|
|
|
|
|
|
|
- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp)
|
|
|
|
|
- [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip)
|
|
|
|
|
|
|
|
|
|
## Example projects
|
|
|
|
|
|
|
|
|
|
[Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv)
|
