Artist battle app

As part of our coding project, we are required to recreate a programme that pitches two artists against one another and determine who the winner of the two is based on basic criteria.

We were given a basic template to work with and build the application from there. Before I began coding, I went through a design phase in which I established a simple Mind Map of what I wished to include in the application, and how I want it to look and how it would look.

artist battle mm

 

After this was completed, I then created a wireframe of the design of the primary application page using my own requirements of the application.

app_wireframe.png

 

For the application, the user would enter the name of the first and second artist and click the “Battle” button. The application will then search through an array of artists and there details and display the relevent information depending on the artists chosen. Attributes such as the artist’s popularity, their amount of followers on spotify, what career type they cover (singer, song writer, actor, producer, etc.), and what genres they cover (hip hop, pop, rock, punk, etc). These attributes are then tallying up into points. If an artist has a higher popularity, they get a point, if they have more followers, they get another, if they cover more genres, one point and if they cover more careers, a point. The total amount of points is added up and displayed and whoever has the most points at the end of the process wins. The end of the application can result in a win or a draw between the two artists involved.

The coding process proved challenging. The HTML and CSS side of the application proved no difficulty to me, while the JavaScript portion of the project turned out to be a little complicated, all thanks to me, I think I should add! After spending some time attempting to connect to the Spotify API itself with no luck, I decided to work with the provided JSON file. I had some trouble still with connecting to the array of objects included in the JSON file for longer than I am embarrassed to admit. I researched a solution to this and the some friendly people on the World Wide Web provided me with a solution. Once that problem was resolved, there remainder of the code was manageable.

code1

code2

code3

code4cdo

 

 

page1

outcome

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s