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

FlipImage explores one aspect of image manipulation - image rotation. This
Florin Pop 已提交
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.

Florin Pop 已提交
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

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

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

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)