Getting my First Freelance Gig and Finishing project you-dj

Hope every one had a good week. This week I will be showing the final bits that I left out to finishing this project up. But before I go into that I wanted to mention that I landed my first real paid freelance job. So over the next few months I will be busy with that and showing you guys what I am working on as it progresses. With that said lets go ahead and get started.

Lets get started

So last week I showed the update portion of the code but there were a couple of things I left out. One part of it was showing the actual update page. And the piece that takes and shows the list of songs to update. So lets take a look at it. Then I will be showing the auto fill that i used to fill in the drop down menus to select the play list as well as the the auto fill to show the songs from the play list on the main index.html page.

$scope.show_playList_To_update = function(){
dataService.searchvid(function(response){
$scope.vide = response.data.songs[0].description;
$scope.playlist = response.data.songs[0]._id;
});
}

Here I am getting the specific playlist title through the vide variable which I want to note will change to a better name. This gets the play list title description. I am then taking and getting the specific play list id to loop through the array of songs in the play list to display in the update box.

<button id="update-button" ng-click="selectplaylist_update()">updateplaylist</button>

<a href="" ng-click="routeuser('index.html')">Home</a>
<div>
<textarea id="updatelist" type="text" name="addvideo" ng-model="vide">{{vide}}</textarea>
</div>
</label>
<select id="select_music" ng-model="videos" ng-change="show_playList_To_update()">
<option ng-repeat="playlist in getplaylists track by $index">{{playlist.title}}</option>
</select>

Here is the main html for the update page that is taking calling the select playlist_update method to update the playlist. Iam then taking and calling ng change in the select portion to fill in the drop down menu with the specific playlist to select in order to update.

$scope.routeuser = function(route){
window.location.href = route;

}

The next thing iam doing routing the user back to the home page.

And then lastly iam looping through the play list and then using tack by index to allow duplicates in the data base for now. I then access it through the playlist.title method.

So now lets warp things up and take a look at the front index.html page.

<button class="btn btn-default form-control " id="search-button" ng-click="run()">autoplay</button>
<button class="btn btn-default form-control" ng-click="addsong()">add to play list</button>
<a href="" ng-click="routeuser('update.html')">update play list</a>
<select id="select_music" class="inline form-control"  ng-model="videos" ng-change="selectingvideo()">
<option ng-repeat="playlist in getplaylists track by $index">{{playlist.title}}</option>
</select>

<input class="form-control" id="title" type="text" name="title"></input>
<textarea  class="form-control" id="addvideo" type="text" name="addvideo"></textarea>

Here I am doing allot of similar things I was doing in the update page.

<button class="btn btn-default form-control " id="search-button" ng-click="run()">autoplay</button>

Here I am calling the run auto play function introduced In the beginning of this blog series.

click="addsong()">add to play list</button>
<a href="" ng-click="routeuser('update.html')">update play

Here iam just calling the add song method to add songs to to the playlist. Then i added a button to route the user to the update page.

<select id="select_music" class="inline form-control"  ng-model="videos" ng-change="selectingvideo()">
<option ng-repeat="playlist in getplaylists track by $index">{{playlist.title}}</option>
</select>

Here iam doing the same this as in the update page where iam looping through and passing in the different play list data into the drop down menu.

<input  class="form-control" id="title" type="text" name="title"></input>
<textarea  class="form-control" id="addvideo" type="text" name="addvideo"></textarea>

Lastly iam adding a input box to add in the title of the play list and a text area to put in the list of songs. And that is it and we are done.

So after all this I wanted to not a few things. This last project has been very interesting to make and I want to note that from now on I am going to try to make my postings more consistent as to what is getting done each week. As this blog series seemed to be a bit confusing. Also note that the project is still being updated and cleaned up so not every thing you see here as far as variable names and things will be the same. and I will be revisiting the project latter on. In the mean time check out https://github.com/gwartney21/You-DJ on my github.

Also next week I will be discussing further of the new set of projects iam working on as they are paid projects that will be leading up to a final result. So this will be my new primary focus. With that said I will see you guys next week and keep on programming.