Creating the timeline markup from data

To create the required markup, we will iterate on the array defined for the timelineData property and fill the div with the id timeline. We will also resize the container div based on the value of the itemsToDisplay property. Other properties such as minYear, maxYear, currentYear, timelineWindowStartYear, and maxScrollYear will also be set.

In the timeline.js file, locate the createMarkup method and write this code to create the timeline:

$('.container').css({width: (objTimeline.itemsToDisplay*100)+'px'});
$('#rightOverlay').css({ width: ((objTimeline.itemsToDisplay * 100) - 100) + 'px' });
this.minYear = this.timelineData[0].year;
this.maxYear = this.timelineData[0].year;
var strYearDivs = '';
for(var i=0; i< this.timelineData.length; i++)
{

  strYearDivs+= '<div class="year">';
  strYearDivs+= '<strong>'+ this.timelineData[i].year + '</strong>';
  strYearDivs+= '<div class="numEvents">' + (this.timelineData[i].events.length...