FlipImage
- HTML
- CSS
- JS
Difficulty:Easy
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
Example projects
More Challenges
- HTML
- CSS
- JS
Difficulty:Easy
Convert binary numbers (up to 8 digits) to decimal effortlessly, providing validation and insights into binary arithmetic concepts.
- HTML
- CSS
- JS
Difficulty:Easy
Create a functional calculator for basic arithmetic with a user-friendly interface, supporting clear operations and error handling.
- HTML
- CSS
- JS
Difficulty:Easy
Tool to view, customize and copy CSS border-radius properties, creating simple or complex shapes easily.