Skip to content
This repository has been archived by the owner on May 4, 2023. It is now read-only.

Latest commit

 

History

History

flipimage

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

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.

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

Example projects

Image Effects by @bennettfeely