Step 1:
Clone the repo: https://github.com/fac18/week3-DFJL-bday-time-machine.git
Step 2: Create new API keys for each service:
Step 3: Refer to config.template file which has the following contents:
let config = {
MY_MUSIC_KEY: "your-musixmatch-key",
MY_FILM_KEY: "your-moviedb-key"
};
Step 4: Add your API keys for Musixmatch and The Movie DB to the appropriate fields.
Step 5: Rename and save the file as 'config.js' - the site should now be able to access the APIs with your keys when you hit submit!
We started off looking at the list of recommended APIs and discussed ideas on which ones would be suitable to reflect the personalities of our team.
We quickly agreed on an 80s BACK TO THE FUTURE THEME which would incorporate the Movie DB API and Musixmatch API to let you go back in time to the year of your birth! What was the world like?
We sketched out a template of what the one page site would look like:
Followed by a list of tasks that we would commit as issues:
As well as a timeline to keep us organised for the next two days:
We agreed agreed on how we would structure all of the files. We mobbed the most basic of basic html files and then created our seperate api JS files before going on to work.
One problem we had with Musixmatch was that our XHR was blocked by their server's CORS policy.
Specifically, our preflight request didn't pass their control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource
-
The Chrome extension solution (actually, this one worked better)
-
The CORS Anywhere proxy API (mediating server) solution
-
Contact Musixmatch and ask them to whitelist our origin (http://127.0.0.1:3000/)
-
Some unknown solution that genuinely solves the problem!
We had two API files and we decided that first we would be able to do all of the dom manipulation in one. So we starter creating our elements from our array of objects in dom.js
We wanted to make our xhr function as clean as possible and so were creating our nodes and elements outside of the function but still in the api.js file
We really struggled working out what was going wrong because we were able to run the function to create our elements, the api output was being console.log()d but we could not create elements for the output.
Console displays an empty looking array:
Solved it by calling the function inside of the xhr.onload function
Once it becomes public, anyone can use it, and possibly abuse it!
We didnt realise this until we had already pushed our work onto Github...
Apparently we can still remove our API keys from previously pushed commits by a way of purging from our repository's history!
Stretch goal - consult github help! https://help.github.com/articles/remove-sensitive-data/
In our music-api.js file we were producing our nodes in a very verbose fashion (thanks to @tonylomax for raising this).
const musicTitle = document.createElement("h3");
musicTitle.classList.add("music__title");
musicTitle.textContent = x.title;
const musicAlbum = document.createElement("p");
musicAlbum.classList.add("music__album");
musicAlbum.textContent = x.album;
const musicArtist = document.createElement("p");
musicArtist.classList.add("music__artist");
musicArtist.textContent = x.artist;
We would then assign them one by one.
musicOutput.appendChild(musicTitle);
musicOutput.appendChild(musicArtist);
musicOutput.appendChild(musicAlbum);
By writing a function to handle node production...
const makeMusicNode = function(el, object, key) {
let node = document.createElement(el);
node.classList.add(`music__${key}`);
node.textContent = object[key];
return node;
};
we could make and assign nodes in one line each!
musicOutput.appendChild(makeMusicNode("h3", x, "title"));
musicOutput.appendChild(makeMusicNode("p", x, "album"));
musicOutput.appendChild(makeMusicNode("p", x, "artist"));
