WbdXQe

index.html

<div class="container">
  <div id="movie-list"></div>
  <div id="movie-detail">
  </div>
</div>

script.js

var json = [
    {
        "id": "603",
        "name": "awesome movie"
    },
    {
        "id": "604",
        "name": "badass movie"
    },
  {
        "id": "711",
        "name": "foo movie"
    },
  {
        "id": "811",
        "name": "bar movie"
    }
];

var movie = function(id){
  
  var detailElem = document.getElementById('movie-detail');

  	//Add IMDB ajax call here to get movie details
  
  
  detailElem.innerHTML = 'This is movie detail for id:'+id;
  
}

var list = document.getElementById('movie-list');

var dom = '<ul>';
for(var i=0; i< json.length;i++){
		dom += '<li><a href="javascript:movie('+json[i].id+')">'+json[i].name+'</a></li>';
}

dom += '</ul>';

list.innerHTML = dom;

style.css

.container{
  width:800px;
  margin:0 auto;
}
#movie-list{
  float:left;
}

#movie-detail{
  float:right;
}

WbdXQe.markdown

WbdXQe

A Pen by Jatinder Assi on CodePen.

License.