From 45bd6fc963b2baaca1e1ce86f4ecd8b07fa25164 Mon Sep 17 00:00:00 2001
From: jdmedlock <jdmedlock@gmail.com>
Date: Thu, 7 Mar 2019 07:28:27 -0600
Subject: [PATCH] Feature: Add Flip Image App specification

Add Flip Image App specification

Resolves: N/a
See also: N/a
---
 Projects/Flip-Image-App.md | 36 ++++++++++++++++++++++++++++++++++++
 README.md                  |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 Projects/Flip-Image-App.md

diff --git a/Projects/Flip-Image-App.md b/Projects/Flip-Image-App.md
new file mode 100644
index 00000000..93189e3b
--- /dev/null
+++ b/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)
diff --git a/README.md b/README.md
index c3e0adc0..15e04ca1 100644
--- a/README.md
+++ b/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) |