Code Fatech From Obeject

by Santosh Thakur

HTML

<h1>Code Fatech From Obeject</h1>
<div class="countryBody">Country</div>
<div class="country"></div>

CSS

.test {
  border: 1px solid #333;
  margin: 5px;
  padding: 5px;
}

.selected {
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

JavaScript

var country = {
  ind: 'india',
  pak: 'Pakistan',
  afg: 'Afganistan'
};

$(function () {
  var con = $('.countryBody');
  var conDiv = $('.country');
  var List = $('<ul>');
  //console.log('condiv length ' + conDiv.children().length);
  con.click(function () {

    if (conDiv.children().length === 0) {
      for (var key in country) {
        var newLi = $('<li class="test"></li>');
        newLi.html(country[key]);
        List.append(newLi);
      }

      //alert('List ' + List);
      conDiv.append(List);
      countryClick();

    } else {
      return false;
    }
  });
});

var countryClick = function () {
  $("li.test").each(function (index) {
    $(this).click(function () {
      $(this).addClass('selected').siblings().removeClass('selected');
      $(this).insertBefore('li:first');
      var abc = $('li.selected').text();
      $('.countryBody').text(abc);
    });
  });
};