diff --git a/Assignment/HW3-JS_ToDo_List/_css/style.css b/Assignment/HW3-JS_ToDo_List/_css/style.css index 78f00f7..2bca17b 100644 --- a/Assignment/HW3-JS_ToDo_List/_css/style.css +++ b/Assignment/HW3-JS_ToDo_List/_css/style.css @@ -1 +1,23 @@ /* Add CSS */ +#complete_label{ + background-color: green + +} +#complete_label{ + background-color: red +} +#Data_Box{ +margin-top:25; +display:flex; +justify-content: space-between; +} +#todo{ +width:50%; +order:1; +background-color: red; +} +#completed{ +width:50%; +order:2; +background-color: green; +} \ No newline at end of file diff --git a/Assignment/HW3-JS_ToDo_List/_js/main.js b/Assignment/HW3-JS_ToDo_List/_js/main.js index 0f11441..039fdec 100644 --- a/Assignment/HW3-JS_ToDo_List/_js/main.js +++ b/Assignment/HW3-JS_ToDo_List/_js/main.js @@ -1,13 +1,26 @@ $(document).ready( + function(){ $("#new-item").on('click', function() { // once the document loads, create new item with this function - }) -); + + var toAdd = $('input[id=task]').val(); + $('#list_todo').prepend('
' + toAdd + '
'); + }); + + $("#list_todo").on('click', "button", function() { // move from list_todo container to list_completed container + console.log("Efs"); + + $(this).parent().children('.complete').html("In Complete"); + $('#list_completed').prepend($(this).parent()); }); $("#list_completed").on('click', "button", function() { // move back from list_completed container to list_todo container + $(this).parent().children('.complete').html("Complete"); + $('#list_todo').prepend($(this).parent()); }); +} +); \ No newline at end of file diff --git a/Assignment/HW3-JS_ToDo_List/index.html b/Assignment/HW3-JS_ToDo_List/index.html index 2ed5417..ecb4054 100644 --- a/Assignment/HW3-JS_ToDo_List/index.html +++ b/Assignment/HW3-JS_ToDo_List/index.html @@ -18,23 +18,34 @@ + + + TODO List - Homework4 Javascript and jQuery - + - +

Add items to your TODO LIST !! +

+ - - + +
+
+

TODO LIST

-
- - +
+
+

Completed LIST

+
+
+
+ + diff --git a/Assignment/HW4_Soundcloud/index.html b/Assignment/HW4_Soundcloud/index.html new file mode 100644 index 0000000..640fc73 --- /dev/null +++ b/Assignment/HW4_Soundcloud/index.html @@ -0,0 +1,32 @@ + + + + Goutam's Juke Box + + + + + + +

Enter Song in the box

+ + +
+ +
+ +
+ +
+
+

+
+
+ +
+
+ + + + + diff --git a/Assignment/HW4_Soundcloud/script/script.js b/Assignment/HW4_Soundcloud/script/script.js new file mode 100644 index 0000000..5d2f171 --- /dev/null +++ b/Assignment/HW4_Soundcloud/script/script.js @@ -0,0 +1,128 @@ +// main // +$(document).ready( + $("#search-button").on('click', function(){ + // Passing user query to the API + $("#results").html(""); + var userQuery = $("#search-input").val(); + callAPI(userQuery); + + $("#results").on('click', '.playlist-button', function(){ + var div = $(this).parent(); + + addToPlaylist(div.parent()); + }) + + $("#playlist").on('click', '.playlist-button', function(){ + var div = $(this).parent(); + + removeFromPlaylist(div.parent()); + }) + + $("#playlist").on('click', '.move-up', function(){ + + var div = (($(this).parent()).parent()).parent(); + moveUp(div); + }) + $("#playlist").on('click', '.move-down', function(){ + + var div = (($(this).parent()).parent()).parent(); + moveDown(div); + }) + + }) +); + +function callAPI(query) { + $.get("https://api.soundcloud.com/tracks?client_id=b3179c0738764e846066975c2571aebb", + {'q': query, + 'limit': '200'}, + function(data) { + + + var resultsHeader = "

Search Results

"; + $("#results").append(resultsHeader); + for(i = 0; i < 200; i++){ + var song = data[i].title; + var artist = data[i].user.username; + var picture = data[i].artwork_url; + if (picture == null){ + picture = data[i].waveform_url; + + } + var permalink = data[i].permalink_url; + interpreter(song, artist, picture, permalink); + } + + },'json' + ); +} + +function interpreter(songData, artistData, pictureData, permalink){ + // get data + var song = "

" + songData + "

"; + var artist = "

" + artistData + "

"; + var picture = ""; + var playButton = ""; + var playlistButton = "
"; + var divWrapper = "
" + picture + playButton + "
" + "
" + song + artist + playlistButton + "
"; + $("#results").append("
  • " + divWrapper + "
    • "); +} + +function player(song){ + //control player + if(song.attributes["name"].value == 'silent'){ + song.attributes["class"].value = ' fa fa-pause'; + song.attributes["name"].value = 'playing'; + changeTrack(song.id, 1); + + } + else { + song.attributes["class"].value = ' fa fa-play'; + song.attributes["name"].value = 'silent'; + changeTrack(song.id, 0) + } + +} +function addToPlaylist(x){ + $("#playlist-header").html("Your Playlist:"); + x.clone().prependTo("#playlist"); + (($("#playlist").children('.song-object')).children('.song-meta')).children('.playlist-button').html('Remove from Playlist'); + + + var moveUp = ""; + var moveDown = ""; + var upAndDown = moveUp + moveDown; + ((($("#playlist").children('.song-object')).children('.song-meta')).children('.up-and-down')).html(upAndDown); +} +function removeFromPlaylist(x){ + // removes song from Play list + x.remove(); +} +function moveUp(x){ + // moving song up in the wait list + var prev = $(x).prev(); + $(x).insertBefore(prev); +} +function moveDown(x){ + // moving song down in the playlist + var next = $(x).next(); + $(x).insertAfter(next); +} + +// 'Play' button +function changeTrack(url, x) { + + + $('#stratus').remove(); + + if (x == 1){ + + $.stratus({ + key: "b3179c0738764e846066975c2571aebb", + auto_play: true, + align: "bottom", + links: url + }); + } + +} diff --git a/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js b/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js deleted file mode 100644 index dbd277e..0000000 --- a/Assignment/HW4_Soundcloud/startercode_HW4_skeleton.js +++ /dev/null @@ -1,27 +0,0 @@ -// Event hander for calling the SoundCloud API using the user's search query -function callAPI(query) { - $.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 - },'json' - ); -} - -// 'Play' button event handler - play the track in the Stratus player -function changeTrack(url) { - // Remove any existing instances of the Stratus player - $('#stratus').remove(); - - // Create a new Stratus player using the clicked song's permalink URL - $.stratus({ - key: "b3179c0738764e846066975c2571aebb", - auto_play: true, - align: "bottom", - links: url - }); -} - - diff --git a/Assignment/HW4_Soundcloud/styles/style.css b/Assignment/HW4_Soundcloud/styles/style.css new file mode 100644 index 0000000..ff0b226 --- /dev/null +++ b/Assignment/HW4_Soundcloud/styles/style.css @@ -0,0 +1,15 @@ +.search-button{ + background-color: #FF5500; + + color: #FFFFFF; + +} +#results-div{ + display:flex; + } +#results{ + width:50%; +} +#playlist-div{ + width:50%; +} \ No newline at end of file diff --git a/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html b/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html index 4d70768..ed744f7 100644 --- a/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html +++ b/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html @@ -33,27 +33,27 @@

    In Other News

    Our Finest Felines

    -
    +
    Steve

    Steve

    -
    +
    Dr. Franklin

    Dr. Franklin

    -
    +
    Mr. Lickums

    Mr. Lickums

    -
    +
    Roxanne

    Roxanne

    -
    +
    Felix

    Felix

    -
    +
    Bubbles

    Bubbles

    diff --git a/Labs/Lab3 - CSS/grid-style.css b/Labs/Lab3 - CSS/grid-style.css index fc6c5d6..e60cac6 100644 --- a/Labs/Lab3 - CSS/grid-style.css +++ b/Labs/Lab3 - CSS/grid-style.css @@ -124,21 +124,27 @@ a.nav-button:visited { /*START HERE*/ .other-news-container { - + float:left; + width: 25%; } .main-container { - + float:left; + width:75%; } .ib-grid-item { - + display:inline-block; + width:33%; } .ib-grid-item img { - + max-width:66.6%; + max-height: 66.6% } .other-news-item { + box-sizing: border-box; + padding: 0 10%; } 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/static/interactions.js b/Labs/flaskLab2/app/static/interactions.js new file mode 100755 index 0000000..42a77ca --- /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) { + console.log(data); + console.log($("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 %}
    + +
    +

    © Copyright 2016 Ape Ask, all rights reserved

    +
    + + + + \ 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..1e559a3 --- /dev/null +++ b/Labs/flaskLab2/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

    +
    + + + +
    +
    + + + + 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..01e135f --- /dev/null +++ b/Labs/flaskLab2/app/templates/survey.html @@ -0,0 +1,30 @@ +{% 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..64fca7c --- /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") + 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')