Add error page

Make HBS template for page. Issue #3
CodeWritingCow · Dec 31, 2017 · 720cbec · 720cbec
1 parent 3af6b43
commit 720cbec
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/...ic/assets/img/making-waffles-cutting-them-into-pieces-picjumbo-com-1024x683.jpg b/...ic/assets/img/making-waffles-cutting-them-into-pieces-picjumbo-com-1024x683.jpg
diff --git a/server.js b/server.js
@@ -94,9 +94,6 @@ app.post('/search', (req, res) => {
 	// Merge query strings. Exclude undefined query strings.
 	var urlQuery = querystring.stringify(_.merge(data));
 
-	// console.log(urlQuery);
-	// console.log(`${socrataUrl}?${socrataQuery + "&" + urlQuery}`);
-
 	if (zipcode.length > 0 && zipcode.length !== 5) {
 		return res.render("search.hbs", {errorMessage: `ERROR: Zip code should have 5 digits. You put in ${zipcode.length}`});
 	}
@@ -122,7 +119,14 @@ app.post('/search', (req, res) => {
 			}	
 
 		} else {
-			return error;
+			// console.log('error:', error); // Print the error if one occurred
+			// console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
+			// console.log('body:', body); // Print the HTML for the Google homepage.
+			res.status(response.statusCode);
+			res.render("error.hbs", {
+				pageTitle: 'Something went wrong!',
+				errorMessage: 'There seems to be an error. Let\'s go home and try something else.'
+			});
 		}
 	});
 });

diff --git a/views/error.hbs b/views/error.hbs
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Error</title>
+		<!-- Compiled and minified CSS -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+		<!--Import Google Icon Font-->    
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <!--Let browser know website is optimized for mobile-->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <style>
+			body {
+				display: flex;
+				min-height: 100vh;
+				flex-direction: column;
+			}
+
+			main {
+				flex: 1 0 auto;
+			}
+        </style>           
+    </head>
+    <body>
+    	{{> header}}
+    	<main class="parallax-container" style="padding: 30px;">
+    		<div class="parallax"><img src="/public/assets/img/making-waffles-cutting-them-into-pieces-picjumbo-com-1024x683.jpg" alt="Making and cutting waffles. Photo by picjumbo.com">
+    		</div>
+			    <h1 class="center">{{pageTitle}}</h1>
+	    		<div class="row center">
+				    <h5>{{errorMessage}}</h5>    			
+	    		</div>
+	    		<div class="row center">
+	    			<a href="/" class="btn-large waves-effect">GO HOME <i class="material-icons right">home</i></a>
+	    		</div>
+    	</main>
+    	{{> footer}}
+    </body>
+
+	<!-- Compiled and minified JavaScript -->
+	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+	<script>
+		 $(document).ready(function() {
+		    $('select').material_select();
+		    $(".button-collapse").sideNav();
+		    $('.parallax').parallax();
+		  });
+    </script>
+</html>