Flip Image App

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.

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
• User can see smooth animations when flipping images

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 image's URL is not found
• User can rotate the images in 90-degree increments
• User can reset all images to their original state
• User can apply multiple transformations simultaneously
• User can upload their own images from their device
• User can save the transformed image

What you'll learn:

• CSS transforms and animations
• Image manipulation with CSS
• Matrix operations for image transformations
• Event handling for interactive controls
• File input and image loading
• Error handling for image loading
• CSS transition and animation properties
• DOM manipulation for dynamic content