Merge pull request #10 from florinpop17/feature/flip-image-app

Feature: Add Flip Image App specification

Projects/Flip-Image-App.md

@@ -0,0 +1,36 @@
+# FlipImage
+
+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
+
+- [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)
+
+## Example projects
+
+[Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv)

README.md

@@ -27,6 +27,7 @@ Each project has the following **features**:
 | ------------------------------------------------------------------ |
 | [Book Finder App](./Projects/Book-Finder-App.md)                   |
 | [Christmas Lights](./Projects/Christmas-Lights-App.md)             |
+| [Flip Image](./Projects/Flip-image-App.md)                         |
 | [Kudos Slackbot](./Projects/Kudos-Slackbot.md)                     |
 | [Markdown Previewer](./Projects/Markdown-Previewer.md)             |
 | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) |