From 0be39f96530b54e99960a81c2d4b60c20ab73e8c Mon Sep 17 00:00:00 2001
From: jdmedlock <jdmedlock@gmail.com>
Date: Tue, 12 Mar 2019 19:39:24 -0500
Subject: [PATCH 1/2] Feature: Add Cause Effect app specification

Add Cause Effect app specification

Resolves: N/a
See also: N/a
---
 Projects/Cause-Effect-App.md | 44 ++++++++++++++++++++++++++++++++++++
 README.md                    |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 Projects/Cause-Effect-App.md

diff --git a/Projects/Cause-Effect-App.md b/Projects/Cause-Effect-App.md
new file mode 100644
index 00000000..32755fbc
--- /dev/null
+++ b/Projects/Cause-Effect-App.md
@@ -0,0 +1,44 @@
+# CauseEffect
+
+Patterns are integral to software engineering and represent potentially
+reusable components in program logic. However, patterns aren't used only
+for program logic, they are exist in other domains such as DevOps, user
+support, and the user interface.
+
+A common user interface pattern is to summarize data in one section of a page 
+that consists of some type of list (like text, images, or icons) that describes
+or categorizes a set of data. When a list item is clicked, the detailed data
+behind it is displayed in an adjacent pane on the page. 
+
+For example, on a real estate site clicking an address in a list of properties
+for sale displays the details about the property in another part of the 
+page.
+
+## User Stories
+
+-   [ ] User can see a list of person names arranged vertically in a summary
+pane on the page.
+-   [ ] User can click on a name in the list to update an adjacent pane on the
+page with that individuals full name, address, telephone number, and 
+birthday.
+-   [ ] User can click on another name in the list to refresh the detail pane
+with that individuals information.
+
+## Bonus features
+
+-   [ ] User can see the person name in the summary pane highlighted when the
+cursor is hovered over it.
+-   [ ] User can see the person name in the summary pane highlighted
+using a selection effect (color, size, etc.) when it is clicked. This is a
+different effect from the hover effect
+-   [ ] User can see the selection effect removed from a name in the summary
+list when a new name is clicked.
+
+## Useful links and resources
+
+[DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+## Example projects
+
+Checkout the interaction between the Navigation items on the left hand side
+of the page and the main body of the page on the [Javascript MDN site](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
diff --git a/README.md b/README.md
index 21a4570d..99c35085 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ Each project has the following **features**:
 | ------------------------------------------------------------------ |
 | [Bin2Dec](./Projects/Bin2Dec-App.md)                               |
 | [Book Finder App](./Projects/Book-Finder-App.md)                   |
+| [Cause Effect App](./Projects/Cause-Effect-App.md)                 |
 | [Christmas Lights](./Projects/Christmas-Lights-App.md)             |
 | [Color Cycle](./Projects/Color-Cycle-App.md)                       |
 | [Flip Image](./Projects/Flip-Image-App.md)                         |

From afe86294ec683f565866d97306d215ae2db5ebfb Mon Sep 17 00:00:00 2001
From: jdmedlock <jdmedlock@gmail.com>
Date: Wed, 13 Mar 2019 19:59:35 -0500
Subject: [PATCH 2/2] Refactor: Add constraints and test data format

Add constraints and test data format

Resolves: N/a
See also: N/a
---
 Projects/Cause-Effect-App.md | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/Projects/Cause-Effect-App.md b/Projects/Cause-Effect-App.md
index 32755fbc..b237e79d 100644
--- a/Projects/Cause-Effect-App.md
+++ b/Projects/Cause-Effect-App.md
@@ -14,6 +14,15 @@ For example, on a real estate site clicking an address in a list of properties
 for sale displays the details about the property in another part of the 
 page.
 
+This challenge requires that the developer implementing it follow these
+constraints:
+
+- You are responsible for creating your own test data. Use a hardcoded 
+Javascript object to define your test data (see below).
+- Use only native HTML/CSS/Javascript in your first version of this app
+- You may use other packages or libraries when implementing subsequent 
+versions.
+
 ## User Stories
 
 -   [ ] User can see a list of person names arranged vertically in a summary
@@ -36,7 +45,18 @@ list when a new name is clicked.
 
 ## Useful links and resources
 
-[DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+- Consider defining your test data in a JavaScript object having a format
+such as this:
+```
+const people = [
+  {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."},
+  .
+  .
+  .
+  {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."}
+];
+```
 
 ## Example projects