diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..3f0a6ca Binary files /dev/null and b/.DS_Store differ diff --git a/Assignment/.DS_Store b/Assignment/.DS_Store new file mode 100644 index 0000000..6ca4d2b Binary files /dev/null and b/Assignment/.DS_Store differ diff --git a/Assignment/HW4_Soundcloud/index.html b/Assignment/HW4_Soundcloud/index.html new file mode 100644 index 0000000..785d444 --- /dev/null +++ b/Assignment/HW4_Soundcloud/index.html @@ -0,0 +1,32 @@ + + + + + Anna's Soundcloud + + + + + +
+ Soundcloud Logo +
+
+ + + +
+
+

Search Results

+
+
+ +
+

Playlist

+
+
+ + + + + \ No newline at end of file diff --git a/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js b/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js index dbd277e..14929fa 100644 --- a/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js +++ b/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js @@ -1,11 +1,20 @@ -// Event hander for calling the SoundCloud API using the user's search query -function callAPI(query) { +//FFBB97, F69875, FF5701, FDD0C0, FE712F +function callAPI(query) { // Takes in the user's input as argument, 'query', and returns the first 20 search results. $.get("https://api.soundcloud.com/tracks?client_id=b3179c0738764e846066975c2571aebb", {'q': query, 'limit': '200'}, function(data) { - // PUT IN YOUR CODE HERE TO PROCESS THE SOUNDCLOUD API'S RESPONSE OBJECT - // HINT: CREATE A SEPARATE FUNCTION AND CALL IT HERE + for (i = 0; i < 20; i++) { // First 20 search results + var art = data[i]['artwork_url']; // artwork url + if (art == null) { // Default artwork + art = 'http://ichef.bbci.co.uk/news/624/cpsprodpb/7402/production/_91389692_ctrdewvumaalgc_.jpg' + } + var artwork = "Album Artwork"; + var title = data[i]['title']; + var playURL = data[i]['permalink_url']; + + $('#list_results').append("
" + artwork + "" + title + "
"); + } },'json' ); } @@ -24,4 +33,43 @@ function changeTrack(url) { }); } +$(document).ready( // When user clicks "Go!" button, a task is added a search is started + $("#search-button").on('click', function() { + // once the document loads, create new item with this function + $('#list_results').empty(); + var user_input = $('#search_box').val(); + if (user_input != "") { + callAPI(user_input); // calls the search. + } + }) +); +$("#list_results").on('click', "#addButton", function() { // When user clicks "Add to Playlist" button, task is added to Playlist. + var copy = $(this).parent().clone(); + $(copy).children('#addButton').html('Remove'); // Adds 'Remove' button to each song added to the playlist. + $(copy).append(""); // Adds up and down buttons. + $("#list_playlist").prepend(copy); +}); + +$("#list_results").on('click', "#playButton", function() { // When user clicks "Play" button, song will play (from search results). + var songURL = $(this).attr('data-url'); + changeTrack(songURL); +}); + +$("#list_playlist").on('click', "#playButton", function() { // When user clicks "Play" button, song will play (from playlist). + var songURL = $(this).attr('data-url'); + changeTrack(songURL); +}); + + +$("#list_playlist").on('click', "#addButton", function() { // When user clicks "Remove" button, removes from playlist. + $(this).parent().remove(); +}); + +$("#list_playlist").on('click', ".up", function() { // When user clicks "up" button, song is moved up in playlist. + $(this).parent().insertBefore($(this).parent().prev()); +}); + +$("#list_playlist").on('click', ".down", function() { // When user clicks "down" button, song is moved down in playlist. + $(this).parent().insertAfter($(this).parent().next()); +}); \ No newline at end of file diff --git a/Assignment/HW4_Soundcloud/style.css b/Assignment/HW4_Soundcloud/style.css new file mode 100644 index 0000000..b3f24db --- /dev/null +++ b/Assignment/HW4_Soundcloud/style.css @@ -0,0 +1,108 @@ +/* Add CSS */ +body { + background-color: #FF3500; +} + +img { + width: 25%; + height: auto; + display: block; + margin: auto; +} + +h2 { + font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; + text-align: center; + color: white; + display: inline-block; + width: 100%; +} + +input[type='text'] { + font-size: 24px; +} + +li { + font-size: medium; + font-family: 'Roboto', sans-serif; + width: 75%; + margin-left: 16%; + margin-right: 16%; +} + +/*.each-result button { + float: right; + margin-top: 20px; +}*/ + +#playButton { + float: right; + width: 7%; +} + +#addButton { + float: right; + width: 12%; +} + +.up, .down { + float: right; +} + +.search { + text-align: center; +} + +.search input { + width: 85%; +} + +#search-button { + width: 10%; + font-size: 20px; +} + +.album-art { + display: inline-block; + width: 20%; +} + +.album-art img { + width: 50%; +} + +.song { + display: inline-block; + width: 40%; + color: white; + padding-bottom: 20px; +} + +.each-result { + border: 1px solid #FDD0C0; + width: 100%; +} + +#all_songs_container { + margin-top: 20px; + border: 1px solid white; + width: 48%; + float: left; + background-color: black; +} + +#playlist_container { + margin-top: 20px; + border: 1px solid white; + width: 48%; + float: right; + background-color: black; +} + +#list_results { + width: 100%; +} + +#list_playlist { + width: 100%; +} \ No newline at end of file diff --git a/Labs/.DS_Store b/Labs/.DS_Store new file mode 100644 index 0000000..8287b5d Binary files /dev/null and b/Labs/.DS_Store differ diff --git a/Labs/flaskLab2.zip b/Labs/flaskLab2.zip new file mode 100644 index 0000000..29f66dc Binary files /dev/null and b/Labs/flaskLab2.zip differ diff --git a/Labs/flaskLab2/.spyderworkspace b/Labs/flaskLab2/.spyderworkspace new file mode 100755 index 0000000..be24de3 Binary files /dev/null and b/Labs/flaskLab2/.spyderworkspace differ diff --git a/Labs/flaskLab2/app/__init__.py b/Labs/flaskLab2/app/__init__.py new file mode 100755 index 0000000..9a4e940 --- /dev/null +++ b/Labs/flaskLab2/app/__init__.py @@ -0,0 +1,4 @@ +from flask import Flask + +myapp = Flask(__name__) +from app import views diff --git a/Labs/flaskLab2/app/__init__.pyc b/Labs/flaskLab2/app/__init__.pyc new file mode 100755 index 0000000..4d4e5ad Binary files /dev/null and b/Labs/flaskLab2/app/__init__.pyc differ diff --git a/Labs/flaskLab2/app/__pycache__/__init__.cpython-35.pyc b/Labs/flaskLab2/app/__pycache__/__init__.cpython-35.pyc new file mode 100644 index 0000000..e42aa97 Binary files /dev/null and b/Labs/flaskLab2/app/__pycache__/__init__.cpython-35.pyc differ diff --git a/Labs/flaskLab2/app/__pycache__/views.cpython-35.pyc b/Labs/flaskLab2/app/__pycache__/views.cpython-35.pyc new file mode 100644 index 0000000..9f7acf4 Binary files /dev/null and b/Labs/flaskLab2/app/__pycache__/views.cpython-35.pyc differ diff --git a/Labs/flaskLab2/app/static/interactions.js b/Labs/flaskLab2/app/static/interactions.js new file mode 100755 index 0000000..a99e3cb --- /dev/null +++ b/Labs/flaskLab2/app/static/interactions.js @@ -0,0 +1,39 @@ +$('#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/flaskLab2/app/static/main.css b/Labs/flaskLab2/app/static/main.css new file mode 100755 index 0000000..35532a5 --- /dev/null +++ b/Labs/flaskLab2/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/flaskLab2/app/templates/base.html b/Labs/flaskLab2/app/templates/base.html new file mode 100755 index 0000000..eb802bc --- /dev/null +++ b/Labs/flaskLab2/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/flaskLab2/app/templates/login.html b/Labs/flaskLab2/app/templates/login.html new file mode 100755 index 0000000..77e1830 --- /dev/null +++ b/Labs/flaskLab2/app/templates/login.html @@ -0,0 +1,17 @@ +{% 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 %} + diff --git a/Labs/flaskLab2/app/templates/not_authorized.html b/Labs/flaskLab2/app/templates/not_authorized.html new file mode 100755 index 0000000..99a0c25 --- /dev/null +++ b/Labs/flaskLab2/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/flaskLab2/app/templates/page_not_found.html b/Labs/flaskLab2/app/templates/page_not_found.html new file mode 100755 index 0000000..dadcc99 --- /dev/null +++ b/Labs/flaskLab2/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/flaskLab2/app/templates/results.html b/Labs/flaskLab2/app/templates/results.html new file mode 100755 index 0000000..b8818eb --- /dev/null +++ b/Labs/flaskLab2/app/templates/results.html @@ -0,0 +1,32 @@ +{% 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']}} + +
+ Want your survey results emailed to you? + Yes! +
+
+{% endblock %} \ No newline at end of file diff --git a/Labs/flaskLab2/app/templates/survey.html b/Labs/flaskLab2/app/templates/survey.html new file mode 100755 index 0000000..d6b7b6e --- /dev/null +++ b/Labs/flaskLab2/app/templates/survey.html @@ -0,0 +1,32 @@ +{% 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/flaskLab2/app/views.py b/Labs/flaskLab2/app/views.py new file mode 100755 index 0000000..f7f050f --- /dev/null +++ b/Labs/flaskLab2/app/views.py @@ -0,0 +1,49 @@ +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['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') + 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/flaskLab2/app/views.pyc b/Labs/flaskLab2/app/views.pyc new file mode 100755 index 0000000..259c8d1 Binary files /dev/null and b/Labs/flaskLab2/app/views.pyc differ diff --git a/Labs/flaskLab2/run.py b/Labs/flaskLab2/run.py new file mode 100755 index 0000000..dae9904 --- /dev/null +++ b/Labs/flaskLab2/run.py @@ -0,0 +1,3 @@ +#!flask/bin/python +from app import myapp +myapp.run(debug=True,host='0.0.0.0')