Nomination List

A one-page responsive website that adds and removes movies into a list from OMDb’s movie database. The full code can be found on Github.

This project uses:

• Vanilla JavaScript
• HTML
• CSS
• Bootstrap
• jQuery
• OMDb’s API

    $.get("https://www.omdbapi.com/?s=" + t + "&type=movie&apikey=ba1f4581", function (rawdata) {
      // recieves the data from the omdb api
        var rawstring = JSON.stringify(rawdata);
        data = JSON.parse(rawstring);
        var title = data.Search[0].Title;
        var year = data.Search[0].Year;
    }

Retrieves the movie typed on the text field from the OMDb’s API. In the first line,t is the movie title to search for while the keyword&type=movie specifies that I only want movies to be searched while &apikeyis the API key that is unique to whoever wants access to the API.

The code above gets the movie title and year released from the JSON file and stores them in variable title and year.

nomList = document.getElementById('movie');
nomList.innerHTML = `<br><h5>${title}</h5><p>(${year})`;

Dynamically insert the movie name and year released in the HTML code using the Dynamic Object Model (DOM).

var nominate = document.createElement("button");
var bttName = document.createTextNode("Nominate");
nominate.appendChild(bttName);
document.getElementById("movie").appendChild(nominate);

Using DOM, I created the element button and stored it in nominate for further reference. Then appended the text that is in the button to the new element I created.

var parent = document.getElementById("nom");
var allBut = parent.getElementsByTagName("button");

nominate.addEventListener("click", addNominations);

Gets all the elements in the li under the ol element and the buttons linked with each of the movies in the list.

Now, the users need to be able to add the movies and delete it from their list. Thus, we will create an event that listens to the clicks of the nominate button. It will call the function addNomination that contains the delete and add functionality.

if(parent.children.length > 4){
  return alert("You are only allowed to nominate at most 5 movies");
}

in the addNomination function, we must first make sure the list is no more than 5.

var liNode = document.createElement("li"); 
nominate.parentNode.removeChild(nominate);
var actualNom = document.createTextNode(nomList.textContent);
            
var deleteBut = document.createElement("button");
var deleteVal = document.createTextNode("Delete");
deleteBut.appendChild(deleteVal);  
            
liNode.appendChild(actualNom);
liNode.appendChild(deleteBut);

document.getElementById("nom").appendChild(liNode);

Once we click the nominate button beside the movie we wanted, it creates a new li and a delete button element. It then incrementally adds the movies we want to nominate.

for(i = 0; i < allBut.length; i++){
  allBut[i].addEventListener("click", function(){
    parent.removeChild(this.parentNode);
  }, false);
}

Finally, with the delete button, created before, we can add an event listener to all of them. When clicked, it removes the movie and button from the ol element.