diff --git a/Labs/.DS_Store b/Labs/.DS_Store new file mode 100644 index 0000000..fafaf41 Binary files /dev/null and b/Labs/.DS_Store differ diff --git a/Labs/Lab_Flask/app/.DS_Store b/Labs/Lab_Flask/app/.DS_Store new file mode 100644 index 0000000..9ff4790 Binary files /dev/null and b/Labs/Lab_Flask/app/.DS_Store differ diff --git a/Labs/Lab_Flask/app/__init__.py b/Labs/Lab_Flask/app/__init__.py new file mode 100755 index 0000000..9a4e940 --- /dev/null +++ b/Labs/Lab_Flask/app/__init__.py @@ -0,0 +1,4 @@ +from flask import Flask + +myapp = Flask(__name__) +from app import views diff --git a/Labs/Lab_Flask/app/__init__.pyc b/Labs/Lab_Flask/app/__init__.pyc new file mode 100755 index 0000000..4d4e5ad Binary files /dev/null and b/Labs/Lab_Flask/app/__init__.pyc differ diff --git a/Labs/Lab_Flask/app/__pycache__/__init__.cpython-35.pyc b/Labs/Lab_Flask/app/__pycache__/__init__.cpython-35.pyc new file mode 100644 index 0000000..8fdf5b8 Binary files /dev/null and b/Labs/Lab_Flask/app/__pycache__/__init__.cpython-35.pyc differ diff --git a/Labs/Lab_Flask/app/__pycache__/views.cpython-35.pyc b/Labs/Lab_Flask/app/__pycache__/views.cpython-35.pyc new file mode 100644 index 0000000..f624f53 Binary files /dev/null and b/Labs/Lab_Flask/app/__pycache__/views.cpython-35.pyc differ diff --git a/Labs/Lab_Flask/app/static/interactions.js b/Labs/Lab_Flask/app/static/interactions.js new file mode 100755 index 0000000..bc8386b --- /dev/null +++ b/Labs/Lab_Flask/app/static/interactions.js @@ -0,0 +1,38 @@ +$('#submit-survey').on('click', function submitSurvey() { + var color = $("input[name=color]").val(); + var food = $("input[name=food]").val(); + var vacation = $("input[name=vacation]").val(); + var feBefore = $("input[name=front-end-before]").val(); + var feAfter = $("input[name=front-end-after]").val(); + $.post("submit-survey", + {color: color, + food: food, + vacation: vacation, + 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); +}); \ No newline at end of file diff --git a/Labs/Lab_Flask/app/static/main.css b/Labs/Lab_Flask/app/static/main.css new file mode 100755 index 0000000..d5f7b1b --- /dev/null +++ b/Labs/Lab_Flask/app/static/main.css @@ -0,0 +1,231 @@ +/*----------------- 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; +} + +#mean-girls-gif { + display: block; + margin-left: auto; + margin-right: auto; +} + diff --git a/Labs/Lab_Flask/app/templates/.DS_Store b/Labs/Lab_Flask/app/templates/.DS_Store new file mode 100644 index 0000000..6ef9ee8 Binary files /dev/null and b/Labs/Lab_Flask/app/templates/.DS_Store differ diff --git a/Labs/Lab_Flask/app/templates/base.html b/Labs/Lab_Flask/app/templates/base.html new file mode 100755 index 0000000..eb802bc --- /dev/null +++ b/Labs/Lab_Flask/app/templates/base.html @@ -0,0 +1,33 @@ + + + + + + {% block title %}{% endblock %} - Ape Ask + + + + {% block styles %}{% endblock %} + + + + +
+ {% block header %} +
+
+ +
+

Ape Ask

+
+ {% endblock %} +
+
{% block content %}{% endblock %}
+ + + + + + \ No newline at end of file diff --git a/Labs/Lab_Flask/app/templates/login.html b/Labs/Lab_Flask/app/templates/login.html new file mode 100755 index 0000000..971b427 --- /dev/null +++ b/Labs/Lab_Flask/app/templates/login.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} +{% block title %} + Login +{% endblock %} + +{% block content %} +

Hi There! Welcome to Ape Ask, the leading online survey site.

+
+

Let's get you logged in

+
+ + + +
+
+{% endblock %} \ No newline at end of file diff --git a/Labs/Lab_Flask/app/templates/not_authorized.html b/Labs/Lab_Flask/app/templates/not_authorized.html new file mode 100755 index 0000000..99a0c25 --- /dev/null +++ b/Labs/Lab_Flask/app/templates/not_authorized.html @@ -0,0 +1,13 @@ + + + + + Oops! + + +

Uh Oh! You're not authorized

+ +
+ Take me back home, already! + + \ No newline at end of file diff --git a/Labs/Lab_Flask/app/templates/page_not_found.html b/Labs/Lab_Flask/app/templates/page_not_found.html new file mode 100755 index 0000000..dadcc99 --- /dev/null +++ b/Labs/Lab_Flask/app/templates/page_not_found.html @@ -0,0 +1,12 @@ +{% extends "base.html" %} + +{% block title %} + Oops! +{% endblock %} + +{% block content %} +

Oh, Pooh Bear! You're stuck because we don't have that page for you.

+ +
+ Go back! +{% endblock %} \ No newline at end of file diff --git a/Labs/Lab_Flask/app/templates/results.html b/Labs/Lab_Flask/app/templates/results.html new file mode 100755 index 0000000..f28ad5b --- /dev/null +++ b/Labs/Lab_Flask/app/templates/results.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} + +{% block title %} + Survey +{% endblock %} + +{% block header %} + {{ super() }} +
+ Logged in as {{ name }} + +
+{% endblock %} + +{% block content %} +

Great news - your results are in! Check it out...

+
+

Here are some of your favorite things

+ Your favorite color is {{ surveyResponse['color']}} + Your favorite food is {{ surveyResponse['food']}} + Your favorite vacation spot is {{ surveyResponse['vacation']}} + +

Wow! Your front end skillz are getting sharp!

+ Before IO Lab, your front end skillz were at a {{ surveyResponse['fe-before']}} + But in just a few short weeks of IO Lab, your front end skillz are now a {{ surveyResponse['fe-after']}} + + + +
+ Thanks for filling out the survey, here's a Mean Girls gif to brighten up your day! +
+ +
+
+ +
+{% endblock %} \ No newline at end of file diff --git a/Labs/Lab_Flask/app/templates/survey.html b/Labs/Lab_Flask/app/templates/survey.html new file mode 100755 index 0000000..166e68f --- /dev/null +++ b/Labs/Lab_Flask/app/templates/survey.html @@ -0,0 +1,31 @@ +{% extends "base.html" %} +{% block title %} + Survey +{% endblock %} + + +{% block header %} + {{super()}} +
+ Logged in as {{ name }} + +
+{% endblock %} + +{% block content %} +

A Little Survey About You

+
+

Some of your favorites

+ + + + +

Let's look at your front end skillz progression

+ + + + +
+{% endblock %} \ No newline at end of file diff --git a/Labs/Lab_Flask/app/views.py b/Labs/Lab_Flask/app/views.py new file mode 100755 index 0000000..f288d9d --- /dev/null +++ b/Labs/Lab_Flask/app/views.py @@ -0,0 +1,60 @@ +from app import myapp +from flask import request, render_template, session, redirect, url_for, escape +import os +import requests +import json + + +myapp.secret_key = os.urandom(24) + +@myapp.route('/') +@myapp.route('/index') +def index(): + username = '' + if 'username' in session: + username = escape(session['username']) + return render_template('survey.html', name=username) + else: + return render_template('login.html') + +@myapp.route('/login', methods=['GET', 'POST']) +def login(): + if request.method=='POST': + session['username'] = request.form.get("username") + session['email'] = request.form.get("email") + return redirect(url_for('index')) + +@myapp.route('/logout') +def logout(): + session.pop('username', None) + session.pop('email', None) + return redirect(url_for('index')) + +@myapp.route('/submit-survey', methods=['GET', 'POST']) +def submitSurvey(): + username = '' + email = '' + giphy_api = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=mean+girls' + response = requests.get(giphy_api) + response_json = json.loads(response.text) + gif_url = response_json['data']['fixed_width_downsampled_url'] + print(gif_url) + + + if 'username' in session: + username = escape(session['username']) + email = escape(session['email']) + surveyResponse = {} + surveyResponse['color'] = request.form.get('color') + surveyResponse['food'] = request.form.get('food') + surveyResponse['vacation'] = request.form.get('vacation') + surveyResponse['fe-before'] = request.form.get('feBefore') + surveyResponse['fe-after'] = request.form.get('feAfter') + surveyResponse['gif'] = gif_url + return render_template('results.html', name=username, email=email, surveyResponse=surveyResponse) + else: + return render_template('login.html') + +@myapp.errorhandler(404) +def page_not_found(error): + return render_template('page_not_found.html'), 404 \ No newline at end of file diff --git a/Labs/Lab_Flask/app/views.pyc b/Labs/Lab_Flask/app/views.pyc new file mode 100755 index 0000000..259c8d1 Binary files /dev/null and b/Labs/Lab_Flask/app/views.pyc differ diff --git a/Labs/Lab_Flask/run.py b/Labs/Lab_Flask/run.py new file mode 100755 index 0000000..dae9904 --- /dev/null +++ b/Labs/Lab_Flask/run.py @@ -0,0 +1,3 @@ +#!flask/bin/python +from app import myapp +myapp.run(debug=True,host='0.0.0.0')