dandanbang · gman90 · Sep 6, 2016 · Sep 22, 2016 · Sep 22, 2016 · Sep 29, 2016
diff --git 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;
+}
diff --git 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('<div>' + toAdd + ' <button class ="complete">Complete</button></div>');
+    });
+
+
 
 $("#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());
 });
+}
+);
diff --git a/Assignment/HW3-JS_ToDo_List/index.html b/Assignment/HW3-JS_ToDo_List/index.html
@@ -18,23 +18,34 @@
 
 <html>
 <head>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+
+    <title> TODO List </title>
 
-    <title> Homework4 Javascript and jQuery </title>
     <link rel="stylesheet" href="_css/style.css">
 
 </head>
-    <body>
+    <body>  
             <!-- create input tag for user input -->
-            <input>
+            <h2>Add items to your TODO LIST !!
+            <h2>
+            <input name ="task_name" type = "text" id = "task" />
 
             <!-- button takes input and adds a new element with content to 'list_do' -->
-            <button id="new-item"> </button>
-
+            <button id="new-item"> Add Task </button>
+            <div id ="Data_box" >
+            <div id ="todo">
+            <h2>TODO LIST</h2>
 
             <!-- ability to move items between list_todo and list_completed -->
             <div id="list_todo"> </div>
-            <div id="list_completed"> </div>
-
-            <script type="text/javascript" src="_js/main.js"> </script>
+            </div>
+            <div id ="completed">
+            <h2>Completed LIST</h2 >
+            <div id="list_completed">  </div>
+            </div>
+</div>
+
     </body>
+    <script type="text/javascript" src = "_js/main.js"></script>
 </html>
diff --git a/Assignment/HW4_Soundcloud/index.html b/Assignment/HW4_Soundcloud/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Goutam's Juke Box </title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type = "text/css" href="styles/style.css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  </head>
+  <body>
+
+      <h2>Enter Song in the box</h2>
+      <input type = "text" id = "search-input" placeholder = "Search SoundCloud" class = "search-input">	
+      <button class = "search-button" id = "search-button">Search</button>
+      <hr />
+
+    <div id = "results-div">	
+
+      <div id = "results">
+
+      </div>
+      <div id = "playlist-div">
+        <h3 id = "playlist-header"></h3>
+        <div id = "playlist">
+        </div>
+
+      </div>
+    </div>
+    <script type = 'text/javascript' src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+    <script type = 'text/javascript' src = "https://stratus.soundcloud.com/stratus.js"></script>
+    <script type = 'text/javascript' src = "script/script.js"></script>
+  </body>
+</html>
diff --git a/Assignment/HW4_Soundcloud/script/script.js 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 = "<h3 id = 'results-header'>Search Results</h3>";
+      $("#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 = "<p >" + songData + "</p>";
+  var artist = "<p >" + artistData + "</p>";
+  var picture = "<img src ='" + pictureData + "'/>";
+  var playButton = "<button class = ' fa fa-play' name = 'silent' id = '" + permalink + "' onClick = 'player(this)'></button>";
+  var playlistButton = "<button class = 'playlist-button'>Add to Playlist</button><div class = 'up-and-down'></div>";
+ var divWrapper = "<div >" + picture + playButton + "</div>" + "<div class = 'song-meta'>" + song + artist + playlistButton + "</div>";
+ $("#results").append("<li class = 'song-object'>" + divWrapper + "</li>");
+}
+
+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 = "<button class = 'move-up fa fa-angle-up'></button>";
+  var moveDown = "<button class = 'move-down fa fa-angle-down'></button>";
+  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
diff --git a/Assignment/HW4_Soundcloud/styles/style.css 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%;
+}
diff --git a/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html b/Labs/Lab3 - CSS/CSS-in-class-grid-layout.html
@@ -33,27 +33,27 @@ <h3>In Other News</h3>
 
 		<div class="main-container">
 			<h3>Our Finest Felines</h3>
-			<div class="ib-grid-item-1">
+			<div class="ib-grid-item">
 				<img alt="Steve" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" alt="Felix the cat">
 				<p>Steve</p>
 			</div>
-			<div class="ib-grid-item-2">
+			<div class="ib-grid-item">
 				<img alt="Dr. Franklin" src="https://pbs.twimg.com/profile_images/447460759329460224/mt2UmwGG_400x400.jpeg">
 				<p>Dr. Franklin</p>
 			</div>
-			<div class="ib-grid-item-1">
+			<div class="ib-grid-item">
 				<img  alt="Mr. Lickums" src="http://2.bp.blogspot.com/_ckBlasgNSzg/SkV9fcHlE6I/AAAAAAAAM6s/qoUNISk_YpQ/s400/Cat+Bowling.jpg">
 				<p>Mr. Lickums</p>
 			</div>
-			<div class="ib-grid-item-2">
+			<div class="ib-grid-item">
 				<img alt="Roxanne" src="http://www.our-happy-cat.com/images/cat-drinking-from-tap.jpg">
 				<p>Roxanne</p>
 			</div>
-			<div class="ib-grid-item-1">
+			<div class="ib-grid-item">
 				<img alt="Felix" src="http://www.portraits-online.com/uploads/1/3/5/2/13522906/2607694_orig.jpg">
 				<p>Felix</p>
 			</div>
-			<div class="ib-grid-item-2" id="last-cat">
+			<div class="ib-grid-item" id="last-cat">
 				<img alt="Bubbles" src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg">
 				<p>Bubbles</p>
 			</div>

diff --git 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
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