dandanbang · feladie · Sep 29, 2016 · Oct 6, 2016 · Oct 6, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git a/Assignment/.DS_Store b/Assignment/.DS_Store
diff --git a/Assignment/HW4_Soundcloud/index.html b/Assignment/HW4_Soundcloud/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>Anna's Soundcloud</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+</head>
+
+<body>
+    <div id="picture">
+        <img src="https://i1.sndcdn.com/avatars-000131869186-my9qya-t500x500.jpg" alt="Soundcloud Logo">
+    </div>
+    <div class="search">
+        <input type="text" id="search_box" placeholder="Search for song, artist, album, etc.">
+        <!-- button takes input and adds a new element with content to 'search results' -->
+        <button id="search-button">Go!</button>
+    </div>
+    <div id="all_songs_container">
+        <h2>Search Results</h2>
+        <div id="list_results"></div>
+    </div>
+
+    <div id="playlist_container">
+        <h2>Playlist</h2>
+        <div id="list_playlist"></div>
+    </div>
+
+    <script type="text/javascript" src="startercode_HW4_skeleton.js"> </script>
+    <script type="text/javascript" src="https://stratus.soundcloud.com/stratus.js"></script>
+</body>
+</html>
diff --git 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 = "<img src=" + art + " alt='Album Artwork'>";
+			var title = data[i]['title'];
+			var playURL = data[i]['permalink_url'];
+
+			$('#list_results').append("<div class='each-result'><span class='album-art'>" + artwork + "</span><span class='song'>" + title + "</span><button id='playButton' data-url=" + playURL + ">Play</button><button id='addButton'>Add to Playlist</buton></div>");
+		}
 		},'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("<button class='up'>Up</button><button class='down'>Down</button>"); // 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());
+});
diff --git a/Assignment/HW4_Soundcloud/style.css 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%;
+}
diff --git a/Labs/.DS_Store b/Labs/.DS_Store
diff --git a/Labs/flaskLab2.zip b/Labs/flaskLab2.zip
diff --git a/Labs/flaskLab2/.spyderworkspace b/Labs/flaskLab2/.spyderworkspace
diff --git a/Labs/flaskLab2/app/__init__.py 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
diff --git a/Labs/flaskLab2/app/__pycache__/__init__.cpython-35.pyc b/Labs/flaskLab2/app/__pycache__/__init__.cpython-35.pyc
diff --git a/Labs/flaskLab2/app/__pycache__/views.cpython-35.pyc b/Labs/flaskLab2/app/__pycache__/views.cpython-35.pyc
diff --git a/Labs/flaskLab2/app/static/interactions.js 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);
+});