From 36dd6af40d2bf5bb0d3176d05499eeed3e1ed7dd Mon Sep 17 00:00:00 2001
From: Brandon Chung <brandon.k.chung@gmail.com>
Date: Sun, 6 Oct 2019 19:01:26 -0500
Subject: [PATCH 1/3] update css to be more responsive

---
 src/index.css | 52 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/index.css b/src/index.css
index 1935409d0..ab6994da7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,26 +1,37 @@
-body {
+html {
+  box-sizing: border-box;
+}
+
+html, body {
   margin: 0;
   padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
   font-family: sans-serif;
   background-color: #303030;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
-  box-sizing: border-box;
+  padding: 15px;
 }
 
 /* Container Elements */
 .puzzleFeed {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 405px;
 }
 
 .puzzleBox {
-  width: 405px;
+  width: 100%;
   border-radius: 2px;
-  padding: 0px 20px;
+  padding: 15px;
   background-color: #424242;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   display: flex;
@@ -30,34 +41,40 @@ body {
   margin-right: 0px;
 }
 
+.puzzleBox:first-of-type {
+  margin-top: 0;
+}
+.puzzleBox:last-of-type {
+  margin-bottom: 0;
+}
+
 .evenAndOddPB {
-  height: 270px;
+  /* height: 270px; */
 }
 
 .filterObjectPB {
-  height: 390px;
+  /* height: 390px */
 }
 
 .filterStringPB {
-  height: 350px;
+  /* height: 350px; */
 }
 
 .palindromePB {
-  height: 225px;
+  /* height: 225px; */
 }
 
 .sumPB {
-  height: 270px;
+  /* height: 270px; */
 }
 
 .resultsBox {
-  width: 360px;
-  height: 20px;
+  width: 100%;
   padding: 10px;
   border-radius: 2px;
   background-color: #303030;
   margin-top: 10px;
-  font-family: Roboto;
+  font-family: 'Courier New', Courier, monospace;
   font-size: 16px;
   line-height: 1.5;
   color: #ffffff;
@@ -72,8 +89,7 @@ body {
 }
 
 .inputLine {
-  width: 300px;
-  height: 15px;
+  width: 100%;
   font-size: 20px;
   color: #fff;
   padding-bottom: 6px;
@@ -91,7 +107,7 @@ body {
 /* Buttons */
 
 .confirmationButton {
-  width: 380px;
+  width: 100%;
   height: 36px;
   border-radius: 2px;
   background-color: #4fc3f7;

From d8310cccd9f03b57054b7847ad8f24d6fee64b58 Mon Sep 17 00:00:00 2001
From: Brandon Chung <brandon.k.chung@gmail.com>
Date: Sun, 6 Oct 2019 19:03:47 -0500
Subject: [PATCH 2/3] remove unnecessary classes from README

---
 README.md | 60 +++++++++++++++++++++++++++----------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index b3844cfeb..1eef2efca 100644
--- a/README.md
+++ b/README.md
@@ -494,7 +494,7 @@ In this step, we'll start with the first topic: `EvenAndOdd`.
 * Remove the `<p>` element from the `return` of the `render` method.
 * Add the component outline to the `return` of the `render` method.
 * Add the following `className` props to the outline:
-  * `div` - className="puzzleBox evenAndOddPB"
+  * `div` - className="puzzleBox"
   * `input` - className="inputLine"
   * `button` - className="confirmationButton"
   * Both `span`s - className="resultsBox"
@@ -521,7 +521,7 @@ Let's begin by rendering our component's outline.
 ```js
 render() {
   return (
-    <div className="puzzleBox evenAndOddPB">
+    <div className="puzzleBox">
       <h4> Evens and Odds </h4>
       <input className="inputLine"></input>
       <button className="confirmationButton"> Split </button>
@@ -551,7 +551,7 @@ Next, let's update our last two `span` elements to display our `evenArray` and `
 ```js
 render() {
   return (
-   <div className="puzzleBox evenAndOddPB">
+   <div className="puzzleBox">
       <h4> Evens and Odds </h4>
       <input className="inputLine"></input>
       <button className="confirmationButton"> Split </button>
@@ -569,7 +569,7 @@ Next let's update our `input` element to handle user input. In React you can use
 ```js
 render() {
   return (
-    <div className="puzzleBox evenAndOddPB">
+    <div className="puzzleBox">
       <h4> Evens and Odds </h4>
       <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
       <button className="confirmationButton"> Split </button>
@@ -599,7 +599,7 @@ Now that our `input` functionality is finished, all that's left is getting our `
 ```js
 render() {
   return (
-    <div className="puzzleBox evenAndOddPB">
+    <div className="puzzleBox">
       <h4> Evens and Odds </h4>
       <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
       <button className="confirmationButton" onClick={ () => { this.assignEvenAndOdds(this.state.userInput) }}> Split </button>
@@ -665,7 +665,7 @@ export default class EvenAndOdd extends Component {
 
   render() {
     return (
-      <div className="puzzleBox evenAndOddPB">
+      <div className="puzzleBox">
         <h4> Evens and Odds </h4>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
         <button className="confirmationButton" onClick={ () => { this.assignEvenAndOdds(this.state.userInput) }}> Split </button>
@@ -699,7 +699,7 @@ In this step, we'll build out the `FilterObject` component.
 * Remove the `<p>` element from the `return` of the `render` method.
 * Add the component outline to the `return` of the `render` method.
 * Add the following `className` props to the outline:
-  * `div` - className="puzzleBox filterObjectPB"
+  * `div` - className="puzzleBox"
   * The first `span` - className="puzzleText"
   * `input` - className="inputLine"
   * `button` - className="confirmationButton"
@@ -727,7 +727,7 @@ Let's begin by rendering our component's outline.
 ```js
   render() {
     return (
-      <div className="puzzleBox filterObjectPB">
+      <div className="puzzleBox">
         <h4> Filter Object </h4>
         <span className="puzzleText"></span>
         <input className="inputLine"></input>
@@ -773,7 +773,7 @@ Next let's update our `span` elements to display our unfiltered and filtered arr
 ```js
   render() {
     return (
-      <div className="puzzleBox filterObjectPB">
+      <div className="puzzleBox">
         <h4> Filter Object </h4>
         <span className="puzzleText"> Original: { JSON.stringify(this.state.employees, null, 10) } </span>
         <input className="inputLine"></input>
@@ -793,7 +793,7 @@ Next let's update our `input` element to handle user input.
 
   render() {
     return (
-      <div className="puzzleBox filterObjectPB">
+      <div className="puzzleBox">
         <h4> Filter Object </h4>
         <span className="puzzleText"> Original: { JSON.stringify(this.state.employees, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -813,7 +813,7 @@ Finally let's update our `button` element to handle filtering our employee array
 
   render() {
     return (
-      <div className="puzzleBox filterObjectPB">
+      <div className="puzzleBox">
         <h4> Filter Object </h4>
         <span className="puzzleText"> Original: { JSON.stringify(this.state.employees, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -884,7 +884,7 @@ export default class FilterObject extends Component {
 
   render() {
     return (
-      <div className="puzzleBox filterObjectPB">
+      <div className="puzzleBox">
         <h4> Filter Object </h4>
         <span className="puzzleText"> Original: { JSON.stringify(this.state.employees, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -918,7 +918,7 @@ In this step, we'll build out the `FilterString` component.
 * Remove the `<p>` element from the `return` of the `render` method.
 * Add the component outline to the `return` of the `render` method.
 * Add the following `className` props to the outline:
-  * `div` - className="puzzleBox filterStringPB"
+  * `div` - className="puzzleBox"
   * The first `span` - className="puzzleText"
   * `input` - className="inputLine"
   * `button` - className="confirmationButton"
@@ -946,7 +946,7 @@ Let's begin by rendering our component's outline.
 ```js
   render() {
     return (
-      <div className="puzzleBox filterStringPB">
+      <div className="puzzleBox">
         <h4> Filter String </h4>
         <span className="puzzleText"></span>
         <input className="inputLine"></input>
@@ -976,7 +976,7 @@ Next, let's update our `span` elements to display our unfiltered and filtered ar
 ```js
   render() {
     return (
-      <div className="puzzleBox filterStringPB">
+      <div className="puzzleBox">
         <h4> Filter String </h4>
         <span className="puzzleText"> Names: { JSON.stringify(this.state.names, null, 10) } </span>
         <input className="inputLine"></input>
@@ -996,7 +996,7 @@ Next, let's update our `input` element to handle user input.
 
   render() {
     return (
-      <div className="puzzleBox filterStringPB">
+      <div className="puzzleBox">
         <h4> Filter String </h4>
         <span className="puzzleText"> Names: { JSON.stringify(this.state.names, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -1016,7 +1016,7 @@ Finally, let's update our `button` element to handle filtering our names array.
 
   render() {
     return (
-      <div className="puzzleBox filterStringPB">
+      <div className="puzzleBox">
         <h4> Filter String </h4>
         <span className="puzzleText"> Names: { JSON.stringify(this.state.names, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -1071,7 +1071,7 @@ export default class FilterString extends Component {
 
   render() {
     return (
-      <div className="puzzleBox filterStringPB">
+      <div className="puzzleBox">
         <h4> Filter String </h4>
         <span className="puzzleText"> Names: { JSON.stringify(this.state.names, null, 10) } </span>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
@@ -1105,7 +1105,7 @@ In this step, we'll build out the `Palindrome` component.
 * Remove the `<p>` element from the `return` of the `render` method.
 * Add the component outline to the `return` of the `render` method.
 * Add the following `className` props to the outline:
-  * `div` - className="puzzleBox filterStringPB"
+  * `div` - className="puzzleBox"
   * `input` - className="inputLine"
   * `button` - className="confirmationButton"
   * `span` - className="resultsBox"
@@ -1130,7 +1130,7 @@ Let's begin by rendering our component's outline.
 ```js
   render() {
     return (
-      <div className="puzzleBox palindromePB">
+      <div className="puzzleBox">
         <h4> Palindrome </h4>
         <input className="inputLine"></input>
         <button className="confirmationButton"> Check </button>
@@ -1158,7 +1158,7 @@ Next, let's update our `span` element to display `palindrome`.
 ```js
   render() {
     return (
-      <div className="puzzleBox palindromePB">
+      <div className="puzzleBox">
         <h4> Palindrome </h4>
         <input className="inputLine"></input>
         <button className="confirmationButton"> Check </button>
@@ -1177,7 +1177,7 @@ Next, let's update our `input` element to handle user input
 
   render() {
     return (
-      <div className="puzzleBox palindromePB">
+      <div className="puzzleBox">
         <h4> Palindrome </h4>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
         <button className="confirmationButton"> Check </button>
@@ -1196,7 +1196,7 @@ Finally, let's update our `button` element to handle setting `palindrome` to `"t
 
   render() {
     return (
-      <div className="puzzleBox palindromePB">
+      <div className="puzzleBox">
         <h4> Palindrome </h4>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
         <button className="confirmationButton" onClick={ () => this.isPalindrome(this.state.userInput) }> Check </button>
@@ -1250,7 +1250,7 @@ export default class Palindrome extends Component {
 
   render() {
     return (
-      <div className="puzzleBox palindromePB">
+      <div className="puzzleBox">
         <h4> Palindrome </h4>
         <input className="inputLine" onChange={ (e) => this.handleChange(e.target.value) }></input>
         <button className="confirmationButton" onClick={ () => this.isPalindrome(this.state.userInput) }> Check </button>
@@ -1283,7 +1283,7 @@ In this step, we'll build out the `Sum` component.
 * Remove the `<p>` element from the `return` of the `render` method.
 * Add the component outline to the `return` of the `render` method.
 * Add the following `className` props to the outline:
-  * `div` - className="puzzleBox sumPB"
+  * `div` - className="puzzleBox"
   * The two `input` - className="inputLine"
   * `button` - className="confirmationButton"
   * `span` - className="resultsBox"
@@ -1310,7 +1310,7 @@ Let's begin by rendering our component's outline.
 ```js
   render() {
     return (
-      <div className="puzzleBox sumPB">
+      <div className="puzzleBox">
         <h4> Sum </h4>
         <input className="inputLine" type="number"></input>
         <input className="inputLine" type="number"></input>
@@ -1340,7 +1340,7 @@ Next, let's update our `span` element to display `sum`.
 ```js
   render() {
     return (
-      <div className="puzzleBox sumPB">
+      <div className="puzzleBox">
         <h4> Sum </h4>
         <input className="inputLine" type="number"></input>
         <input className="inputLine" type="number"></input>
@@ -1364,7 +1364,7 @@ Next, let's update our `input` elements to handle user input
 
   render() {
     return (
-      <div className="puzzleBox sumPB">
+      <div className="puzzleBox">
         <h4> Sum </h4>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber1(e.target.value) }></input>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber2(e.target.value) }></input>
@@ -1384,7 +1384,7 @@ Finally, let's update our `button` element to update the value of `sum`.
 
   render() {
     return (
-      <div className="puzzleBox sumPB">
+      <div className="puzzleBox">
         <h4> Sum </h4>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber1(e.target.value) }></input>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber2(e.target.value) }></input>
@@ -1434,7 +1434,7 @@ export default class Sum extends Component {
 
   render() {
     return (
-      <div className="puzzleBox sumPB">
+      <div className="puzzleBox">
         <h4> Sum </h4>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber1(e.target.value) }></input>
         <input className="inputLine" type="number" onChange={ (e) => this.updateNumber2(e.target.value) }></input>

From 67cec7170a55b0de91c0c76386198fb7546a867f Mon Sep 17 00:00:00 2001
From: Brandon Chung <brandon.k.chung@gmail.com>
Date: Sun, 6 Oct 2019 19:03:52 -0500
Subject: [PATCH 3/3] remove unused css classes

---
 src/index.css | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/src/index.css b/src/index.css
index ab6994da7..70922518c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,26 +48,6 @@ body {
   margin-bottom: 0;
 }
 
-.evenAndOddPB {
-  /* height: 270px; */
-}
-
-.filterObjectPB {
-  /* height: 390px */
-}
-
-.filterStringPB {
-  /* height: 350px; */
-}
-
-.palindromePB {
-  /* height: 225px; */
-}
-
-.sumPB {
-  /* height: 270px; */
-}
-
 .resultsBox {
   width: 100%;
   padding: 10px;