diff --git a/Assignment/Homework_2 - CSS_ResponsiveDesign/~$structions HW2 Responsive_Design.docx b/Assignment/Homework_2 - CSS_ResponsiveDesign/~$structions HW2 Responsive_Design.docx deleted file mode 100644 index 37240c4..0000000 Binary files a/Assignment/Homework_2 - CSS_ResponsiveDesign/~$structions HW2 Responsive_Design.docx and /dev/null differ diff --git a/Labs/Lab 9 - Flask/.spyderworkspace b/Labs/Lab 9 - Flask/.spyderworkspace new file mode 100644 index 0000000..be24de3 Binary files /dev/null and b/Labs/Lab 9 - Flask/.spyderworkspace differ diff --git a/Labs/Lab 9 - Flask/app/__init__.py b/Labs/Lab 9 - Flask/app/__init__.py new file mode 100644 index 0000000..9a4e940 --- /dev/null +++ b/Labs/Lab 9 - Flask/app/__init__.py @@ -0,0 +1,4 @@ +from flask import Flask + +myapp = Flask(__name__) +from app import views diff --git a/Labs/Lab 9 - Flask/app/__init__.pyc b/Labs/Lab 9 - Flask/app/__init__.pyc new file mode 100644 index 0000000..4d4e5ad Binary files /dev/null and b/Labs/Lab 9 - Flask/app/__init__.pyc differ diff --git a/Labs/Lab 9 - Flask/app/__pycache__/__init__.cpython-35.pyc b/Labs/Lab 9 - Flask/app/__pycache__/__init__.cpython-35.pyc new file mode 100644 index 0000000..0da93b9 Binary files /dev/null and b/Labs/Lab 9 - Flask/app/__pycache__/__init__.cpython-35.pyc differ diff --git a/Labs/Lab 9 - Flask/app/__pycache__/views.cpython-35.pyc b/Labs/Lab 9 - Flask/app/__pycache__/views.cpython-35.pyc new file mode 100644 index 0000000..77a3dfa Binary files /dev/null and b/Labs/Lab 9 - Flask/app/__pycache__/views.cpython-35.pyc differ diff --git a/Labs/Lab 9 - Flask/app/static/interactions.js b/Labs/Lab 9 - Flask/app/static/interactions.js new file mode 100644 index 0000000..04c7724 --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/Labs/Lab 9 - Flask/app/static/main.css b/Labs/Lab 9 - Flask/app/static/main.css new file mode 100644 index 0000000..ccd8971 --- /dev/null +++ b/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; +} + diff --git a/Labs/Lab 9 - Flask/app/templates/base.html b/Labs/Lab 9 - Flask/app/templates/base.html new file mode 100644 index 0000000..ffba46d --- /dev/null +++ b/Labs/Lab 9 - 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 9 - Flask/app/templates/login.html b/Labs/Lab 9 - Flask/app/templates/login.html new file mode 100644 index 0000000..8a75cea --- /dev/null +++ b/Labs/Lab 9 - Flask/app/templates/login.html @@ -0,0 +1,18 @@ +{% 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 9 - Flask/app/templates/not_authorized.html b/Labs/Lab 9 - Flask/app/templates/not_authorized.html new file mode 100644 index 0000000..0baeb84 --- /dev/null +++ b/Labs/Lab 9 - 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 9 - Flask/app/templates/page_not_found.html b/Labs/Lab 9 - Flask/app/templates/page_not_found.html new file mode 100644 index 0000000..2dacddb --- /dev/null +++ b/Labs/Lab 9 - 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 9 - Flask/app/templates/results.html b/Labs/Lab 9 - Flask/app/templates/results.html new file mode 100644 index 0000000..a40bad4 --- /dev/null +++ b/Labs/Lab 9 - Flask/app/templates/results.html @@ -0,0 +1,34 @@ +{% 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 gender is {{ surveyResponse['gender']}} + Your favorite color is {{ surveyResponse['color']}} + Your favorite food is {{ surveyResponse['food']}} + Your favorite vacation spot is {{ surveyResponse['vacation']}} + Your favorite I School course is {{ surveyResponse['ISchoolClass']}} + +

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']}} + +
+ Want your survey results emailed to you? + Yes! +
+
+{% endblock %} diff --git a/Labs/Lab 9 - Flask/app/templates/survey.html b/Labs/Lab 9 - Flask/app/templates/survey.html new file mode 100644 index 0000000..35f2d14 --- /dev/null +++ b/Labs/Lab 9 - Flask/app/templates/survey.html @@ -0,0 +1,40 @@ +{% 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

+

+ Gender:
+ Male
+ Female
+ Other
+
+ + + + + + +

Let's look at your front end skillz progression

+ + + + +
+{% endblock %} diff --git a/Labs/Lab 9 - Flask/app/views.py b/Labs/Lab 9 - Flask/app/views.py new file mode 100644 index 0000000..eeb5a93 --- /dev/null +++ b/Labs/Lab 9 - Flask/app/views.py @@ -0,0 +1,51 @@ +from app import myapp +from flask import request, render_template, session, redirect, url_for, escape +import os + +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 = '' + if 'username' in session: + username = escape(session['username']) + email = escape(session['email']) + surveyResponse = {} + surveyResponse['gender'] = request.form.get('gender') + surveyResponse['color'] = request.form.get('color') + surveyResponse['food'] = request.form.get('food') + surveyResponse['vacation'] = request.form.get('vacation') + surveyResponse['ISchoolClass'] = request.form.get('ISchoolClass') + surveyResponse['fe-before'] = request.form.get('feBefore') + surveyResponse['fe-after'] = request.form.get('feAfter') + 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 9 - Flask/app/views.pyc b/Labs/Lab 9 - Flask/app/views.pyc new file mode 100644 index 0000000..259c8d1 Binary files /dev/null and b/Labs/Lab 9 - Flask/app/views.pyc differ diff --git a/Labs/Lab 9 - Flask/run.py b/Labs/Lab 9 - Flask/run.py new file mode 100644 index 0000000..dae9904 --- /dev/null +++ b/Labs/Lab 9 - Flask/run.py @@ -0,0 +1,3 @@ +#!flask/bin/python +from app import myapp +myapp.run(debug=True,host='0.0.0.0') diff --git a/Labs/Lab_5-Javascript_Basics/js-basics.js b/Labs/Lab_5-Javascript_Basics/js-basics.js index 1c6ae71..7863086 100644 --- a/Labs/Lab_5-Javascript_Basics/js-basics.js +++ b/Labs/Lab_5-Javascript_Basics/js-basics.js @@ -6,6 +6,21 @@ // 1. Include 'alt' and 'src' as keys within each of the 3 objects - values should correspond to the cat's name and img source (you can re-use name and URLs from the existing cat elements in the HTML) // 2. Put these 3 objects into an array - you can do this programmatically or hard-coded // 3. We created the handler for the 'Cats from Obj' button in the HTML. Use the function below to trigger. +var cat1 = { + src: "https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png", + alt: "meow1" +} + + +var cat2 = { + src: "https://pbs.twimg.com/profile_images/447460759329460224/mt2UmwGG_400x400.jpeg", + alt: "meow2" +} + +cat_array = [cat1,cat2] + +console.log(cat_array) + function populateFromObj() { // 1. Iterate through each 'cat' object in the list you created above @@ -17,7 +32,23 @@ function populateFromObj() { // e) set the p element's innerHTML to the 'alt' value of the object // f) append the img and p elements to the div from step a // g) append the div element to the parent container - + for (var i = 0; i < cat_array.length; i++){ + var newDiv = document.createElement("div"); + newDiv.className += "id-grid_item" + //console.log(newDiv) + var newImg = document.createElement("img"); + var imgSrc = cat_array[i].src; + var imgAlt = cat_array[i].alt; + + newImg.setAttribute("src", imgSrc); + newImg.setAttribute("alt", imgAlt); + + newDiv.appendChild(newImg); + + var mainContainer = document.getElementsByClassName("main-container")[0]; + console.log(mainContainer) + mainContainer.appendChild(newDiv); + } // *** Hints: // .createElement() // .setAttribute()