From 45ca5853b8ab0b9e6bdacb39526b54e074ec0a15 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 09:55:08 -0600
Subject: [PATCH 1/6] add frontend search

---
 compare.html  | 12 +++++++++++-
 css/style.css | 19 +++++++++++++++++++
 index.html    |  1 +
 js/search.js  | 25 +++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 js/search.js

diff --git a/compare.html b/compare.html
index cf1c00b..c689629 100644
--- a/compare.html
+++ b/compare.html
@@ -43,8 +43,14 @@
             </div>
         </section>
         
-        <!-- That's it ! compartion table :) -->
         <section>
+            <div class="search">
+                <input type="text" placeholder="Search" id="search">
+            </div>
+        </section>
+
+        <!-- That's it ! compartion table :) -->
+        <section id="comparisonTable">
             <nav>
             <blockquote class="guide">Browser version " + " means latest version .</blockquote>
             	<div class="parent">
@@ -1788,6 +1794,9 @@
                 </div>
             </div>
 
+            <div class="parent" id="noSearch">
+                There were no search results matching <span></span>
+            </div>
             </nav>
         </section>
 
@@ -1824,6 +1833,7 @@
 
         <!-- Scripts -->
         <script type="text/javascript" src="js/jquery.min.js"></script>
+        <script type="text/javascript" src="js/search.js"></script>
         <script>
             $('nav .parent ul').on('click', function (e) {
                 $(this).next('.info').toggleClass('active')
diff --git a/css/style.css b/css/style.css
index 3799694..13873d3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,6 +141,25 @@ section p:last-child {
     top: 50%;
 	margin-top: -7px;
 }
+
+#noSearch {
+    display: none;
+    text-align: center;
+}
+
+#search {
+    width: 100%;
+    margin-top: 5px;
+    font-size: 16px;
+    line-height: 25px;
+    font-family: 'Droid Sans';
+}
+
+#search:focus {
+    outline: none;
+    border-color: #900;
+}
+
 /* Table */ /* We should use nav and ul li for collapsing details */
 nav {
     width: 980px;
diff --git a/index.html b/index.html
index 16a277b..f06a29e 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <script type="text/javascript" src="javascripts/modernizr.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="javascripts/headsmart.min.js"></script>
+    <script type="text/javascript" src="javascripts/search.js"></script>
     <script type="text/javascript">
       $(document).ready(function () {
         $('#main_content').headsmart()
diff --git a/js/search.js b/js/search.js
new file mode 100644
index 0000000..0411dce
--- /dev/null
+++ b/js/search.js
@@ -0,0 +1,25 @@
+$(document).ready(function(){
+	$("input#search").keyup(function(){
+		var query = $(this).val();
+		if (!query) {
+			$("#comparisonTable div.parent").show();
+			$("#noSearch").hide();
+			return;
+		}
+		var regex = new RegExp(query, "ig"), count = 0;
+		$("#comparisonTable div.parent:not(#noSearch)").each(function(){
+			if ($(this).text().search(regex) < 0) {
+				$(this).hide();
+			} else {
+				$(this).show();
+				count += 1
+			}
+		});
+		if (count == 0) {
+			$("#noSearch span").text(query)
+			$("#noSearch").show();
+		} else {
+			$("#noSearch").hide();
+		}
+	});
+});
\ No newline at end of file

From e0e082fa798e5f54f8db3049e60ba6fd9b9f63b6 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 09:57:33 -0600
Subject: [PATCH 2/6] style tweak

---
 css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 13873d3..f424f34 100644
--- a/css/style.css
+++ b/css/style.css
@@ -149,7 +149,7 @@ section p:last-child {
 
 #search {
     width: 100%;
-    margin-top: 5px;
+    margin-top: 20px;
     font-size: 16px;
     line-height: 25px;
     font-family: 'Droid Sans';

From 14c722cb255160f0511aa286639f218657a8aa60 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 09:59:14 -0600
Subject: [PATCH 3/6] placeholder tweak

---
 compare.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compare.html b/compare.html
index c689629..2c0251c 100644
--- a/compare.html
+++ b/compare.html
@@ -45,7 +45,7 @@
         
         <section>
             <div class="search">
-                <input type="text" placeholder="Search" id="search">
+                <input type="text" placeholder="Search Frontend Frameworks" id="search">
             </div>
         </section>
 

From aed6172b88cd492b05dff2216aa7799b071cf639 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 10:00:34 -0600
Subject: [PATCH 4/6] Softer outline

---
 css/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index f424f34..569599e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -156,8 +156,8 @@ section p:last-child {
 }
 
 #search:focus {
-    outline: none;
-    border-color: #900;
+    outline: auto 5px #900;
+    outline-offset: -2px;
 }
 
 /* Table */ /* We should use nav and ul li for collapsing details */

From 216c2a69acefe710af136f28cd424559d69e0035 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 10:01:19 -0600
Subject: [PATCH 5/6] cleaning up

---
 css/style.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 569599e..7a5afec 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,12 +141,11 @@ section p:last-child {
     top: 50%;
 	margin-top: -7px;
 }
-
+/* Search */
 #noSearch {
     display: none;
     text-align: center;
 }
-
 #search {
     width: 100%;
     margin-top: 20px;
@@ -154,12 +153,10 @@ section p:last-child {
     line-height: 25px;
     font-family: 'Droid Sans';
 }
-
 #search:focus {
     outline: auto 5px #900;
     outline-offset: -2px;
 }
-
 /* Table */ /* We should use nav and ul li for collapsing details */
 nav {
     width: 980px;

From db2089bb939f6459f948a7c917e4f9f73d5f38f9 Mon Sep 17 00:00:00 2001
From: Joah Gerstenberg <joahd@gbergfamily.com>
Date: Sat, 14 Dec 2013 10:04:34 -0600
Subject: [PATCH 6/6] didn't mean to add this xD

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index f06a29e..16a277b 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,6 @@
     <script type="text/javascript" src="javascripts/modernizr.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="javascripts/headsmart.min.js"></script>
-    <script type="text/javascript" src="javascripts/search.js"></script>
     <script type="text/javascript">
       $(document).ready(function () {
         $('#main_content').headsmart()