You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.4 KiB
37 lines
1.4 KiB
6 years ago
|
# FlipImage
|
||
|
|
|
||
|
|
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)
|