Lab 9 branch

Labs/Lab 9 - Flask/app/__init__.py

@@ -0,0 +1,4 @@
+from flask import Flask
+
+myapp = Flask(__name__)
+from app import views

Labs/Lab 9 - Flask/app/static/interactions.js

@@ -0,0 +1,43 @@
+$('#submit-survey').on('click', function submitSurvey() {
+	var gender = $("input[name=gender]").val();
+	var color = $("input[name=color]").val();
+	var food = $("input[name=food]").val();
+	var vacation = $("input[name=vacation]").val();
+	var ISchoolClass = $("input[name=ISchoolClass]").val();
+	var feBefore = $("input[name=front-end-before]").val();
+	var feAfter = $("input[name=front-end-after]").val();
+		$.post("submit-survey",
+		{
+		gender: gender,
+		color: color,
+		food: food,
+		vacation: vacation,
+		ISchoolClass: ISchoolClass,
+		feBefore: feBefore,
+		feAfter: feAfter},
+		function(data) {
+			$("html").html(data);
+		})
+});
+
+$("#results-email-container").on('click', '#email-results-button', function emailResults() {
+	console.log($(this));
+});
+
+$("#site-title-wrapper").on('click', function goHome() {
+	window.location.href = '/';
+});
+
+$(document).ready(function applySliderLabels() {
+	var currentValue = $("#fe-before").val();
+	$("#fe-before").next().html(currentValue);
+
+	currentValue = $("#fe-after").val();
+	$("#fe-after").next().html(currentValue);
+});
+
+
+$("input[type='range']").on('change', function updateLabel() {
+	var currentValue = $(this).val();
+	$(this).next().html(currentValue);
+});

Labs/Lab 9 - Flask/app/static/main.css

@@ -0,0 +1,225 @@
+/*----------------- CSS RESET ------------------*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*----------------- CSS RESET ------------------*/
+
+html, body {
+	background-color: #f9f9f9;
+	font-family: 'Open Sans', sans-serif;
+	font-size: 16px;
+}
+
+header {
+	background-color: #1abc9c;
+	box-shadow: 0 2px 6px 1px #a7a7a7;
+	color: #ecf0f1;
+	height: 5rem;
+}
+
+footer {
+	background-color: #16a085;
+	bottom: 0;
+	color: #ecf0f1;
+	height: 7rem;
+	margin-top: 2em;
+	text-align: center;
+	width: 100%;
+}
+
+footer p {
+	height: 7rem;
+	line-height: 7rem;
+}
+
+h1, h3 {
+	padding: 4px;
+}
+
+h1 {
+	font-size: 2rem;
+	font-weight: bold;
+}
+
+h3 {
+	font-size: 1.4rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+input[type="text"], input[type="range"] {
+	border: 1px solid #bdc3c7;
+	border-radius: 2px;
+	margin-left: 1rem;
+	vertical-align: middle;
+}
+
+input[type=range]{
+    -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+    border: none;
+    height: 1.2rem;
+    width: 1.2rem;
+    border-radius: 50%;
+    background: #1abc9c;
+    margin-top: -.5rem;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    background: #ccc;
+    height: .2rem;
+}
+
+.action-button {
+	background-color: #1abc9c;
+	border: none;
+	border-bottom: 3px solid #16a085;
+	border-radius: 2px;
+	color: #ecf0f1;
+	display: inline-block;
+	font-size: 1rem;
+	font-weight: bold;
+	height: 3rem;
+	padding: 4px;
+	width: 6rem;
+}
+
+.action-button:hover {
+	background-color: #16a085;
+}
+
+#site-title-wrapper {
+	display: inline-block;
+	height: 5rem;
+	width: 15%;
+}
+
+#site-icon-wrapper {
+	display: inline-block;
+	margin-left: 1rem;
+	margin-top: -.5rem;
+	vertical-align: middle;
+	width: 2.5rem;
+}
+
+#site-icon-wrapper img {
+	display: inline-block;
+	max-height: 100%;
+	max-width: 100%
+}
+
+#site-title {
+	display: inline-block;
+	font-weight: bold;
+	height: 5rem;
+	line-height: 5rem;
+	margin-left: .1rem;
+}
+
+#username {
+	margin-right: .7rem;
+}
+
+#logout {
+	float: right;
+	height: inherit;
+	line-height: 5rem;
+	margin-right: 1rem;
+}
+
+#logout-button {
+	background-color: #ecf0f1;
+	border-bottom-color: #bdc3c7;
+	color: #222222;
+	height: 2.5rem;
+	width: 5rem;
+}
+
+#logout-button:hover {
+	background-color: #bdc3c7;
+}
+
+#content {
+	margin-top: 2rem;
+	text-align: center;
+	width: 100%;	
+}
+
+.main-container {
+	background: #ecf0f1;
+	border-radius: 4px;
+	box-shadow: 0px 2px 10px 2px #95a5a6;
+	display: block;
+	min-height: 50vh;
+	margin: 2rem 0 0 25%;
+	padding: 1rem;
+	text-align: left;
+	width: 50%;
+}
+
+.survey-item, .result-item, #results-email-container {
+	box-sizing: border-box;
+	display: block;
+	margin: 1.5rem 0;
+	padding: 4px;
+}
+
+.survey-item span {
+	font-size: 1rem;
+	margin-left: 1rem;
+}
+
+#email-results-button, #goHome {
+	height: 2rem;
+	line-height: 2rem;
+	margin-left: 1rem;
+	text-align: center;
+}
+

Labs/Lab 9 - Flask/app/templates/base.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>{% block title %}{% endblock %} - Ape Ask</title>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+		<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
+		{% block styles %}{% endblock %}
+	</head>
+
+	<body>
+
+		<header>
+			{% block header %}
+			<div id="site-title-wrapper">
+				<div id="site-icon-wrapper">
+					<img src="http://icons.iconarchive.com/icons/iconsmind/outline/512/Gorilla-icon.png">
+				</div>
+				<h3 id="site-title">Ape Ask</h3>
+			</div>
+			{% endblock %}
+		</header>
+		<div id="content">{% block content %}{% endblock %}</div>
+
+		<footer>
+			<p>&copy; Copyright 2016 Ape Ask, all rights reserved</p>
+		</footer>
+
+		<script type="text/javascript" src="{{ url_for('static', filename='interactions.js') }}"></script>
+	</body>
+</html>

Labs/Lab 9 - Flask/app/templates/login.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block title %}
+	Login
+{% endblock %}
+
+
+{% block content %}
+<h1>Hi There! Welcome to Ape Ask, the leading online survey site.</h1>
+<div class="main-container">
+	<h3>Let's get you logged in</h3>
+	<form action="login" method='post'>
+	<label for = "username">Username</label> <input type = "text" name = "username"></input>
+	<label for = "email">Email</label> <input type = "text" name = "email"></input>
+		<input class="action-button" id="login" type="submit" value="Submit">
+	</form>
+</div>
+{% endblock %}

Labs/Lab 9 - Flask/app/templates/not_authorized.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Oops!</title>
+	</head>
+	<body>
+		<h1>Uh Oh! You're not authorized</h1>
+		<img src="https://cammy-marketing.s3.amazonaws.com/2015/03/1425373005/safe-cracking-burglar.jpg">
+		<br>
+		<a href="/">Take me back home, already!</a>
+	</body>
+</html>

Labs/Lab 9 - Flask/app/templates/page_not_found.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}
+	Oops!
+{% endblock %}
+
+{% block content %}
+	<h1>Oh, Pooh Bear! You're stuck because we don't have that page for you.</h1>
+	<img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2013/08/winnie-the-pooh-stuck-in-rabbits-house.jpg">
+	<br>
+	<a class="action-button" id="goHome" href="/">Go back!</a>
+{% endblock %}

Labs/Lab 9 - Flask/app/templates/results.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block title %}
+	Survey
+{% endblock %}
+
+{% block header %}
+	{{ super() }}
+	<form action="logout" id="logout">
+		<span id="username">Logged in as {{ name }}</span>
+		<input class="action-button" id="logout-button" type="submit" value="Logout">
+	</form>
+{% endblock %}
+
+{% block content %}
+	<h1>Great news - your results are in! Check it out...</h1>
+	<div class="main-container">
+		<h3>Here are some of your favorite things</h3>
+		<span class="result-item">Your gender is {{ surveyResponse['gender']}}</span>
+		<span class="result-item">Your favorite color is {{ surveyResponse['color']}}</span>
+		<span class="result-item">Your favorite food is {{ surveyResponse['food']}}</span>
+		<span class="result-item">Your favorite vacation spot is {{ surveyResponse['vacation']}}</span>
+		<span class="result-item">Your favorite I School course is {{ surveyResponse['ISchoolClass']}}</span>
+
+		<h3>Wow! Your front end skillz are getting sharp!</h3>
+		<span class="result-item">Before IO Lab, your front end skillz were at a {{ surveyResponse['fe-before']}}</span>
+		<span class="result-item">But in just a few short weeks of IO Lab, your front end skillz are now a {{ surveyResponse['fe-after']}}</span>
+
+		<div id="results-email-container">
+			<span>Want your survey results emailed to you?</span>
+			<a class="action-button" id="email-results-button" href="mailto:{{ email }}?subject={{ name }}'s Ape Ask Survey Results&amp;body={{ surveyResponse }}">Yes!</a>
+		</div>
+	</div>
+{% endblock %}