dandanbang · pjain4161 · Sep 7, 2016 · Sep 8, 2016 · Sep 8, 2016 · Sep 8, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git a/Assignment/.DS_Store b/Assignment/.DS_Store
diff --git a/Assignment/HW3-JS_ToDo_List/.DS_Store b/Assignment/HW3-JS_ToDo_List/.DS_Store
diff --git a/Assignment/HW3-JS_ToDo_List/index.html b/Assignment/HW3-JS_ToDo_List/index.html
@@ -0,0 +1,74 @@
+<!--
+1. User sees labeled ‘to-do’ and ‘completed items’ lists, which are empty upon page load. The lists are visually distinct from each other.
+2. User can add one ‘to-do’ item at a time using a text input field and an ‘add to list’ button.
+3. Each newly-added ‘to-do’ item appears at the top of the ‘to-do’ list (not the bottom).
+4. User can click a button within each ‘to-do’ item to mark it as complete, at which point:
+a. The ‘to-do’ item disappears from the ‘to-do’ list
+b. The ‘to-do’ item appears at the top of the ‘completed items’ list.
+c. Items on the ‘completed items’ list should be styled differently than those on the ‘to-do’ list as an additional visual indication of their completion.
+5. User can click a button within each ‘complete’ item to ‘unmark’ it as complete, at which point:
+a. The ‘complete’ item disappears from the ‘completed items’ list.
+b. The ‘complete’ item appears at the top of the ‘to-do’ list with the same styling as the other ‘to-do’ list items.
+6. Items on each list remain there until the user marks or ‘unmarks’ them.
+7. Your site has a title and intuitive labeling or instructions on how to use it.
+8. You can use only jQuery and JavaScript – no additional plugins/libraries.
+9. Your JS and CSS code is separate from your HTML (i.e., there should be no inline CSS styling or JavaScript within your HTML file).
+10. All of your JavaScript is commented appropriately.
+11. Your code is clean and concise (minimal repetition and unused code)-->
+
+<html>
+<head>
+
+    <title> Homework4 Javascript and jQuery </title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="style.css">
+
+</head>
+    <body>
+        <!-- create input tag for user input -->
+         <h1> Your To-Do List</h1>
+            <div id = "instructions">
+                <p> Are you taking a ton of ischool awesome classes ? Do you find yourself surrounded by projects which makes you forget some of your other important tasks ? Fret no more! <b>You have your own personal task list</b>. 
+                <ul>
+                    <li> Mention what task you need to do in the textbox below.</li>
+                    <li> click "Add Item to list" button and your task will be automatically saved to to-do list.</li>
+                    <li> If you have completed your task, you can hit the 'mark as complete' button and it will move automatically to 'completed task list' </li>
+                    <li>You can move your task from completed task list to to-do list by clicking the 'mark as incomplete' button </li>
+                    <li> simple ! right? Lets get started! </li>
+                </ul>
+                </p>
+            </div>
+
+             <h3>Enter task to be done below </h3>
+            <input type = "text" name = "todo_item_input" id = "todo_input" > 
+        <!-- button takes input and adds a new element with content to 'list_do' -->
+            <button id="new-item"> Add Item to List</button>
+
+        <!-- ability to move items between list_todo and list_completed -->
+
+            <br/>
+            <h3 id = "header1"> Here is your To-Do List </h3>
+            <hr/>
+            <div id="list_todo"> 
+                <img class = "todoImage" src = "http://www.ineedmotivation.com/blog/wp-content/uploads/2008/01/todo.jpg">
+                <ul id = "to-do"></ul>
+            </div>
+
+            <h3 id = "header2" > Here is your Completed Task List </h3>
+            <hr/>
+            <div id="list_completed"> 
+                <img class = "completedImage" src = "http://www.marciewrites.com/wp-content/uploads/2013/10/Completed-to-do-list-writechangegrow.jpg">
+                <ul id = "completed"></ul>
+            </div>
+
+        <!--JS -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+
+        <script src="main.js"> </script>
+    </body>
+</html>
diff --git a/Assignment/HW3-JS_ToDo_List/main.js b/Assignment/HW3-JS_ToDo_List/main.js
@@ -0,0 +1,40 @@
+$(document).ready(function() {
+    $("#new-item").on('click', function() {
+        // once the document loads, 
+        // create new item with this function
+        $("#header1").animate({marginLeft: "+=400px"});//animation for moving the header left to right
+        $("#header1").animate({marginLeft: "-=400px"});//animation for moving the header right to left
+         var todo_input = $("input").val();
+        $("#to-do").prepend('<li>'+"  " +todo_input+ "  " + '<button> Mark as completed? </button></li>');
+        $("#to-do").animate({fontSize: '2em'}, "slow");
+        $("#to-do").animate({fontSize: '1em'}, "slow");
+    });
+
+
+    $("#to-do").on('click', "button", function() {
+        // move from list_todo container to 
+        // list_completed container
+        $("#header2").animate({marginLeft: "+=400px"});//animation for moving the header left to right
+        $("#header2").animate({marginLeft: "-=400px"});//animation for moving the header right to left
+        $(this).html("Unmark as Complete");
+        var completed = $(this).parent();
+        $("#completed").prepend(completed);
+        $("#completed").animate({fontSize: '2em'}, "slow");
+        $("#completed").animate({fontSize: '1em'}, "slow");
+
+    });
+
+    $("#list_completed").on('click', "button", function() {
+        // move back from list_completed container to 
+        // list_todo container
+        $("#header2").animate({marginLeft: "+=400px"}); //animation for moving header2 from left to right
+        $("#header2").animate({marginLeft: "-=400px"});//animation for moving header2 from right to left
+        $("#header1").animate({marginLeft: "+=400px"});//animation for moving the header1 left to right
+        $("#header1").animate({marginLeft: "-=400px"});//animation for moving header2 from right to left
+        $(this).html("completed?");
+        var doAgain = $(this).parent();
+        $("#to-do").prepend(doAgain);
+
+    });
+});
+
diff --git a/Assignment/HW3-JS_ToDo_List/style.css b/Assignment/HW3-JS_ToDo_List/style.css
@@ -0,0 +1,59 @@
+/* Add CSS */
+/*----------------- CSS RESET ------------------*/
+
+body{
+    background-image: url("https://ae01.alicdn.com/kf/HTB1gYMOIXXXXXX1XVXXq6xXFXXXu/12x8FT-font-b-Light-b-font-Brown-Orange-Wooden-Planks-font-b-Wood-b-font-font.jpg");
+    width: 980px;
+    margin: 20px 35px 50px;
+    font-size: 16px;
+    line-height: 1.7;
+}
+#instructions{
+    width : 90%;
+    background-image:url("http://www.dreamtemplate.com/dreamcodes/bg_images/color/c10.jpg");
+    font-style: italic;
+    font-color: pink;
+    color: white;
+    padding: 15px;
+
+}
+
+.todoImage{
+    float: left;
+}
+
+
+.completedImage{
+    float: left;
+}
+#to-do, 
+#completed{
+    display: block;
+    margin-left: 50%;
+    margin-top: 15%;
+}
+
+
+h1,h2,h3 {
+    color: white;
+}
+
+#list_todo{
+    background-color: yellow;
+    width: 80%;
+    display: block;
+    margin-left: 50px;
+    font-family: helvetica;
+    font-color: blue;
+    display: inline-block;
+}
+
+#list_completed{
+    background-color: pink;
+    width: 80%;
+    display: block;
+    margin-left: 50px;
+    font-family: sans-serif;
+    color: green;
+    display: inline-block;
+}
diff --git a/Assignment/HW4_SoundCloud/.DS_Store b/Assignment/HW4_SoundCloud/.DS_Store
diff --git a/Assignment/HW4_SoundCloud/_css/.DS_Store b/Assignment/HW4_SoundCloud/_css/.DS_Store
diff --git a/Assignment/HW4_SoundCloud/_css/style.css b/Assignment/HW4_SoundCloud/_css/style.css
@@ -0,0 +1,44 @@
+
+body{
+	background-image: url("http://pre10.deviantart.net/3046/th/pre/f/2010/320/d/1/website_background_by_modsoft-d3302jz.png");
+	color: white;
+	margin-left: 20px;
+}
+
+h2{
+	padding-top: 3%;
+	background-image: url("https://images.sharefaith.com/images/3/1335548756984_58/img_mouseover3.jpg");
+	height: 13%;
+	text-align: center;
+}
+.song {
+	display: flex;
+	margin-bottom: 3%;
+}
+
+article {
+	display: flex;
+	flex-direction: row;
+}
+
+
+li {
+	list-style: none;
+}
+
+
+.song-details {
+	margin-left: 3%;
+}
+
+#search-results, #playlist {
+	margin-top: 3%;
+}
+
+
+
+
+.h3style {
+	padding-left: 200px;
+}
+
diff --git a/Assignment/HW4_SoundCloud/_js/.DS_Store b/Assignment/HW4_SoundCloud/_js/.DS_Store
diff --git a/Assignment/HW4_SoundCloud/_js/main.js b/Assignment/HW4_SoundCloud/_js/main.js
@@ -0,0 +1,64 @@
+/* jQuery code to run the music playlist*/
+
+$(document).on("click", ".playlist-add", function () {
+	var same = $(this).parent().parent().clone();
+	same.children(".song-details").children(".playlist-add").remove();
+	same.children(".song-details").append("<button class='up'>Up</button><button class='down'>Down</button><button class='remove'>Remove</button>"); 
+	$('#songsList').prepend(same);
+});
+
+
+$(document).ready(
+    $("#music").on("click", function() {
+        searchSongsAPI($("#find").val());
+    })
+);
+
+/* jQuery code to play music*/
+$(document).on("click", ".play", function () {
+	playSong($(this).attr('id'));
+});
+
+/* jQuery code for down button functionality*/
+$(document).on("click", ".down", function() {
+	searchedSong = $(this).parent().parent();
+	searchedSong.insertAfter(searchedSong.next());
+});
+
+/* jQuery code to search the music*/
+function searchSongsAPI(searchQuery) {
+	$("#results").children("#songResults").children().remove();
+	$.get("https://api.soundcloud.com/tracks?client_id=b3179c0738764e846066975c2571aebb",
+		{'q': searchQuery,
+		'limit': '150'},
+		function(data) {
+			for (var i = 0; i < 18; i++) {
+				$("#songResults").append("<div><img src='"+data[i].artwork_url+"'><div class='song-details'><li>"+data[i].title+"</li><li>"+data[i].user.username+"</li>\
+											 <button class='play' id='"+data[i].permalink_url+"'>Play Song</button>\
+											 <button class='playlist-add'>Add to Playlist</button></div></div>");
+			};
+		},'json'
+	);
+}
+/* jQuery code for up button functionality*/
+$(document).on("click", ".up", function() {
+	searchedSong = $(this).parent().parent();
+	searchedSong.insertBefore(searchedSong.prev());
+});
+
+/* jQuery code to remove song from palylist*/
+$(document).on("click", ".remove", function() {
+	$(this).parent().parent().remove();
+});
+
+/* jQuery function to play music*/
+function playSong(url) {
+	$('#stratus').remove();
+	$.stratus({
+      key: "b3179c0738764e846066975c2571aebb",
+      auto_play: true,
+      align: "bottom",
+      links: url
+    });
+}
+
diff --git a/Assignment/HW4_SoundCloud/index.html b/Assignment/HW4_SoundCloud/index.html
@@ -0,0 +1,29 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="_css/style.css">
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://stratus.soundcloud.com/stratus.js"></script>
+        <title>IMusic</title>
+    </head>
+
+    <body>
+        <h2>Welcome to IMusic - A Music hub for Ischool</h2>
+        <h3>Love listening songs? We have got you covered ! </h3>
+        <h4>Browse through millions of songs here and create your own playlist!</h4>
+        <p>Type whatever you want to search for in the searchbox below</p>
+        <p>Loved the song ? Add it to your Playlist and play it from there!</p>
+        <p> You can remove a song from playlist by clicking on remove song button or reorder the position of song in the playlist by clicking on the up and down buttons !</p>
+        <input type="text" id="find" placeholder="Search our directory">
+        <button id="music">Find Your Music</button>
+        <article>
+            <section id="results">
+                <h3>Your Searched Songs</h3><div id="songResults"></div>
+            </section>
+            <section id='songsContainer'>
+                <h3 class="h3style">Songs Playlist</h3><div id="songsList"></div>
+            </section>
+        </article>
+                <script type="text/javascript" src="_js/main.js"> </script>
+    </body>
+</html>
diff --git a/Assignment/Homework_1 - HTML/.DS_Store b/Assignment/Homework_1 - HTML/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/.DS_Store.orig b/Assignment/Homework_1 - HTML/.DS_Store.orig
diff --git a/Assignment/Homework_1 - HTML/area.html b/Assignment/Homework_1 - HTML/area.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Area</title>
+<link href="css/style.css" rel="stylesheet" type="text/css">
+</head>
+
+<!--
+Begining of body -->
+
+<body>
+<h2> Here is the Area that you requested ! </h2>
+<img class ="header3" src="assets/images/extra_credit/shrooms.jpg" title="pokemon area" >
+<br/>
+<br/>
+<footer class = "bottom">
+      <nav>
+      <a href = "pokedex.html"> <button class = "button" type="button"> Go to Home </button></a>
+
+     <a href="map.html"><button class = "button" type="button">Go to Map</button></a>
+
+     </nav>
+  </footer> 
+
+</table>
+</body>
+</html>
diff --git a/Assignment/Homework_1 - HTML/assets/.DS_Store b/Assignment/Homework_1 - HTML/assets/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/assets/backgrounds/.DS_Store b/Assignment/Homework_1 - HTML/assets/backgrounds/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/assets/icons/.DS_Store b/Assignment/Homework_1 - HTML/assets/icons/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/assets/images/.DS_Store b/Assignment/Homework_1 - HTML/assets/images/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/assets/images/extra_credit/.DS_Store b/Assignment/Homework_1 - HTML/assets/images/extra_credit/.DS_Store
diff --git a/Assignment/Homework_1 - HTML/css/.DS_Store b/Assignment/Homework_1 - HTML/css/.DS_Store