Make app function.

js/auth.js

@@ -0,0 +1,53 @@
+function auth_url () {
+	let params = [
+		`client_id=${this.auth.client_id}`,
+		`response_type=token`,
+		`redirect_uri=${encodeURIComponent(this.auth.redirect)}`,
+		`scope=${encodeURIComponent(this.auth.scopes.join(" "))}`,
+		`show_dialog=${this.auth.show_dialog}`
+	];
+
+	// Create the state data if we are using it
+	if (this.auth.use_state) {
+		let state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+		params.push(`state=${state}`);
+		localStorage.setItem(`top-spotify-state`, state);
+	};
+
+	return `${this.auth.base_url}?${params.join("&")}`;
+};
+
+
+function verify_auth () {
+	let params = new URLSearchParams(window.location.hash.slice(1));
+
+	// Check to ensure the authorization was a success
+	if (params.get(`access_token`)) {
+		this.get_user()
+
+		// Check if we compare state
+		if (this.use_state) {
+
+			// Compare given state to localstorage state
+			let LS_state = localStorage.getItem(`top-spotify-state`);
+			if (LS_state = params.get(`state`)) {
+				console.info(`State compare success`)
+				this.authed = true;
+				return true
+			}
+			console.error(`State compare failed`)
+			return false
+		} else {
+			return true
+		}
+	} else {
+		let error = (new URLSearchParams(window.location.search)).get(`error`)
+
+		// Authorization failed, error to the user
+		if (error !== null) {
+			this.error.auth = `Authentication failed or was cancelled, please try again.`;
+			window.location.hash = ``;
+		}
+		return false;
+	}
+}

js/data.js

@@ -0,0 +1,57 @@
+function fetch_data () {
+	let url = `${this.api_base}/me/top/${this.type.toLowerCase()}`;
+
+	let limit = parseInt(this.count);
+	if (!limit) { limit = 10; };
+
+	url += `?limit=${limit}&time_range=${this.duration}`;
+
+	axios.get(
+		url,
+		{ headers: { Authorization: `Bearer ${this.get_token()}` } }
+	).then((response) => {
+		this.data.artists = [];
+		this.data.tracks = [];
+		this.error.main = ``;
+		switch (this.type) {
+			case `Tracks`:
+				for (var track of response.data.items) {
+					this.data.tracks.push({
+						name: track.name,
+						popularity: track.popularity,
+						artists: track.artists,
+						link: track.external_urls.spotify,
+						duration: track.duration_ms,
+						locality: track.is_local,
+						id: track.uri,
+						album: {
+							name: track.album.name,
+							image: track.album.images[1],
+							link: track.album.external_urls.spotify
+						}
+					});
+				};
+				break;
+
+			case `Artists`:
+				for (var artist of response.data.items) {
+					this.data.artists.push({
+						name: artist.name,
+						id: artist.id,
+						popularity: artist.popularity,
+						follower_count: artist.followers.total,
+						image: artist.images[1],
+						genres: artist.genres,
+						link: artist.external_urls.spotify
+					});
+				};
+				break;
+
+			default:
+				this.error.main = `TypeError: ${this.type} is not a supported category`;
+				break
+		};
+	}).catch((err) => {
+		this.error.main = `${err.name}: ${err.message}`
+	})
+}

js/text_computation.js

@@ -0,0 +1,19 @@
+function get_button_text () {
+	if (this.count === ``) {
+		return this.type;
+	}
+	else if (this.count === `1`) {
+		this.error.main = ``;
+		return this.type.slice(0,-1);
+	}
+	else if (this.count <= 0) {
+		this.error.main = `Cannot get 0 or fewer ${this.type.toLowerCase()}`;
+		return false;
+	}
+	else if (this.count > 50) {
+		this.error.main = `Cannot get more than 50 ${this.type.toLowerCase()}`;
+		return false;
+	}
+	this.error.main = ``;
+	return this.type;
+};