Flip-Image-App.md 1.4 KB
Newer Older
1 2
# FlipImage

3 4
**Tier:** 1-Beginner

5 6
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
F
Florin Pop 已提交
7
interface and user experience (UI/UX).
8 9

FlipImage explores one aspect of image manipulation - image rotation. This
F
Florin Pop 已提交
10
app displays a square pane containing a single image presented in a 2x2
11 12 13
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.

F
Florin Pop 已提交
14
You must only use native HTML, CSS, and Javascript to implement this app.
15 16 17 18
Image packages and libraries are not allowed.

## User Stories

F
Florin Pop 已提交
19
-   [ ] User can see a pane containing a single image repeated in a 2x2 matrix
F
Florin Pop 已提交
20
-   [ ] 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
21 22 23

## Bonus features

F
Florin Pop 已提交
24 25
-   [ ] 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
26 27 28 29
-   [ ] User can see an error message if the new images URL is not found

## Useful links and resources

F
Florin Pop 已提交
30 31
-   [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)
32 33 34 35

## Example projects

[Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv)