From a8bb387487ece62a572f68b9fdbfbd32e19d3aa2 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sat, 16 Jun 2018 22:10:47 -0700
Subject: [PATCH 01/13] Card component is working with default props, and
 rendering appropriately on the board.

---
 src/App.js              |  9 ++++++++-
 src/components/Board.js | 10 ++++++++--
 src/components/Card.js  | 37 +++++++++++++++++++++++++++++++++++--
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index c4854e15..036a87da 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
 import './App.css';
+import Card from './components/Card';
 import Board from './components/Board';
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
   render() {
     return (
       <section>
@@ -11,8 +17,9 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`Lasiorhine`}
           />
+
       </section>
     );
   }
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..928388bd 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -12,14 +12,20 @@ class Board extends Component {
     super();
 
     this.state = {
-      cards: [],
+      cards: [
+        <Card />,
+        <Card />,
+        <Card />,
+      ],
     };
   }
 
+
+
   render() {
     return (
       <div>
-        Board
+        {this.state.cards}
       </div>
     )
   }
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..ba1b1b53 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,17 +5,50 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      cardText: "INSPIRATION! THAT'S WHAT THIS IS!",
+      cardEmoji: emoji.getUnicode('heart')
+    }
+  }
+
+  tick() {
+   this.setState({count: this.state.count + 1});
+ }
+
+  addCardEmoji = (emoji) => {
+    if (this.props.emojiDesc){
+      this.setState(
+        {
+          cardEmoji: emoji.getUnicode(this.props.emojiDesc)
+        }
+      );
+    }
+  }
+
   render() {
     return (
       <div className="card">
-        Card
+        <div className="card_content" >
+          <div className="card_content-text" >
+            <p>{this.state.cardText}</p>
+            <p> WHATEVER </p>
+          </div>
+          <div className="card_content-emoji" >
+            {emoji.getUnicode('grimacing')}
+            <p>{this.state.cardEmoji}</p>
+          </div>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  cardText: PropTypes.string.isRequired,
+  emojiDesc: PropTypes.string,
 };
 
 export default Card;

From 61f6ae496ec10ebeff565ab1ac968c5d984956ef Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sat, 16 Jun 2018 23:13:04 -0700
Subject: [PATCH 02/13] Conditional rendering for emojis now is working.

---
 README.md               | 40 ++++++++++++++++++++++++++++++++++++++++
 src/components/Board.js | 38 ++++++++++++++++++++++++++++++++------
 src/components/Card.js  | 33 ++++++++++-----------------------
 3 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 1ef9a904..d03ae082 100644
--- a/README.md
+++ b/README.md
@@ -75,3 +75,43 @@ Possible optional enhancements include:
 
 ## What we're looking for
 You can see what your instructors are looking for [here](./feedback.md)
+
+
+#### CODE PARKING LOT:
+
+render() {
+  return (
+    <div className="card">
+      <div className="card_content" >
+        <div className="card_content-text" >
+          <p>{this.props.cardText}</p>
+        </div>
+        <div className="card_content-emoji" >
+          {this.addCardEmoji}
+        </div>
+      </div>
+    </div>
+  )
+}
+}
+
+
+
+constructor(props) {
+  super(props);
+
+  this.state = {
+     cardText: this.props.cardText,
+  }
+}
+
+
+addCardEmoji = (emoji) => {
+  if (this.props.emojiDesc){
+    this.setState(
+      {
+        cardEmoji: emoji.getUnicode(this.props.emojiDesc)
+      }
+    );
+  }
+}
diff --git a/src/components/Board.js b/src/components/Board.js
index 928388bd..aa3965a7 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import emoji from 'emoji-dictionary';
 import axios from 'axios';
-
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
@@ -13,19 +13,45 @@ class Board extends Component {
 
     this.state = {
       cards: [
-        <Card />,
-        <Card />,
-        <Card />,
+        {
+          inspoText: 'Be Here Now.',
+
+        },
+        {
+          inspoText: 'Ok, now be somewhere else',
+
+        },
+        {
+          inspoText: 'Being present in the present is the greatest present you can give yourself',
+          inspoEmoji: 'gift',
+        },
       ],
     };
   }
 
 
-
   render() {
+
+    console.log("In render function, this is the current set of cards, before converting to card components:");
+
+    console.log(this.state.cards);
+
+    const cardComponents = this.state.cards.map((card, index) => {
+      return (
+        <li key={ index }>
+          <Card
+             cardText={card.inspoText}
+             cardEmoji={card.inspoEmoji}
+          />
+        </li>
+      );
+    });
+
     return (
       <div>
-        {this.state.cards}
+        <ul>
+          {cardComponents}
+        </ul>
       </div>
     )
   }
diff --git a/src/components/Card.js b/src/components/Card.js
index ba1b1b53..91333711 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -8,37 +8,24 @@ class Card extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      cardText: "INSPIRATION! THAT'S WHAT THIS IS!",
-      cardEmoji: emoji.getUnicode('heart')
-    }
-  }
-
-  tick() {
-   this.setState({count: this.state.count + 1});
- }
-
-  addCardEmoji = (emoji) => {
-    if (this.props.emojiDesc){
-      this.setState(
-        {
-          cardEmoji: emoji.getUnicode(this.props.emojiDesc)
-        }
-      );
-    }
   }
 
   render() {
+
+    const hasEmoji = this.props.cardEmoji;
+    let displayEmoji;
+    if (hasEmoji) {
+      displayEmoji = emoji.getUnicode(this.props.cardEmoji)
+    } else { displayEmoji = "" }
+
     return (
       <div className="card">
         <div className="card_content" >
           <div className="card_content-text" >
-            <p>{this.state.cardText}</p>
-            <p> WHATEVER </p>
+            <p>{this.props.cardText}</p>
           </div>
           <div className="card_content-emoji" >
-            {emoji.getUnicode('grimacing')}
-            <p>{this.state.cardEmoji}</p>
+            <p>{displayEmoji}</p>
           </div>
         </div>
       </div>
@@ -48,7 +35,7 @@ class Card extends Component {
 
 Card.propTypes = {
   cardText: PropTypes.string.isRequired,
-  emojiDesc: PropTypes.string,
+  cardEmoji: PropTypes.string,
 };
 
 export default Card;

From 7aac8568b849fbec289101c000d52fd129c3c707 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 02:40:08 -0700
Subject: [PATCH 03/13] Pulling down cards from the API and displaying them
 nicely.

---
 README.md               | 73 +++++++++++++++++++++++++++++++++++++++++
 src/components/Board.js | 67 ++++++++++++++++++++++---------------
 src/components/Card.js  |  9 +++--
 3 files changed, 118 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index d03ae082..67627304 100644
--- a/README.md
+++ b/README.md
@@ -115,3 +115,76 @@ addCardEmoji = (emoji) => {
     );
   }
 }
+
+
+componentDidMount() {
+  axios.get(`https://jsonplaceholder.typicode.com/users`)
+    .then(res => {
+      const persons = res.data;
+      this.setState({ persons });
+    })
+}
+
+const cardComponents = Object.keys(this.state.cards).map(card =>
+  ({
+    cardId: card["id"],
+    cardText: card["text"],
+    cardEmoji: card["emoji"],
+  })
+)
+
+
+
+render() {
+   return (
+       <div>
+           {Object.keys(this.state.dataGoal.milestones).map((milestone) =>{
+                 return {this.state.dataGoal.milestones[milestone].tasks.map((task, idx)=>{
+         return (
+                //whatever you wish to do with the task item
+          )
+})
+           })}
+
+       </div>
+   )
+}
+
+const cardComponents = this.state.cards.map((card, index) => {
+  return (
+    <li key={ index }>
+      <Card
+         cardText= {card.keys(card)}
+      />
+    </li>
+  );
+});
+
+axios.get(allTripsUrl)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    response.data.forEach((trip) => {
+      allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
+    });
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+};
+
+
+this.state = {
+  cards: [
+    {
+      text: 'Be Here Now.',
+    },
+    {
+      text: 'Ok, now be somewhere else.',
+    },
+    {
+      text: 'Being present in the present is the greatest present you can present to yourself.',
+      emoji: 'gift',
+    },
+  ],
+};
diff --git a/src/components/Board.js b/src/components/Board.js
index aa3965a7..279e40e3 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
 import axios from 'axios';
 import './Board.css';
 import Card from './Card';
@@ -12,46 +11,62 @@ class Board extends Component {
     super();
 
     this.state = {
-      cards: [
-        {
-          inspoText: 'Be Here Now.',
-
-        },
-        {
-          inspoText: 'Ok, now be somewhere else',
-
-        },
-        {
-          inspoText: 'Being present in the present is the greatest present you can give yourself',
-          inspoEmoji: 'gift',
-        },
-      ],
+      cards: [],
     };
   }
 
 
-  render() {
 
-    console.log("In render function, this is the current set of cards, before converting to card components:");
 
-    console.log(this.state.cards);
 
-    const cardComponents = this.state.cards.map((card, index) => {
+  componentDidMount() {
+    axios.get('https://inspiration-board.herokuapp.com/boards/victoria/cards')
+      .then((response) => {
+        console.log('Here is the response');
+        console.log(response);
+        this.setState({ cards: response.data });
+        console.log('now reporting state:')
+        console.log(this.state.cards)
+        console.log('now reporting the first state element:')
+        console.log(this.state.cards[0])
+        console.log('now trying to dig:')
+        console.log(this.state.cards[0]["card"]["id"])
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  render() {
+
+    const cardKeysAttempt = Object.keys(this.state.cards).map(
+      key =>
+      ({
+        cardId: this.state.cards[key]["card"]["id"],
+        cardTxt: this.state.cards[key]["card"]["text"],
+        cardEmo: this.state.cards[key]["card"]["emoji"]
+      })
+    )
+
+    const cardComponents = cardKeysAttempt.map((card) => {
       return (
-        <li key={ index }>
+        <li key = {card.cardId} >
           <Card
-             cardText={card.inspoText}
-             cardEmoji={card.inspoEmoji}
+            cardText = {card.cardTxt}
+            cardEmoji = {card.cardEmo}
           />
         </li>
-      );
+      )
     });
 
+    console.log('Here is cardKeysAttempt')
+    console.log(cardKeysAttempt)
+    console.log('Here is cardComponents')
+    console.log(cardComponents)
+
     return (
       <div>
-        <ul>
-          {cardComponents}
-        </ul>
+        {cardComponents}
       </div>
     )
   }
diff --git a/src/components/Card.js b/src/components/Card.js
index 91333711..e59706f7 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -6,12 +6,10 @@ import './Card.css';
 
 class Card extends Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
 
+    const cardIdent = this.props.cardId
+    const cardWords = this.props.cardText
     const hasEmoji = this.props.cardEmoji;
     let displayEmoji;
     if (hasEmoji) {
@@ -22,7 +20,7 @@ class Card extends Component {
       <div className="card">
         <div className="card_content" >
           <div className="card_content-text" >
-            <p>{this.props.cardText}</p>
+            <p>{cardWords}</p>
           </div>
           <div className="card_content-emoji" >
             <p>{displayEmoji}</p>
@@ -34,6 +32,7 @@ class Card extends Component {
 }
 
 Card.propTypes = {
+  cardId: PropTypes.number,
   cardText: PropTypes.string.isRequired,
   cardEmoji: PropTypes.string,
 };

From f0862f26c7c006bfd8f08283323a34e29527ba4b Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 12:30:58 -0700
Subject: [PATCH 04/13] Deletion is working, basically, but still at a loss as
 to how to get it to reload the page after.

---
 README.md               | 94 -----------------------------------------
 src/components/Board.js | 15 +------
 src/components/Card.css |  4 +-
 src/components/Card.js  | 44 +++++++++++++------
 4 files changed, 37 insertions(+), 120 deletions(-)

diff --git a/README.md b/README.md
index 67627304..e0aaadae 100644
--- a/README.md
+++ b/README.md
@@ -79,100 +79,6 @@ You can see what your instructors are looking for [here](./feedback.md)
 
 #### CODE PARKING LOT:
 
-render() {
-  return (
-    <div className="card">
-      <div className="card_content" >
-        <div className="card_content-text" >
-          <p>{this.props.cardText}</p>
-        </div>
-        <div className="card_content-emoji" >
-          {this.addCardEmoji}
-        </div>
-      </div>
-    </div>
-  )
-}
-}
-
-
-
-constructor(props) {
-  super(props);
-
-  this.state = {
-     cardText: this.props.cardText,
-  }
-}
-
-
-addCardEmoji = (emoji) => {
-  if (this.props.emojiDesc){
-    this.setState(
-      {
-        cardEmoji: emoji.getUnicode(this.props.emojiDesc)
-      }
-    );
-  }
-}
-
-
-componentDidMount() {
-  axios.get(`https://jsonplaceholder.typicode.com/users`)
-    .then(res => {
-      const persons = res.data;
-      this.setState({ persons });
-    })
-}
-
-const cardComponents = Object.keys(this.state.cards).map(card =>
-  ({
-    cardId: card["id"],
-    cardText: card["text"],
-    cardEmoji: card["emoji"],
-  })
-)
-
-
-
-render() {
-   return (
-       <div>
-           {Object.keys(this.state.dataGoal.milestones).map((milestone) =>{
-                 return {this.state.dataGoal.milestones[milestone].tasks.map((task, idx)=>{
-         return (
-                //whatever you wish to do with the task item
-          )
-})
-           })}
-
-       </div>
-   )
-}
-
-const cardComponents = this.state.cards.map((card, index) => {
-  return (
-    <li key={ index }>
-      <Card
-         cardText= {card.keys(card)}
-      />
-    </li>
-  );
-});
-
-axios.get(allTripsUrl)
-  .then((response) => {
-    reportStatus(`Successfully loaded ${response.data.length} trips`);
-    response.data.forEach((trip) => {
-      allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
-    });
-  })
-  .catch((error) => {
-    reportStatus(`Encountered an error while loading trips: ${error.message}`);
-    console.log(error);
-  });
-};
-
 
 this.state = {
   cards: [
diff --git a/src/components/Board.js b/src/components/Board.js
index 279e40e3..0bb54649 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -15,22 +15,10 @@ class Board extends Component {
     };
   }
 
-
-
-
-
   componentDidMount() {
     axios.get('https://inspiration-board.herokuapp.com/boards/victoria/cards')
       .then((response) => {
-        console.log('Here is the response');
-        console.log(response);
         this.setState({ cards: response.data });
-        console.log('now reporting state:')
-        console.log(this.state.cards)
-        console.log('now reporting the first state element:')
-        console.log(this.state.cards[0])
-        console.log('now trying to dig:')
-        console.log(this.state.cards[0]["card"]["id"])
       })
       .catch((error) => {
         this.setState({ error: error.message });
@@ -52,6 +40,7 @@ class Board extends Component {
       return (
         <li key = {card.cardId} >
           <Card
+            cardID = {card.cardId}
             cardText = {card.cardTxt}
             cardEmoji = {card.cardEmo}
           />
@@ -65,7 +54,7 @@ class Board extends Component {
     console.log(cardComponents)
 
     return (
-      <div>
+      <div className = "board" >
         {cardComponents}
       </div>
     )
diff --git a/src/components/Card.css b/src/components/Card.css
index e86d4329..5f68310f 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -11,7 +11,7 @@
   border-radius: 5px;
 
   display: grid;
-  grid-template-columns: 1fr 5fr 1fr;
+  grid-template-columns: 1fr 3fr 1fr;
   align-items: center;
 }
 
@@ -43,5 +43,7 @@
 
 .card__delete {
   align-self: start;
+  border: 2px solid black;
+  border-radius: 5px;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }
diff --git a/src/components/Card.js b/src/components/Card.js
index e59706f7..fd192194 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,39 +1,59 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
 class Card extends Component {
 
+  constructor(props) {
+    super();
+    this.state = {
+      cardId: props.cardID,
+      cardWorden: props.cardText,
+      cardEmoji: props.cardEmoji,
+    }
+  }
+
+  handleSubmit = event => {
+    let deleteURL = `https://inspiration-board.herokuapp.com/boards/victoria/cards/${this.props.cardID}`
+    console.log(deleteURL)
+    axios.delete(deleteURL)
+      .then(response => {
+        console.log(response);
+        console.log(response.data);
+      })
+  }
+
   render() {
 
-    const cardIdent = this.props.cardId
-    const cardWords = this.props.cardText
-    const hasEmoji = this.props.cardEmoji;
+    const hasEmoji = this.state.cardEmoji;
     let displayEmoji;
     if (hasEmoji) {
       displayEmoji = emoji.getUnicode(this.props.cardEmoji)
     } else { displayEmoji = "" }
+    console.log('trying to report cardID')
+    console.log(this.state.cardId)
 
     return (
       <div className="card">
-        <div className="card_content" >
-          <div className="card_content-text" >
-            <p>{cardWords}</p>
-          </div>
-          <div className="card_content-emoji" >
-            <p>{displayEmoji}</p>
-          </div>
+        <div className="card_content">
+          <div className="card_content-text">{this.state.cardWorden}</div>
+          <div className="card_content-emoji">{displayEmoji}</div>
+          <div className="card_contentid">{this.state.cardId}</div>
         </div>
+        <form onSubmit={this.handleSubmit} className="card_delete">
+          <button type="submit">Delete This Card?</button>
+        </form>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-  cardId: PropTypes.number,
-  cardText: PropTypes.string.isRequired,
+  cardID: PropTypes.number,
+  cardText: PropTypes.string,
   cardEmoji: PropTypes.string,
 };
 

From 3cfe7f98fb6e655716675da1321dad0e056c342e Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 13:25:09 -0700
Subject: [PATCH 05/13] Ok, now it's reloading after deletion. Party.

---
 src/components/Card.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index fd192194..b89057b0 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -16,16 +16,24 @@ class Card extends Component {
     }
   }
 
-  handleSubmit = event => {
+  handleDelete = event => {
+    event.preventDefault();
     let deleteURL = `https://inspiration-board.herokuapp.com/boards/victoria/cards/${this.props.cardID}`
+    console.log('In the delete handler: ')
     console.log(deleteURL)
     axios.delete(deleteURL)
       .then(response => {
+        console.log('response to API request is happening')
         console.log(response);
         console.log(response.data);
+        console.log("about to reload")
+        console.log(window.parent.location.href)
+        window.parent.location.reload()
       })
   }
 
+
+
   render() {
 
     const hasEmoji = this.state.cardEmoji;
@@ -43,7 +51,7 @@ class Card extends Component {
           <div className="card_content-emoji">{displayEmoji}</div>
           <div className="card_contentid">{this.state.cardId}</div>
         </div>
-        <form onSubmit={this.handleSubmit} className="card_delete">
+        <form onSubmit={this.handleDelete} className="card_delete">
           <button type="submit">Delete This Card?</button>
         </form>
       </div>

From dcf2a0b1be0c6e9954dce4b0084a5c11fdef6605 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 18:57:44 -0700
Subject: [PATCH 06/13] Post method is now working nicely.  Emoji needs to
 become a dropdown, and tests need to be added, but this is nearly done.

---
 src/components/Board.js       | 34 ++++++++++++++--
 src/components/Card.js        |  5 ++-
 src/components/NewCardForm.js | 76 +++++++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+), 5 deletions(-)

diff --git a/src/components/Board.js b/src/components/Board.js
index 0bb54649..63c99aa0 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -25,6 +25,31 @@ class Board extends Component {
       });
   }
 
+  addCard = (card) => {
+    axios.post('https://inspiration-board.herokuapp.com/boards/victoria/cards',
+              card)
+      .then((response) => {
+        console.log('Post attempt is happening')
+        console.log(response)
+        console.log(response.data)
+        this.setState({
+          message: `Successfully Added A Card!`
+        });
+        console.log('HREF for current window:')
+        console.log(window.location.HREF)
+        console.log('HREF for parent window:')
+        console.log(window.parent.location.href)
+        console.log('Now trying to reload')
+        window.parent.location.reload()
+      })
+      .catch((error) => {
+        console.log(error.message);
+        this.setState({
+          message: error.message,
+        });
+      });
+  }
+
   render() {
 
     const cardKeysAttempt = Object.keys(this.state.cards).map(
@@ -54,16 +79,19 @@ class Board extends Component {
     console.log(cardComponents)
 
     return (
-      <div className = "board" >
+      <section className = "board">
+        <header>
+          {this.state.message ? this.state.message: ""  }
+        </header>
         {cardComponents}
-      </div>
+        <NewCardForm addCardCallback={this.addCard} />
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
 };
 
 export default Board;
diff --git a/src/components/Card.js b/src/components/Card.js
index b89057b0..8662fef8 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -19,8 +19,6 @@ class Card extends Component {
   handleDelete = event => {
     event.preventDefault();
     let deleteURL = `https://inspiration-board.herokuapp.com/boards/victoria/cards/${this.props.cardID}`
-    console.log('In the delete handler: ')
-    console.log(deleteURL)
     axios.delete(deleteURL)
       .then(response => {
         console.log('response to API request is happening')
@@ -30,6 +28,9 @@ class Card extends Component {
         console.log(window.parent.location.href)
         window.parent.location.reload()
       })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
   }
 
 
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..76fe7ecf 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -4,3 +4,79 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      text:'',
+      emoji: '',
+    };
+  }
+
+  onFieldChange = (event) => {
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    const updateState = {};
+      updateState[fieldName] = fieldValue;
+      this.setState(updateState);
+  }
+
+  valid = () => {
+    return this.state.text.length > 0 ||
+           this.state.emoji.length > 0;
+  }
+
+  clearForm = () => {
+    this.setState({
+      text: '',
+      emoji: '',
+    });
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    if (this.valid()) {
+      this.props.addCardCallback(this.state);
+      this.clearForm();
+    }
+  }
+
+  render() {
+    return (
+      <section>
+        <h3>Add An Edifying Post-It of Your Very Own: </h3>
+        <form onSubmit={this.onFormSubmit} >
+          <div>
+            <label htmlFor="text">Inspiring Message: </label>
+            <input
+              name="text"
+              value={this.state.text}
+              onChange={this.onFieldChange}
+              type="text"
+              id="text"
+              />
+          </div>
+          <div>
+            <label htmlFor="emoji">Desired Emoji: </label>
+            <input
+              name="emoji"
+              value={this.state.emoji}
+              onChange={this.onFieldChange}
+              type="text"
+              id="emoji"
+              />
+          </div>
+          <input type="submit" value="Inspire!" />
+        </form>
+      </section>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

From c1d22d2c6b816a09dc2c1bcf0e70a26d3f990613 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 19:31:17 -0700
Subject: [PATCH 07/13] Emoji selector is now working.  Want to turn the other
 part of the form into a text area, but other than that, we're golden.

---
 src/components/Card.css       |  4 ++++
 src/components/Card.js        |  2 +-
 src/components/NewCardForm.js | 26 ++++++++++++++++++--------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Card.css b/src/components/Card.css
index 5f68310f..a4cf91cb 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -36,6 +36,10 @@
   font-size: 3rem;
 }
 
+.card_content-id {
+  font-size: 1rem;
+}
+
 .card__content-text, .card__content-emoji {
   padding: 0;
   margin: 0;
diff --git a/src/components/Card.js b/src/components/Card.js
index 8662fef8..4e47f329 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -50,7 +50,7 @@ class Card extends Component {
         <div className="card_content">
           <div className="card_content-text">{this.state.cardWorden}</div>
           <div className="card_content-emoji">{displayEmoji}</div>
-          <div className="card_contentid">{this.state.cardId}</div>
+          <div className="card_content-id">Inspiration Quantum Number: {this.state.cardId}</div>
         </div>
         <form onSubmit={this.handleDelete} className="card_delete">
           <button type="submit">Delete This Card?</button>
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 76fe7ecf..ea11df57 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -43,7 +43,19 @@ class NewCardForm extends Component {
     }
   }
 
+
   render() {
+
+    const emojiPicker = EMOJI_LIST.map((emoj, index) => {
+      return (
+        <option key={index} value={emoj}>{emoj}</option>
+      )
+    });
+
+    console.log('reporting emojiPicker result:')
+    console.log(emojiPicker)
+
+
     return (
       <section>
         <h3>Add An Edifying Post-It of Your Very Own: </h3>
@@ -59,14 +71,12 @@ class NewCardForm extends Component {
               />
           </div>
           <div>
-            <label htmlFor="emoji">Desired Emoji: </label>
-            <input
-              name="emoji"
-              value={this.state.emoji}
-              onChange={this.onFieldChange}
-              type="text"
-              id="emoji"
-              />
+            <label>
+              Choose The Emoji That Best Represents the Current State of Your Soul:
+              <select name="emoji" value={this.state.emoji} type="text" id="emoji" onChange={this.onFieldChange}>
+                {emojiPicker}
+              </select>
+            </label>
           </div>
           <input type="submit" value="Inspire!" />
         </form>

From 65faf32a741e6cc6ef4889a9cf2fcaceb3ec032e Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 19:43:06 -0700
Subject: [PATCH 08/13] Changes in the form to dropdown and select are now
 working. Testing is all that's left.

---
 src/components/Card.js        |  2 +-
 src/components/NewCardForm.js | 15 +++------------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index 4e47f329..3c2aa976 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -50,7 +50,7 @@ class Card extends Component {
         <div className="card_content">
           <div className="card_content-text">{this.state.cardWorden}</div>
           <div className="card_content-emoji">{displayEmoji}</div>
-          <div className="card_content-id">Inspiration Quantum Number: {this.state.cardId}</div>
+          <div className="card_content-id">This is Quantum of Inspiration Number: {this.state.cardId}</div>
         </div>
         <form onSubmit={this.handleDelete} className="card_delete">
           <button type="submit">Delete This Card?</button>
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index ea11df57..4beab972 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -52,23 +52,14 @@ class NewCardForm extends Component {
       )
     });
 
-    console.log('reporting emojiPicker result:')
-    console.log(emojiPicker)
-
-
     return (
       <section>
         <h3>Add An Edifying Post-It of Your Very Own: </h3>
         <form onSubmit={this.onFormSubmit} >
           <div>
-            <label htmlFor="text">Inspiring Message: </label>
-            <input
-              name="text"
-              value={this.state.text}
-              onChange={this.onFieldChange}
-              type="text"
-              id="text"
-              />
+            <label>Concoct a Heart-Stirring Message:
+              <textarea name="text" value={this.state.text} type="text" id="text" onChange={this.onFieldChange} />
+            </label>
           </div>
           <div>
             <label>

From 273803d0de71364394914d12eb9b631bfb04bda5 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 22:14:40 -0700
Subject: [PATCH 09/13] beginnings of testing framework in place

---
 package-lock.json                  | 33 +++++++++++++++++++-----------
 package.json                       |  6 ++++++
 src/App.js                         |  1 -
 src/components/Card.test.js        |  3 +++
 src/components/NewCardForm.test.js |  3 +++
 5 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Card.test.js

diff --git a/package-lock.json b/package-lock.json
index 0d789ea1..dbb0a44c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@types/node": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.0.tgz",
-      "integrity": "sha512-hWzNviaVFIr1TqcRA8ou49JaSHp+Rfabmnqg2kNvusKqLhPU0rIsGPUj5WJJ7ld4Bb7qdgLmIhLfCD1qS08IVA==",
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz",
+      "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==",
       "dev": true
     },
     "abab": {
@@ -2961,7 +2961,7 @@
         "object.values": "1.0.4",
         "prop-types": "15.6.1",
         "react-reconciler": "0.7.0",
-        "react-test-renderer": "16.4.0"
+        "react-test-renderer": "16.4.1"
       }
     },
     "enzyme-adapter-utils": {
@@ -2975,6 +2975,15 @@
         "prop-types": "15.6.1"
       }
     },
+    "enzyme-to-json": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz",
+      "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.10"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -7399,7 +7408,7 @@
       "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
       "dev": true,
       "requires": {
-        "@types/node": "10.3.0"
+        "@types/node": "10.3.3"
       }
     },
     "parseurl": {
@@ -9005,9 +9014,9 @@
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
     "react-is": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.0.tgz",
-      "integrity": "sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==",
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz",
+      "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==",
       "dev": true
     },
     "react-reconciler": {
@@ -9208,15 +9217,15 @@
       }
     },
     "react-test-renderer": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.0.tgz",
-      "integrity": "sha512-Seh1t9xFY6TKiV/hRlPzUkqX1xHOiKIMsctfU0cggo1ajsLjoIJFL520LlrxV+4/VIj+clrCeH6s/aVv/vTStg==",
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz",
+      "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==",
       "dev": true,
       "requires": {
         "fbjs": "0.8.16",
         "object-assign": "4.1.1",
         "prop-types": "15.6.1",
-        "react-is": "16.4.0"
+        "react-is": "16.4.1"
       }
     },
     "read-pkg": {
diff --git a/package.json b/package.json
index ba61363d..da542049 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,13 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "gh-pages": "^1.2.0"
   },
+  "jest": {
+  "snapshotSerializers": [
+    "enzyme-to-json/serializer"
+    ]
+  },
   "homepage": "http://adagold.github.io/inspiration-board"
 }
diff --git a/src/App.js b/src/App.js
index 036a87da..4780fd76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import './App.css';
-import Card from './components/Card';
 import Board from './components/Board';
 
 class App extends Component {
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
new file mode 100644
index 00000000..12237412
--- /dev/null
+++ b/src/components/Card.test.js
@@ -0,0 +1,3 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Card from './Card';
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index e69de29b..77451aca 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -0,0 +1,3 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import NewCardForm from './NewCardForm';

From b262a6c3431176cda52a785f4d9fc65f2cde2e84 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Sun, 17 Jun 2018 23:47:47 -0700
Subject: [PATCH 10/13] very basic first test in all test files is passing,
 after appropriate fails.

---
 README.md                                     | 27 +++++-
 src/App.test.js                               |  1 -
 src/components/Board.js                       |  2 +-
 src/components/Board.test.js                  | 18 ++++
 src/components/Card.js                        |  4 +-
 src/components/Card.test.js                   | 15 +++
 src/components/NewCardForm.test.js            | 15 +++
 .../__snapshots__/Board.test.js.snap          | 93 +++++++++++++++++++
 .../__snapshots__/Card.test.js.snap           | 35 +++++++
 .../__snapshots__/NewCardForm.test.js.snap    | 86 +++++++++++++++++
 10 files changed, 290 insertions(+), 6 deletions(-)
 create mode 100644 src/components/__snapshots__/Board.test.js.snap
 create mode 100644 src/components/__snapshots__/Card.test.js.snap
 create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap

diff --git a/README.md b/README.md
index e0aaadae..cf99510e 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,6 @@ You can see what your instructors are looking for [here](./feedback.md)
 
 #### CODE PARKING LOT:
 
-
 this.state = {
   cards: [
     {
@@ -94,3 +93,29 @@ this.state = {
     },
   ],
 };
+
+
+<label>
+  Essay:
+  <textarea value={this.state.value} onChange={this.handleChange} />
+</label>
+
+
+
+
+
+
+
+
+
+
+<div>
+  <label htmlFor="text">Inspiring Message: </label>
+  <input
+    name="text"
+    value={this.state.text}
+    onChange={this.onFieldChange}
+    type="text"
+    id="text"
+    />
+</div>
diff --git a/src/App.test.js b/src/App.test.js
index 5a29f6cb..5ff61eae 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -10,5 +10,4 @@ describe('App', () => {
     ReactDOM.render(<App />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
-
 });
diff --git a/src/components/Board.js b/src/components/Board.js
index 63c99aa0..e9159f39 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -80,7 +80,7 @@ class Board extends Component {
 
     return (
       <section className = "board">
-        <header>
+        <header className="capybara">
           {this.state.message ? this.state.message: ""  }
         </header>
         {cardComponents}
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
index e69de29b..a9e999c3 100644
--- a/src/components/Board.test.js
+++ b/src/components/Board.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Board from './Board';
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <Board />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/components/Card.js b/src/components/Card.js
index 3c2aa976..e3924dd0 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -33,8 +33,6 @@ class Card extends Component {
       });
   }
 
-
-
   render() {
 
     const hasEmoji = this.state.cardEmoji;
@@ -48,7 +46,7 @@ class Card extends Component {
     return (
       <div className="card">
         <div className="card_content">
-          <div className="card_content-text">{this.state.cardWorden}</div>
+          <div  className="card_content-text">{this.state.cardWorden}</div>
           <div className="card_content-emoji">{displayEmoji}</div>
           <div className="card_content-id">This is Quantum of Inspiration Number: {this.state.cardId}</div>
         </div>
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
index 12237412..5bbecd53 100644
--- a/src/components/Card.test.js
+++ b/src/components/Card.test.js
@@ -1,3 +1,18 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import Card from './Card';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <Card />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index 77451aca..c3d65352 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -1,3 +1,18 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import NewCardForm from './NewCardForm';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <NewCardForm addCardCallback={() => {} } />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..776949d5
--- /dev/null
+++ b/src/components/__snapshots__/Board.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches an existing snapshot 1`] = `
+<Board>
+  <section
+    className="board"
+  >
+    <header />
+    <NewCardForm
+      addCardCallback={[Function]}
+    >
+      <section>
+        <h3>
+          Add An Edifying Post-It of Your Very Own: 
+        </h3>
+        <form
+          onSubmit={[Function]}
+        >
+          <div>
+            <label>
+              Concoct a Heart-Stirring Message:
+              <textarea
+                id="text"
+                name="text"
+                onChange={[Function]}
+                type="text"
+                value=""
+              />
+            </label>
+          </div>
+          <div>
+            <label>
+              Choose The Emoji That Best Represents the Current State of Your Soul:
+              <select
+                id="emoji"
+                name="emoji"
+                onChange={[Function]}
+                type="text"
+                value=""
+              >
+                <option
+                  key="0"
+                  value=""
+                />
+                <option
+                  key="1"
+                  value="heart_eyes"
+                >
+                  heart_eyes
+                </option>
+                <option
+                  key="2"
+                  value="beer"
+                >
+                  beer
+                </option>
+                <option
+                  key="3"
+                  value="clap"
+                >
+                  clap
+                </option>
+                <option
+                  key="4"
+                  value="sparkling_heart"
+                >
+                  sparkling_heart
+                </option>
+                <option
+                  key="5"
+                  value="heart_eyes_cat"
+                >
+                  heart_eyes_cat
+                </option>
+                <option
+                  key="6"
+                  value="dog"
+                >
+                  dog
+                </option>
+              </select>
+            </label>
+          </div>
+          <input
+            type="submit"
+            value="Inspire!"
+          />
+        </form>
+      </section>
+    </NewCardForm>
+  </section>
+</Board>
+`;
diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..5332702c
--- /dev/null
+++ b/src/components/__snapshots__/Card.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `
+<Card>
+  <div
+    className="card"
+  >
+    <div
+      className="card_content"
+    >
+      <div
+        className="card_content-text"
+      />
+      <div
+        className="card_content-emoji"
+      />
+      <div
+        className="card_content-id"
+      >
+        This is Quantum of Inspiration Number: 
+      </div>
+    </div>
+    <form
+      className="card_delete"
+      onSubmit={[Function]}
+    >
+      <button
+        type="submit"
+      >
+        Delete This Card?
+      </button>
+    </form>
+  </div>
+</Card>
+`;
diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap
new file mode 100644
index 00000000..9c81e7b2
--- /dev/null
+++ b/src/components/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `
+<NewCardForm
+  addCardCallback={[Function]}
+>
+  <section>
+    <h3>
+      Add An Edifying Post-It of Your Very Own: 
+    </h3>
+    <form
+      onSubmit={[Function]}
+    >
+      <div>
+        <label>
+          Concoct a Heart-Stirring Message:
+          <textarea
+            id="text"
+            name="text"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Choose The Emoji That Best Represents the Current State of Your Soul:
+          <select
+            id="emoji"
+            name="emoji"
+            onChange={[Function]}
+            type="text"
+            value=""
+          >
+            <option
+              key="0"
+              value=""
+            />
+            <option
+              key="1"
+              value="heart_eyes"
+            >
+              heart_eyes
+            </option>
+            <option
+              key="2"
+              value="beer"
+            >
+              beer
+            </option>
+            <option
+              key="3"
+              value="clap"
+            >
+              clap
+            </option>
+            <option
+              key="4"
+              value="sparkling_heart"
+            >
+              sparkling_heart
+            </option>
+            <option
+              key="5"
+              value="heart_eyes_cat"
+            >
+              heart_eyes_cat
+            </option>
+            <option
+              key="6"
+              value="dog"
+            >
+              dog
+            </option>
+          </select>
+        </label>
+      </div>
+      <input
+        type="submit"
+        value="Inspire!"
+      />
+    </form>
+  </section>
+</NewCardForm>
+`;

From 20161fc2a031b98837f0be4b3968570be39b2868 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Mon, 18 Jun 2018 01:05:40 -0700
Subject: [PATCH 11/13] first non-trivial test of NewCardForm passing after
 appropriate fail.

---
 src/components/Board.js            |  2 +-
 src/components/Card.test.js        |  2 ++
 src/components/NewCardForm.test.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/Board.js b/src/components/Board.js
index e9159f39..55e0fea8 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -80,7 +80,7 @@ class Board extends Component {
 
     return (
       <section className = "board">
-        <header className="capybara">
+        <header >
           {this.state.message ? this.state.message: ""  }
         </header>
         {cardComponents}
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
index 5bbecd53..550eb4be 100644
--- a/src/components/Card.test.js
+++ b/src/components/Card.test.js
@@ -15,4 +15,6 @@ describe('Card', () => {
     wrapper.unmount();
   });
 
+  
+
 });
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index c3d65352..ee9b1f07 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -15,4 +15,34 @@ describe('NewCardForm', () => {
     wrapper.unmount();
   });
 
+  test('When a user types into the textarea in the form, the field is updated', () => {
+    // Arrange
+    // Shallow Mounted the wrapper
+    const wrapper = shallow(<NewCardForm
+      addCardCallback={() => {} }
+      />);
+
+    // find the input field
+    let textField =
+        wrapper.find('textarea[name="text"]');
+        console.log(textField)
+
+    // Act
+    textField.simulate('change', {
+      target: {
+        name: 'text',
+        value: 'Porkchop Power!',
+      },
+    });
+    console.log(textField)
+
+    wrapper.update();
+
+    textField = wrapper.find('textarea[name="text"]');
+    console.log(textField)
+
+    expect(textField.getElement().props.value).toEqual('Porkchop Power!');
+
+  });
+
 });

From b510c0d4df85d6fabdc061de9f08ea86347d14f2 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Mon, 18 Jun 2018 01:36:08 -0700
Subject: [PATCH 12/13] More basic tests added to board and card, and they are
 passing after appropriate fails.

---
 README.md                                     | 46 +++++-----
 src/components/Board.js                       |  1 -
 src/components/Board.test.js                  | 10 +++
 src/components/Card.test.js                   | 11 ++-
 src/components/NewCardForm.test.js            | 29 ++++++-
 .../__snapshots__/Board.test.js.snap          | 83 +++++++++++++++++++
 .../__snapshots__/Card.test.js.snap           | 34 ++++++++
 7 files changed, 184 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index cf99510e..a816c8a1 100644
--- a/README.md
+++ b/README.md
@@ -94,28 +94,24 @@ this.state = {
   ],
 };
 
-
-<label>
-  Essay:
-  <textarea value={this.state.value} onChange={this.handleChange} />
-</label>
-
-
-
-
-
-
-
-
-
-
-<div>
-  <label htmlFor="text">Inspiring Message: </label>
-  <input
-    name="text"
-    value={this.state.text}
-    onChange={this.onFieldChange}
-    type="text"
-    id="text"
-    />
-</div>
+test('addPetCallback prop is called when the form is submitted', () => {
+  // Arrange
+  const mockAddPetCallback = jest.fn();
+  const wrapper = shallow(<NewPetForm addPetCallback={mockAddPetCallback} />);
+  const form = wrapper.find('form');
+
+  // Act
+  form.simulate('submit', {
+    preventDefault: () => {},
+  });
+  wrapper.update();
+
+  // Assert
+  expect(mockAddPetCallback).toHaveBeenCalled();
+  expect(mockAddPetCallback.mock.calls[0][0]).toEqual({
+    name: '',
+    age: '',
+    breed: '',
+    about: '',
+  });
+});
diff --git a/src/components/Board.js b/src/components/Board.js
index 55e0fea8..e301d972 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -9,7 +9,6 @@ import CARD_DATA from '../data/card-data.json';
 class Board extends Component {
   constructor() {
     super();
-
     this.state = {
       cards: [],
     };
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
index a9e999c3..ea138edc 100644
--- a/src/components/Board.test.js
+++ b/src/components/Board.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
+import TestRenderer from 'react-test-renderer';
 import Board from './Board';
 
 describe('Board', () => {
@@ -15,4 +16,13 @@ describe('Board', () => {
     wrapper.unmount();
   });
 
+  test('That it can render without crashing', () => {
+
+    const testRenderer = TestRenderer.create( <Board
+
+      />);
+
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+
 });
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
index 550eb4be..6b1a9667 100644
--- a/src/components/Card.test.js
+++ b/src/components/Card.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
+import TestRenderer from 'react-test-renderer';
 import Card from './Card';
 
 describe('Card', () => {
@@ -15,6 +16,14 @@ describe('Card', () => {
     wrapper.unmount();
   });
 
-  
+  test('That it can render without crashing', () => {
 
+    const testRenderer = TestRenderer.create( <Card
+
+      text="Let an umbrella be your smile."
+      emoji="beer"
+      />);
+
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index ee9b1f07..e076482e 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -25,7 +25,6 @@ describe('NewCardForm', () => {
     // find the input field
     let textField =
         wrapper.find('textarea[name="text"]');
-        console.log(textField)
 
     // Act
     textField.simulate('change', {
@@ -34,15 +33,39 @@ describe('NewCardForm', () => {
         value: 'Porkchop Power!',
       },
     });
-    console.log(textField)
 
     wrapper.update();
 
     textField = wrapper.find('textarea[name="text"]');
-    console.log(textField)
 
     expect(textField.getElement().props.value).toEqual('Porkchop Power!');
 
   });
 
+  test('When a user selects an emoji name from the dropdown, the relevant field is updated', () => {
+    // Arrange
+    // Shallow Mounted the wrapper
+    const wrapper = shallow(<NewCardForm
+      addCardCallback={() => {} }
+      />);
+
+    // find the input field
+    let emojiField =
+        wrapper.find('select[name="emoji"]');
+
+    // Act
+    emojiField.simulate('change', {
+      target: {
+        name: 'emoji',
+        value: 'clap',
+      },
+    });
+
+    wrapper.update();
+
+    emojiField = wrapper.find('select[name="emoji"]');
+
+    expect(emojiField.getElement().props.value).toEqual('clap');
+  });
+
 });
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap
index 776949d5..031d11aa 100644
--- a/src/components/__snapshots__/Board.test.js.snap
+++ b/src/components/__snapshots__/Board.test.js.snap
@@ -1,5 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Board That it can render without crashing 1`] = `
+<section
+  className="board"
+>
+  <header>
+    
+  </header>
+  <section>
+    <h3>
+      Add An Edifying Post-It of Your Very Own: 
+    </h3>
+    <form
+      onSubmit={[Function]}
+    >
+      <div>
+        <label>
+          Concoct a Heart-Stirring Message:
+          <textarea
+            id="text"
+            name="text"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Choose The Emoji That Best Represents the Current State of Your Soul:
+          <select
+            id="emoji"
+            name="emoji"
+            onChange={[Function]}
+            type="text"
+            value=""
+          >
+            <option
+              value=""
+            >
+              
+            </option>
+            <option
+              value="heart_eyes"
+            >
+              heart_eyes
+            </option>
+            <option
+              value="beer"
+            >
+              beer
+            </option>
+            <option
+              value="clap"
+            >
+              clap
+            </option>
+            <option
+              value="sparkling_heart"
+            >
+              sparkling_heart
+            </option>
+            <option
+              value="heart_eyes_cat"
+            >
+              heart_eyes_cat
+            </option>
+            <option
+              value="dog"
+            >
+              dog
+            </option>
+          </select>
+        </label>
+      </div>
+      <input
+        type="submit"
+        value="Inspire!"
+      />
+    </form>
+  </section>
+</section>
+`;
+
 exports[`Board that it matches an existing snapshot 1`] = `
 <Board>
   <section
diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap
index 5332702c..0323d92d 100644
--- a/src/components/__snapshots__/Card.test.js.snap
+++ b/src/components/__snapshots__/Card.test.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card That it can render without crashing 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card_content"
+  >
+    <div
+      className="card_content-text"
+    />
+    <div
+      className="card_content-emoji"
+    >
+      
+    </div>
+    <div
+      className="card_content-id"
+    >
+      This is Quantum of Inspiration Number: 
+    </div>
+  </div>
+  <form
+    className="card_delete"
+    onSubmit={[Function]}
+  >
+    <button
+      type="submit"
+    >
+      Delete This Card?
+    </button>
+  </form>
+</div>
+`;
+
 exports[`Card that it matches an existing snapshot 1`] = `
 <Card>
   <div

From 9039d09cd96007a4492de92c3c19f39ead5cabb0 Mon Sep 17 00:00:00 2001
From: Victoria Garcia <v.elisabeth.garcia@gmail.com>
Date: Mon, 18 Jun 2018 08:52:24 -0700
Subject: [PATCH 13/13] Form submission test added to NewCardForm. Ideally
 would have more, but it's PULL REQUEST O'CLOCK.

---
 src/components/Board.js            | 13 -------------
 src/components/Board.test.js       |  1 -
 src/components/Card.test.js        |  8 ++++----
 src/components/NewCardForm.test.js | 20 ++++++++++++++++++++
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/Board.js b/src/components/Board.js
index e301d972..536c6216 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -28,17 +28,9 @@ class Board extends Component {
     axios.post('https://inspiration-board.herokuapp.com/boards/victoria/cards',
               card)
       .then((response) => {
-        console.log('Post attempt is happening')
-        console.log(response)
-        console.log(response.data)
         this.setState({
           message: `Successfully Added A Card!`
         });
-        console.log('HREF for current window:')
-        console.log(window.location.HREF)
-        console.log('HREF for parent window:')
-        console.log(window.parent.location.href)
-        console.log('Now trying to reload')
         window.parent.location.reload()
       })
       .catch((error) => {
@@ -72,11 +64,6 @@ class Board extends Component {
       )
     });
 
-    console.log('Here is cardKeysAttempt')
-    console.log(cardKeysAttempt)
-    console.log('Here is cardComponents')
-    console.log(cardComponents)
-
     return (
       <section className = "board">
         <header >
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
index ea138edc..381b4a7d 100644
--- a/src/components/Board.test.js
+++ b/src/components/Board.test.js
@@ -19,7 +19,6 @@ describe('Board', () => {
   test('That it can render without crashing', () => {
 
     const testRenderer = TestRenderer.create( <Board
-
       />);
 
     expect(testRenderer.toJSON()).toMatchSnapshot();
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
index 6b1a9667..5958de0a 100644
--- a/src/components/Card.test.js
+++ b/src/components/Card.test.js
@@ -5,14 +5,13 @@ import Card from './Card';
 
 describe('Card', () => {
   test('that it matches an existing snapshot', () => {
-    // First Mount the Component in the testing DOM
-    // Arrange
+
     const wrapper = mount( <Card />);
 
-    // Assert that it looks like the last snapshot
+
     expect(wrapper).toMatchSnapshot();
 
-    // Remove the component from the DOM (save memory and prevent side effects).
+
     wrapper.unmount();
   });
 
@@ -26,4 +25,5 @@ describe('Card', () => {
 
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
+
 });
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index e076482e..2b14b314 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -68,4 +68,24 @@ describe('NewCardForm', () => {
     expect(emojiField.getElement().props.value).toEqual('clap');
   });
 
+  test('addCardCallback prop is called when the form is submitted', () => {
+
+    const mockAddCardCallback = jest.fn();
+    const wrapper = shallow(<NewCardForm  addCardCallback={mockAddCardCallback}  />);
+
+    const form = wrapper.find('form');
+
+    wrapper.setState({
+      text: 'Porkchop',
+      emoji: 'beer',
+    })
+
+    // Act
+    form.simulate('submit', {
+      preventDefault: () => {},
+    });
+    wrapper.update();
+    // Assert
+    expect(mockAddCardCallback).toHaveBeenCalled();
+
 });