gustavoguichard/booking.js

## booking.js
jQuery(function() {
  var json = [{name: "Moscow", count: 12, content: "<p>Moscow is the capital city and the most populous federal subject of <b>Russia</b>. The city is a major political, economic, cultural and scientific center in Russia and in Eurasia.</p>"}, {name: "Amsterdam", count: 25, content: "<p>Amsterdam is the capital and most populous city of the <b>Netherlands</b>. Its status as the Dutch capital is mandated by the Constitution of the Netherlands though it is not the seat of the Dutch government, which is at the Hague. </p>"}, {name: "Lisbon", count: 15, content: "<p>Lisbon is the largest city and capital of <b>Portugal</b> with a population of 547,631 within its administrative limits on a land area of 84.8 square kilometers.</p>"}, {name: "Berlin", count: 19, content: "<p>Berlin is the capital city of <b>Germany</b> and one of the 16 states of Germany. With a population of 3.3 million people, Berlin is Germany's largest city and is the second most populous city proper and the seventh most populous urban area in the European Union.</p>"}, {name: "Madrid", count: 25, content: "<p>Madrid is the capital of <b>Spain</b> and its largest city. The population of the city is roughly 3.3 million and the entire population of the Madrid metropolitan area is calculated to be around 6.5 million.</p>"},{name: "Barcelona", count: 10, content: "<p>Barcelona is a Spanish city, capital of the autonomous community of Catalonia and the second largest city in the country, with a population of 1,620,943 within its administrative limits.</p>"}, {name: "Zagreb", count: 27, content: "<p>Zagreb is the capital and the largest city of the Republic of <b>Croatia</b>. It is located in the northwest of the country, along the Sava river, at the southern slopes of the Medvednica mountain.</p>"}, {name: "Singapore", count: 30, content: "<p>Singapore, officially the Republic of Singapore, is a Southeast Asian sovereign city-state off the southern tip of the Malay Peninsula, 137 kilometers north of the equator.</p>"}, {name: "Beijing", count: 14, content: "<p>Beijing, sometimes romanized as Peking, is the capital of the People's Republic of China and one of the most populous cities in the world. The population as of 2012 was 20,693,000.</p>"}, {name: "Paris", count: 5, content: "<p>Paris is the capital and most populous city of <b>France</b>. It is situated on the River Seine, in the north of the country, at the heart of the Île- de-France region.</p>"}];
  var sortedJson = json.sort(function(a, b){
    return [a.name] < [b.name] ? -1 : 1;
  });
  createHTMLLists(sortedJson);
  addListenersToList();

  function addListenersToList(){
    jQuery('.list-link', '.city-list').on('click', function(e){
      e.preventDefault();
      $parent = $(e.currentTarget).closest('li');
      $parent.toggleClass('show-description');
    });
  }

  function createHTMLLists(sortedJson){
    var roundedLenght = Math.floor((sortedJson.length / 3));
    var rest = (sortedJson.length % 3);
    var count = 0;
    for (var i = 0; i < 3; i++) {
      var $ul = jQuery("<ul class=\"city-list\"/>");
      for (var _i = 0; _i < roundedLenght; _i++){
        $ul.append(createItem(count, sortedJson))
        count++;
      }
      if(i < rest){
        $ul.append(createItem(count, sortedJson))
        count++;
      }
      jQuery('body').append($ul);
    }
  }

  function createItem(n, list){
    var link = '<a href="#" class="list-link">' + list[n].name + '</a>'
    var $li = jQuery('<li/>').html(link + ' (' + list[n].count + ')' + list[n].content);
    return $li;
  }
});

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Booking Assesment</title>
  <style type="text/css" media="screen">
  .city-list{
    float: left;
    width: 33%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .city-list li{
    margin-left: 2.3em;
    margin-bottom: 1.5em;
  }
  .city-list p{
    display: none;
  }
  .city-list .show-description p{
    display: block;
  }
  </style>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="booking.js"></script>
</body>
</html>
	jQuery(function() {
	var json = [{name: "Moscow", count: 12, content: "<p>Moscow is the capital city and the most populous federal subject of <b>Russia</b>. The city is a major political, economic, cultural and scientific center in Russia and in Eurasia.</p>"}, {name: "Amsterdam", count: 25, content: "<p>Amsterdam is the capital and most populous city of the <b>Netherlands</b>. Its status as the Dutch capital is mandated by the Constitution of the Netherlands though it is not the seat of the Dutch government, which is at the Hague. </p>"}, {name: "Lisbon", count: 15, content: "<p>Lisbon is the largest city and capital of <b>Portugal</b> with a population of 547,631 within its administrative limits on a land area of 84.8 square kilometers.</p>"}, {name: "Berlin", count: 19, content: "<p>Berlin is the capital city of <b>Germany</b> and one of the 16 states of Germany. With a population of 3.3 million people, Berlin is Germany's largest city and is the second most populous city proper and the seventh most populous urban area in the European Union.</p>"}, {name: "Madrid", count: 25, content: "<p>Madrid is the capital of <b>Spain</b> and its largest city. The population of the city is roughly 3.3 million and the entire population of the Madrid metropolitan area is calculated to be around 6.5 million.</p>"},{name: "Barcelona", count: 10, content: "<p>Barcelona is a Spanish city, capital of the autonomous community of Catalonia and the second largest city in the country, with a population of 1,620,943 within its administrative limits.</p>"}, {name: "Zagreb", count: 27, content: "<p>Zagreb is the capital and the largest city of the Republic of <b>Croatia</b>. It is located in the northwest of the country, along the Sava river, at the southern slopes of the Medvednica mountain.</p>"}, {name: "Singapore", count: 30, content: "<p>Singapore, officially the Republic of Singapore, is a Southeast Asian sovereign city-state off the southern tip of the Malay Peninsula, 137 kilometers north of the equator.</p>"}, {name: "Beijing", count: 14, content: "<p>Beijing, sometimes romanized as Peking, is the capital of the People's Republic of China and one of the most populous cities in the world. The population as of 2012 was 20,693,000.</p>"}, {name: "Paris", count: 5, content: "<p>Paris is the capital and most populous city of <b>France</b>. It is situated on the River Seine, in the north of the country, at the heart of the Île- de-France region.</p>"}];
	var sortedJson = json.sort(function(a, b){
	return [a.name] < [b.name] ? -1 : 1;
	});
	createHTMLLists(sortedJson);
	addListenersToList();

	function addListenersToList(){
	jQuery('.list-link', '.city-list').on('click', function(e){
	e.preventDefault();
	$parent = $(e.currentTarget).closest('li');
	$parent.toggleClass('show-description');
	});
	}

	function createHTMLLists(sortedJson){
	var roundedLenght = Math.floor((sortedJson.length / 3));
	var rest = (sortedJson.length % 3);
	var count = 0;
	for (var i = 0; i < 3; i++) {
	var $ul = jQuery("<ul class=\"city-list\"/>");
	for (var _i = 0; _i < roundedLenght; _i++){
	$ul.append(createItem(count, sortedJson))
	count++;
	}
	if(i < rest){
	$ul.append(createItem(count, sortedJson))
	count++;
	}
	jQuery('body').append($ul);
	}
	}

	function createItem(n, list){
	var link = '<a href="#" class="list-link">' + list[n].name + '</a>'
	var $li = jQuery('<li/>').html(link + ' (' + list[n].count + ')' + list[n].content);
	return $li;
	}
	});
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Booking Assesment</title>
	<style type="text/css" media="screen">
	.city-list{
	float: left;
	width: 33%;
	padding: 0;
	margin: 0;
	list-style: none;
	}
	.city-list li{
	margin-left: 2.3em;
	margin-bottom: 1.5em;
	}
	.city-list p{
	display: none;
	}
	.city-list .show-description p{
	display: block;
	}
	</style>
	</head>
	<body>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="booking.js"></script>
	</body>
	</html>